wagtail cms将css组件和javascript项具体化为块。
wagtail-materializecss的Python项目详细描述
#wagtail_materialecss
用materialecss设计您的wagtail页面！
运行演示项目以查看其运行方式。
*preload
*scrollspy（目录）
*materialpage with base.html
*设置navbar和footer样式的默认页面变量
*另外还包括抽象模型navbar和footer
*用于获取流域通用组件的函数
*get_headings（exclude=none）-返回h1、h2、h3、h4、h5，h6标签，带有支持
*get_components（exclude=None）的scrollspy表-返回卡片、集合、按钮、图标的块，…
*get_footer_blocks（exclude=None）-返回一些人可能希望放在页脚中的公共组件。
！[示例页]（./example_page.png）
！[管理示例]（example_admin.png）
`` python
来自django.db import models
来自wagtail.core.fields import streamfield，richtextfield
来自wagtail.admin.edit_handlers import fieldpanel，streamfieldpanel，multifieldpanel，fieldrowpanel
从wagtail.images.edit_handlers导入imagechooserpanel
从wagtail.core.blocks导入richtextblock
从wagtail_materialecss.models导入materialpage，获取标题，从wagtail\u materialecss.components import collection获取组件
class blogger主页（materialpage）：
author=models.charfield（最大长度=255）
background\u image=models.foreignkey（'wagtailimages.image'，on\u delete=models.set\u null，null=true，相关的“+”）
用户“=models.ForeignKey（'wagtailmages.image'，on_delete=models.SET_NULL，NULL=True，相关的“+”）
body=StreamField（[
*get_headings（exclude=['h6']），
（'paragraph'，RichTextBlock（icon='pilcrow'），
（'collection'，collection（），
*get_components（），
]）
内容面板=物化页面。内容面板+[
多字段面板（[
字段面板（'author'），
ImageChooserPanel（'background\u image'），
ImageChooserPanel（'user\u image'），
，heading=“author fields”，
字段面板（'intro'，classname=“full”），
]
````
Template
``djangotemplate
{%扩展了“wagtail_materialecss/base.html”%}
{%load static wagtailcore_tags wagtailmages_tags wagtail_materialecss_tags%}
{%block body_class%}Template blogger主页{%endblock%}
{%block before_container%}
<；div class="row">
{%image page.background_image original as page_image%}
<；div class='hero-image'style=“background image:url（'{{page_image.url}'）”>；
<；div>；
{%endblock%}
{%block content%}
<；div^{cl1}$<；{cl 3}{%image页{%image页{cl3}{%image页{%image页。用户的图像填充200x200{cl 4}}{cl4}$<；h3{cl 5}}{cl5}$<；div>；
<；div{{cl 6}}}{{cl6}}}}{{cl6}{{cl6}}{cl6}{{cl6}}}}{%cl 7}}{{{%cl 7}}}}{%包括块页{<；h5>；文章<；h5>；
<；div class="divider"></div>
{%for post in blogpages%}
<；div class="col s12 m6 l4">
{%make_link None“Go to post”post.specific as post_link%}
{%make_card post.specific.title post.specific.description post_link size='small'%}
<；div>；
{%endfor%}
<；div>；
{%endblock%}
```
用materialecss设计您的wagtail页面！
运行演示项目以查看其运行方式。
*preload
*scrollspy（目录）
*materialpage with base.html
*设置navbar和footer样式的默认页面变量
*另外还包括抽象模型navbar和footer
*用于获取流域通用组件的函数
*get_headings（exclude=none）-返回h1、h2、h3、h4、h5，h6标签，带有支持
*get_components（exclude=None）的scrollspy表-返回卡片、集合、按钮、图标的块，…
*get_footer_blocks（exclude=None）-返回一些人可能希望放在页脚中的公共组件。
！[示例页]（./example_page.png）
！[管理示例]（example_admin.png）
`` python
来自django.db import models
来自wagtail.core.fields import streamfield，richtextfield
来自wagtail.admin.edit_handlers import fieldpanel，streamfieldpanel，multifieldpanel，fieldrowpanel
从wagtail.images.edit_handlers导入imagechooserpanel
从wagtail.core.blocks导入richtextblock
从wagtail_materialecss.models导入materialpage，获取标题，从wagtail\u materialecss.components import collection获取组件
class blogger主页（materialpage）：
author=models.charfield（最大长度=255）
background\u image=models.foreignkey（'wagtailimages.image'，on\u delete=models.set\u null，null=true，相关的“+”）
用户“=models.ForeignKey（'wagtailmages.image'，on_delete=models.SET_NULL，NULL=True，相关的“+”）
body=StreamField（[
*get_headings（exclude=['h6']），
（'paragraph'，RichTextBlock（icon='pilcrow'），
（'collection'，collection（），
*get_components（），
]）
内容面板=物化页面。内容面板+[
多字段面板（[
字段面板（'author'），
ImageChooserPanel（'background\u image'），
ImageChooserPanel（'user\u image'），
，heading=“author fields”，
字段面板（'intro'，classname=“full”），
]
````
Template
``djangotemplate
{%扩展了“wagtail_materialecss/base.html”%}
{%load static wagtailcore_tags wagtailmages_tags wagtail_materialecss_tags%}
{%block body_class%}Template blogger主页{%endblock%}
{%block before_container%}
<；div class="row">
{%image page.background_image original as page_image%}
<；div class='hero-image'style=“background image:url（'{{page_image.url}'）”>；
<；div>；
{%endblock%}
{%block content%}
<；div^{cl1}$<；{cl 3}{%image页{%image页{cl3}{%image页{%image页。用户的图像填充200x200{cl 4}}{cl4}$<；h3{cl 5}}{cl5}$<；div>；
<；div{{cl 6}}}{{cl6}}}}{{cl6}{{cl6}}{cl6}{{cl6}}}}{%cl 7}}{{{%cl 7}}}}{%包括块页{<；h5>；文章<；h5>；
<；div class="divider"></div>
{%for post in blogpages%}
<；div class="col s12 m6 l4">
{%make_link None“Go to post”post.specific as post_link%}
{%make_card post.specific.title post.specific.description post_link size='small'%}
<；div>；
{%endfor%}
<；div>；
{%endblock%}
```
欢迎加入QQ群-->： 979659372
