django博客页面显示

来源：互联网发布：网易广州网签数据编辑：程序博客网时间：2024/06/05 14:33

完善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.html 和detail.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.html 和 detail.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) $: lsblog    env     text

进入python命令行：

(env) $: pythonPython 3.5.2 (v3.5.2:4def2a2901a5, Jun 26 2016, 10:47:25) [GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwinType "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 markdowndef 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$ lsblog            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' %}">

运行开发服务器，打开文章详细页面：

这里写图片描述

代码高亮正常显示！

阅读全文

0 0