2017年12月27日 更新记录

发表于 | 分类于 |

更改样式

不想再使用最初确定的样式，好像手机界面不太合适，而且我也没有太多的功能，于是整体修改样式。
好在我对css了解一些。
参考的是233Blog的整体样式，在此表示感谢，作出了部分修改，整合bootstrap（原网站没有使用此css样式）。

部分功能有待完善

  • 右侧标签部分
  • 右侧搜索部分
  • 归档链接
  • 关于链接
  • 详情页面关于“上一篇”和“下一篇”的链接
  • 以及其他细节等
  • 详情页面右侧想要显示目录，但是mistune好像需要自己写toc函数？

代码不显示行号

感觉似乎显示行号没有什么必要，于是将行号隐藏。
主要是我对css的控制还不太好，如果显示行号，详情页面的宽度就会出问题（代码区太宽）；如果代码区域出现横向滚动条后，行号的高度和代码区不一致（代码区比行号区高出一个滚动条）。
反正就是把行号去掉了，效果还可以。

首页和内容页面使用模板

对于django，我确实是新手，包括python。
尝试使用模板套出来所有的页面。因为：

  • 页面头部都一样
  • 页面右侧大部分也可以一样
  • 页面尾部一样
  • 调用的样式几乎一样
  • 调用的js也几乎一样

模板调用方案

  1. 新建base.html页面，此页面可以和最初的首页一样。就相当于把原首页复制一份，改名为base.html。
  2. 修改base.html页面，把页面中有差异的部分，比如页面主要的左侧内容部分，几乎每个页面都是不一样的，用block blockname和endblock包起来，比如代码如下：
    1
    2
    3
    4
    5
    6
    7
    ...
    <div class="container">
        <main>
            {% block mainbody %}{% endblock %}
        </main>
    ...
    </div>

其中，blockname可以自定义，但是同一个页面中不能重复。
而且，block中间可以放默认的代码，也可以直接留空。默认的代码，可以查看下面第4步的用法

  1. 然后比如首页想要使用这个base.html模板，就在index.html最开始的地方，引入模板extends "base.html"。需要说明的是双引号中的base.html的路径，是根据在settings.py中指定的TEMPLATES中DIRS字段的值来搜索的。
    比如settings.py中设置如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ...
    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            # 比如DIRS的值是如下，模板在templates文件夹中
            'DIRS': [os.path.join(BASE_DIR, 'templates')],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]
    ...

而你的base.html文件位置如下：

1
2
3
4
5
6
7
8
project root\
    ...
    templates\
        post\
            base.html
            index.html
            detail.html
    ...

所以最开始引入模板的时候，就需要改成extends "post/base.html"，否则会报错，说找不到base.html。而且，extends "post/base.html"必须写在index.html的第一行。

  1. 直接在index.html的第二行，紧跟着上面步骤中的extends "post/base.html"，写如下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // templates/post/index.html
    {% extends "post/base.html" %}
    {% block mainbody %}
    <div id="barba-wrapper" aria-live="polite">
        <div class="barba-container" style="visibility: visible;">
            {% for post in post_list %}
            <article>
                <h1><a href="{{post.get_abs_url}}">{{post.title}}</a></h1>
                <time>{{post.created_time}}</time>
                <div class="content">{{post.smalltext}}</div>
            </article>
            {% empty %}
            <div>没有记录</div>
            {% endfor %}
            <div class="all"><a href="javascript:;">更多文章</a></div>
        </div>
    </div>
    {% endblock %}

当然，我在base.html中，还加入了：

1
2
3
...
<title>{% block page_title %}{{PageTitle}}{% endblock %}</title>
...

这里的两个block中间是有内容的（当然也可以是普通的html代码）。
也就是说，如果我在index.html中没有指定block page_title，那么就会默认的使用base.html页面中block包括的代码；而如果detail.html指定了block page_title`，比如：

1
2
3
4
// templates/post/detail.html
...
{% block page_title %}{{post.title}} - {{\PageTitle}}{% endblock %}
...

比如detail页面中，标题可能要设置成这样，于是在detail.html页面中就会用指定的内容替换base.html的对应的内容。

页面中加入了几个font-awsome图标

font-awsome图标挺有意思，我理解的就是图标文字，可以自己指定颜色。
多好。
参考链接http://fontawesome.io/icons/

就这么着吧

PS: 我真是啰嗦。