Blog の
結果を
前提
以下の
OS
% sw_vers ProductName: Mac OS X ProductVersion: 10.13.1 BuildVersion: 17B1003
Python の
Version % python3 -V Python 3.6.2
wagtail の
Version % python3 -m pip list --format=columns | grep wagtail wagtail 1.13.1
wagtail プロジェクトに
ついて wagtail start mysite
mysite
という プロジェクトを 作っている 想定で、 パスは 記載します。 Blog アプリケーションに
ついて
wagtail Your first Wagtail site を参考に、 Blog を 作る | Monotalk で Blog を 作成しています。
ライブラリ
wagtail markdown
で
Blog のMarkdownField
とStreamField
と
今回は、MarkdownField
を
インストール、 設定
インストール
PermissionError: [Errno 13] Permission denied: '/usr/local/bin/markdown_py'
に--user
を
python3 -m pip install wagtail-markdown --user
INSTALLED_APPS
に 追加
base.py
に、
- mysite/mysite/settings/base.py
INSTALLED_APPS = [ ... 'wagtailmarkdown', ... }
model に MarkdownFiled を 追加
models.py のMarkdownField
に
- mysite/blog/models.py
# Create your models here. from wagtail.wagtailcore.models import Page from wagtail.wagtailcore.fields import RichTextField from wagtail.wagtailadmin.edit_handlers import FieldPanel from wagtail.wagtailsearch import index from wagtail.api import APIField from wagtailmarkdown.edit_handlers import MarkdownPanel from wagtailmarkdown.fields import MarkdownField class BlogIndexPage(Page): intro = RichTextField(blank=True) content_panels = Page.content_panels + [ FieldPanel('intro', classname="full") ] class BlogPage(Page): date = models.DateField("Post date") intro = models.CharField(max_length=250) body = MarkdownField(blank=True) search_fields = Page.search_fields + [ index.SearchField('intro'), index.SearchField('body'), ] content_panels = Page.content_panels + [ FieldPanel('date'), FieldPanel('intro'), MarkdownPanel("body", classname="full"), ] api_fields = [ APIField('date'), APIField('intro'), APIField('body'), ]
Template の 修正
Template で
{% load wagtailmarkdown %}
を
* mysite/blog/templates/blog/blog_page.html
{% extends "base.html" %} {% load wagtailcore_tags %} {% block body_class %}template-blogpage{% endblock %} {% block content %} <h1>{{ page.title }}</h1> <p class="meta">{{ page.date }}</p> <div class="intro">{{ page.intro }}</div> {{ page.body|markdown }} <p><a href="{{ page.get_parent.url }}">Return to blog</a></p> {% endblock %}
Migration を 実行
body の
python3 manage.py makemigrations python3 manage.py migrate
サーバー起動して 確認
変更後の
python3 manage.py runserver
wagtail の
bodyの
Markdown形式で 入力して プレビュー
以下のような、
以下のように[TOC]
は
Code HighLight する
Pygments
のbase.html
に
CSS ファイルはhighlight
を、codehilite
に
- mysite/mysite/templates/base.html
<style> .codehilite code, .codehilite pre { color: #fdce93; background-color: #3f3f3f; } .codehilite .hll { background-color: #222; } .codehilite .err { color: #e37170; background-color: #3d3535; } .codehilite .k { color: #f0dfaf; } .codehilite .p { color: #41706f; } .codehilite .cs { color: #cd0000; font-weight: 700; } .codehilite .gd { color: #cd0000; } .codehilite .ge { color: #ccc; font-style: italic; } .codehilite .gr { color: red; } .codehilite .go { color: gray; } .codehilite .gs { color: #ccc; font-weight: 700; } .codehilite .gu { color: purple; font-weight: 700; } .codehilite .gt { color: #0040D0; } .codehilite .kc { color: #dca3a3; } .codehilite .kd { color: #ffff86; } .codehilite .kn { color: #dfaf8f; font-weight: 700; } .codehilite .kp { color: #cdcf99; } .codehilite .kr { color: #cdcd00; } .codehilite .ni { color: #c28182; } .codehilite .ne { color: #c3bf9f; font-weight: 700; } .codehilite .nn { color: #8fbede; } .codehilite .vi { color: #ffffc7; } .codehilite .c, .preview-zenburn .codehilite .g, .preview-zenburn .codehilite .cm, .preview-zenburn .codehilite .cp, .preview-zenburn .codehilite .c1 { color: #7f9f7f; } .codehilite .l, .preview-zenburn .codehilite .x, .preview-zenburn .codehilite .no, .preview-zenburn .codehilite .nd, .preview-zenburn .codehilite .nl, .preview-zenburn .codehilite .nx, .preview-zenburn .codehilite .py, .preview-zenburn .codehilite .w { color: #ccc; } .codehilite .n, .preview-zenburn .codehilite .nv, .preview-zenburn .codehilite .vg { color: #dcdccc; } .codehilite .o, .preview-zenburn .codehilite .ow { color: #f0efd0; } .codehilite .gh, .preview-zenburn .codehilite .gp { color: #dcdccc; font-weight: 700; } .codehilite .gi, .preview-zenburn .codehilite .kt { color: #00cd00; } .codehilite .ld, .preview-zenburn .codehilite .s, .preview-zenburn .codehilite .sb, .preview-zenburn .codehilite .sc, .preview-zenburn .codehilite .sd, .preview-zenburn .codehilite .s2, .preview-zenburn .codehilite .se, .preview-zenburn .codehilite .sh, .preview-zenburn .codehilite .si, .preview-zenburn .codehilite .sx, .preview-zenburn .codehilite .sr, .preview-zenburn .codehilite .s1, .preview-zenburn .codehilite .ss { color: #cc9393; } .codehilite .m, .preview-zenburn .codehilite .mf, .preview-zenburn .codehilite .mh, .preview-zenburn .highlight .mi, .preview-zenburn .codehilite .mo, .preview-zenburn .codehilite .il { color: #8cd0d3; } .codehilite .na, .preview-zenburn .codehilite .nt { color: #9ac39f; } .codehilite .nb, .preview-zenburn .codehilite .nc, .preview-zenburn .codehilite .nf, .preview-zenburn .codehilite .bp, .preview-zenburn .codehilite .vc { color: #efef8f; } </style>
markdown に
インデントが
font-awesome の リンクを 追加する
後日気づいたのですが、
Icon リンクの
wagtail には、wagtail_hooks.py
と
Template 自体の
投稿画面でのみinsert_editor_css
に
- wagtail_hooks.py
from django.utils.html import format_html from wagtail.wagtailcore import hooks @hooks.register('insert_editor_css') def editor_css(): return format_html('<link rel="stylesheet" href="{}">', "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css")
修正、
以上です。
StreamField
のドキュメントを 見た 限りは、 Model層に 影響を 与えずに 使用できる 機能に 思いました。 StreamField blocks API · wagtail/wagtail Wiki ↩
コメント