django博客页面显示

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tk1026/article/details/77073540

完善Home页面

Home页面优化

打开index.html 文件,修改代码:

{% for post in posts %}
                <h2>
                    <a href="#">{{ post.title }}</a>
                </h2>
                <p class="lead">
                    by <a href="index.php">{{ post.author }}</a>
                </p>
                <p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.created|date:"Y /m /d" }}</p>

                <p>{{ post.content|truncatechars:100 }}</p>
                <a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>

                <hr>
                {% endfor %}

{{ post.content|truncatechars:100 }} 语句中| 是python中的管道用法,truncatechars:100 表示页面内容显示100个字符;{{ post.created|date:"Y /m /d" }}date:"Y /m /d" 表示时间的显示方式。优化后的页面:

这里写图片描述

博客页面链接

我们的博客主页面显示已基本完成,下面如何从主页面跳转到文章的完整页面?我们只需将完整页面的链接添加进博客标题和ReadMore的a标签中:

 <!-- First Blog Post -->
                {% for post in posts %}
                <h2>
                    <a href="/detail/{{ post.id }}/">{{ post.title }}</a>
                </h2>

由于detail 视图函数需要传入一个参数,因此,将该页面的post.id 传给detail 的参数id
打开浏览器试着运行,当点击标题或者ReadMore时,页面跳转到特定的detail.html 页面。
但是这样的硬编码,不利于我们将来的维护,如果页面名字修改了,就要修改很多地方,因此,我们使用django的命名空间,将a标签内容调整:

{% for post in posts %}
                <h2>
                    <a href="{% url 'detail' id=post.id %}">{{ post.title }}</a>
                </h2>

我们在blogpost/urls.py 模块中定义了url的name参数,这里利用{% url %} 模板标签直接定位到name参数的URLconf。这就简化了我们的维护,当要修改页面名称时,只需要修改代码中一处即可。


文章完整页面

页面显示

我们的主页面已基本完善,接下来编写文章页面。先将完整页面的导入(原文件名也叫index,我已将其改名为detail):
这里写图片描述

打开detail.html 文件,与主页面一样,先将静态文件导入。将文件中的硬编码内容删除,添加如下语句:

  <!-- Blog Post -->

  <!-- Title -->
  <h1>{{ post.title }}</h1>

  <!-- Author -->
  <p class="lead">
       by <a href="#">{{ post.author }}</a>
  </p>

  <hr>

  <!-- Date/Time -->
  <p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.created|date:"Y /m /d" }}</p>

  <hr>

  <!-- Preview Image -->
  <img class="img-responsive" src="http://placehold.it/900x300" alt="">

  <hr>

  <!-- Post Content -->
  <p>{{ post.content }}</p>

再从主页文章列表点击跳转到文章页面,如下:
这里写图片描述

模板继承

在做完主页和详细页面后,我们发现这两个页面有很多重复的地方,我们可以利用django的模板继承来缩减大量重复代码。仔细观察index.htmldetail.html 页面,它们只有在<div class="row"> 块下的<div class="col-md-8"> <div class="col-lg-8"> 不同:
这里写图片描述

现在在templates/ 目录新建一个base.html 文件,将主页面内容拷贝进去,然后进行如下修改:
这里写图片描述

<div class="col-md-4"> 上方的代码全部删除,添加{% block content %}{% endblock %} 语句,表示该部分可以自行修改。再将index.htmldetail.html 文件的多余部分删除,只留下<div class="col-md-8"><div class="col-lg-8"> 如下:
detail.html:
这里写图片描述

index.html:
这里写图片描述


markdown

安装markdown

pip安装:

(env)$:pip install markdown

github安装:

(env)$:git clone git://github.com/waylan/Python-Markdown.git python-markdown
(env)$:cd python-markdown
(env)$:python setup.py install

操作markdown

work 根目录新建一个文件text,将以下内容写入并保存:

<!DOCTYPE html>
<html>
    <head>
        <title>blog</title>
    </head>
    <body>
        # Markdown 语法测试

---

### 1. 斜体和粗体

使用 * 和 ** 表示斜体和粗体。

示例:

这是 *斜体*,这是 **粗体**。

### 2. 分级标题

使用 === 表示一级标题,使用 --- 表示二级标题。

示例:


这是一个一级标题
============================

这是一个二级标题
--------------------------------------------------

### 这是一个三级标题


你也可以选择在行首加井号表示不同级别的标题 (H1-H6),例如:# H1, ## H2, ### H3,#### H4。

### 3. 无序列表

使用 *,+,- 表示无序列表。

示例:

- 无序列表项 一
- 无序列表项 二
- 无序列表项 三

### 4. 有序列表

使用数字和点表示有序列表。

示例:

1. 有序列表项 一
2. 有序列表项 二
3. 有序列表项 三

### 5. 文字引用

使用 > 表示文字引用。

示例:
    </body>
</html>

当前目录文件:

(env) $: ls
blog    env     text

进入python命令行:

(env) $: python
Python 3.5.2 (v3.5.2:4def2a2901a5, Jun 26 2016, 10:47:25) 
[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import markdown
>>> input_file = open("text", mode="r", encoding='utf-8')
>>> text = input_file.read()
>>> html = markdown.markdown(text, ['markdown.extensions.extra'])
>>> html
'<!DOCTYPE html>\n<html>\n    <head>\n        <title>blog</title>\n    </head>\n    <body>\n        # Markdown 语法测试\n\n<hr />\n<h3>1. 斜体和粗体</h3>\n<p>使用 * 和 ** 表示斜体和粗体。</p>\nm>斜体</em>,这是 <strong>粗体</strong></p>\n<h3>2. 分级标题</h3>\n<p>使用 === 表示一级标题,使用 --- 表示二级标题。</p>\n<p>示例:</p>\n<pre><code>这是一个一级标题\n=========================--------------------------\n\n### 这是一个三级标题\n</code></pre>\n\n<p>你也可以选择在行首加井号表示不同级别的标题 (H1-H6),例如:# H1, ## H2, ### H3,#### H4。</p>\n<h3>3. 无序列表</h3>\n<p>使li>无序列表项 一</li>\n<li>无序列表项 二</li>\n<li>无序列表项 三</li>\n</ul>\n<h3>4. 有序列表</h3>\n<p>使用数字和点表示有序列表。</p>\n<p>示例:</p>\n<ol>\n<li>有序列表项 一</li>\n<li>有序列表项li>有序列表项 三</li>\n</ol>\n<h3>5. 文字引用</h3>\n<p>使用 &gt; 表示文字引用。</p>\n<p>示例:\n    </body>\n</html></p>'

markdown.markdown(text, ['markdown.extensions.extra']) 语句的意思就是调用markdown() 函数将text文件渲染成markdown模式。参数一是被渲染的文件,参数二是markdown的扩展语法,extensions.extra 只是其中之一,其它还有:markdown.extensions.toc(目录)
markdown.extensions.admonition(警告)
markdown.extensions.codehilite(代码高亮) 等。

为博客添加markdown语法

打开blogpost/views.py 模块,在detail() 函数中添加如下语句:

import markdown

def detail(request, id):
    post = get_object_or_404(Blog, pk=id)
    post.content = markdown.markdown(post.content, extensions=['markdown.extensions.extra',
                                                               'markdown.extensions.codehilite',
                                                               'markdown.extensions.toc'])
    return render(request, 'blogpost/detail.html', {'post': post})

接下来我们在detail.html 文件的<p>{{ post.content }}</p> 处添加管道safe,语句变为<p>{{ post.content|safe }}</p>。之后进入django后台,我们添加一篇带markdown语法的文章。之后在浏览器中打开该页面:

这里写图片描述


语法高亮

前面我们在markdown里已经扩展了代码高亮语句markdown.extensions.codehilite,这个插件还需要安装Pygments 模块才能实现:

安装pygments:

(env) $: pip install pygments

创建一个代码高亮的CSS样式(其中-S后面是风格样式,默认样式default是emacs,生成的文件名为styles.css):

(env) $: pygmentize -S default -f html -a .codehilite > styles.css

查看pygments的样式:

(env) $:blog apple$ pygmentize -L style

查看当前目录会产生一个styles.css 文件:

(env) $:blog apple$ ls
blog            blogpost        db.sqlite3      manage.py       styles.css      templates

styles.css文件移到blogpost/static/blogpost/css/ 目录:

(env) $:blog apple$ mv monokai.css blogpost/static/blogpost/css/

接下来,在base.html 文件head标签中添加样式

<link rel="stylesheet" href="{% static 'blogpost/css/styles.css' %}">

运行开发服务器,打开文章详细页面:

这里写图片描述

代码高亮正常显示!

展开阅读全文

没有更多推荐了,返回首页