写作说明:
在看完python3的基本与法后,为了巩固自己对语言的掌握就使用django1.8写了个人博客的小程序。在对博客文章进行markdown处理的时候遇到了几个问题,希望这篇文章能够帮助到其他人。
markdown
markdown是一个很多程序员都喜欢的标记性语言,很多知名博客和网站都支持采用了这一编辑器。
例如:segmentfault、简书、当然还有锤子的便签。为了在django1.8中对自己的文章进行markdown
,可以使用以下几个步骤:
#首先安装markdown2
pip3 install markdown2
接下来我们在应用的文件夹下新建文件夹templatetags,再在templatetags下新建两个文件:
__init___.py、custom_markdown.py 两个文件。在custom_markdown.py 中加入如下代码:
import markdown2
from django import template
from django.template.defaultfilters import stringfilter
from django.utils.encoding import force_text
from django.utils.safestring import mark_safe
register = template.Library()
@register.filter(is_safe=True)
@stringfilter
def custom_markdown(value):
return mark_safe(markdown2.markdown(force_text(value),
extras=["fenced-code-blocks", "cuddled-lists", "metadata", "tables", "spoiler"]))
现在templatetags文件夹就相当于你自己的一个包了。它的使用很简单,在需要的网页中引入custom_markdown,然后在需要进行
markdown的地方markdown就行了,如下:
{% extends "base.html" %}
{% load custom_markdown %}
{% block content %}
<div class="posts">
<section class="post">
<header class="post-header">
<h2 class="post-title">{{ post.title }}</h2>
<p class="post-meta">
Time: <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">{{ post.category }}</a>
</p>
</header>
<div class="post-description">
<p>
{{ post.content|custom_markdown }}
</p>
</div>
</section>
{% include "duoshuo.html" %}
</div> <!-- /.blog-post -->
{% endblock %}
highlight.js 高亮代码
完成上面的内容markdown后,还不能达到大部人的预期效果,因为代码快部分没有高亮显示。接下来我们来对代码块进行处理。
highlight.js支持非常多语言的高亮,而且高亮的风格也非常丰富,我们先去官网根据自己的选择的语言下载下来,然后放入static文件夹
下,然后我们在基模版中如下使用就能实现高亮了:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.5/css/bootstrap.css' %}" >
<link rel="stylesheet" href="{% static 'blog_css/my_blog.css' %}">
<script src="{% static 'bootstrap-3.3.5/js/bootstrap.js' %}"></script>
<script src="{% static 'jquery-2.1.4.min.js' %}"></script>
<!-- jqcloud -->
<script src="{% static 'jqcloud/jqcloud-1.0.4.js'%}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'jqcloud/jqcloud.css' %}">
<script src="{% static 'highlight/highlight.pack.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'highlight/styles/monokai.css' %}">
<!--返回顶部-->
<script src="{% static 'scrollup/jquery.scrollUp.js' %}"></script>
</head>
<script>hljs.initHighlightingOnLoad();</script>
......
最终的显示效果如下:
pagedown编辑器
完成前面的两步后我们,可能还需要在后台的文章编辑部分使用markdown的编辑器,这里我使用的是django-pagedown编辑器
。django-pagedown完美支持markdown语法,还能边写边预览,如果你觉得原生的界面比较丑的化还可以自己重写css。
#安装django-pagedown
pip3 install django-pagedown
安装好后,我们需要在settings.py中加入应用才能使用:
INSTALLED_APPS = (
'bootstrap_admin',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Article',
'pagedown',
)
接下来在admin.py中加入如下代码(官方的步骤不适用于django1.8,会报错):
from django.contrib import admin
from .models import Author,Tag,Classification,Article
from pagedown.widgets import AdminPagedownWidget
from django import forms
# Register your models here.
# 定义自己的form
class ArticleForm(forms.ModelForm):
content = forms.CharField(widget=AdminPagedownWidget())
class Meta:
model = Article
fields = '__all__'
class ArticleAdmin(admin.ModelAdmin):
form = ArticleForm
admin.site.register(Author)
admin.site.register(Tag)
admin.site.register(Classification)
#注册的时候绑定
admin.site.register(Article,ArticleAdmin)
然后后台的效果图如下:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。