概述

此次论述的是pelican的theme的构成以及如何创建属于自己的theme。

第一部分,模板。

观看此系列文章要求:

掌握基本的Html语法。

了解本次创建主题使用的Bootstrap提供的一些样式,可以大大提高效率。

基本原理

首先介绍一下创建pelican主题的基本原理。

1.pelican主题文件的基本结构:

当在本地利用pelican创建完一个Blog后,建议建立一个文件夹来放置自己的theme,比如博主建立的文件夹名为MyTheme,然后,在该文件夹下建立你的主题文件夹,随便起一个自己喜欢的名字即可,博主的专属主题名为Sky。随后便可以在此文件夹下建立自己的主题文件了,其结构如下:

├── static

│ ├── css

│ └── images

└── templates

├── archives.html / to display archives

├── article.html // processed for each article

├── author.html // processed for each author

├── authors.html // must list all the authors

├── categories.html // must list all the categories

├── category.html // processed for each category

├── index.html // the index. List all the articles

├── page.html // processed for each page

├── tag.html // processed for each tag

└── tags.html // must list all the tags. Can be a tag cloud.

也就是说,在主题目录下会有两个子目录static和templates,其中static存放的是样式、图像等基本静态文件,templates存放的是基于jinjia2的模板文件。

本次教程针对模板部分。

2.基本模板文件的功能:

下面是每一个pelican要求的基本模板文件列表与其功能。

archives.html:所有文章的集合,在这一页上,你可以按照你喜欢的方式列出所有你已有的文章。

article.html:文章显示页面,每一篇博文就是用这个模板生成的。

author.html:用于显示某个作者所有文章的集合。

authors.html:用于列举所有作者的集合。

vcategories.html:用于列举所有分类的集合。

vcategory.html:用于显示某个分类下所有文章的集合。

index.html:这是博客的主页。

page.html:尚未清楚作用。

tag.html:用于显示所有具有某个标签的文章的集合。

tags.html:用于列举所有标签的集合。

3.jinjia2的使用:

jinjia2的使用非常简单,其本质是利用一些Python或自身的语句来做一些重复性的工作,借此达到提高开发效率的目的。

基本上我们需要的逻辑操作都是以这样的形式出现的:

{% yourcode %}

其中"yourcode"是你想要执行的内容。

比如:

{% for tag in tags %}

your code

{% end for %}

这一段代码的意思是:对tags集合中的每一个tag执行一次循环打印,打印的内容就是"your code"这个内容。

将其做一下小小的改变就可以实现文章列表等我们需要的功能,比如下面一段就是用来列举所有tag的:

{% for tag in tag_cloud %}

{{ tag.0 }}

{% endfor %}

当然,不仅仅是for,jinjia2同样支持if、include等语句,用到再说。

jinjia2有一个非常好的特性,就是支持继承 ,这一点使用得当可以进一步提高开发效率。其本质上是建立一个公用的父模板,将许多重复性的东西(例如页面信息,样式表的载入,资源路径等)都做好,然后在子模板中替换父模板中的一些内容即可。

如果要使用继承,可以在子模板开发加入以下代码:

{% extends "base.html" %

这句代码表示:此模板继承于base.html。

由于博客的特殊性(虽然有很多页面,但每一个不同的页面往往会包含相同的元素),博主建议建立一个base.html作为共用的父模板来简化整体的搭建,事实上一般也是这么做的。

模板继承的精华实际上只有一句代码:

{% block yourname %}default{% endblock %}

这表示一个可以在继承其的子模板内替换的块,这个块是用"yourname"进行标识的,可以替换为任意你想要的名字,"default"是缺省值。

具体使用时只要在子模板中将同样标识的block下"default"的内容替换即可:

{% block yourname %}aaa{% endblock %}

另外,还有一种语句用于打印在python中定义的变量:

{{ yourvar }}

这表示将python中定义的变量"youvar"打印在当前位置。

4.每一个模板内可用变量列表:

pelican制定了一些在某个模板内可用的变量,具体参考这里。

在使用是,只需要用{{}}语句将其在适当的位置打印出来,或者将其作为{%%}语句中的内容即可,可以参加上面列举tag的那个例子。

注:同样的变量名在不同的模板中可能对应不同的父类,比如在tag中的articles变量指的就是在该tag下的所有articles。

5.一些小问题:

在写完模板后编译时出现了一个奇怪的问题:

ascii codec can't decode byte 0xe8 in position 0:ordinal not in range(128)

最终确定此问题是由于编码导致的,但在检查之后确定所有模板文件的编码格式都是UTF-8,而且pelican的源文件又暂时不想动也找不到,所以最终采用了以下方法:

在你的Python安装路径下的"\Lib\site-packages"中建立一个名为sitecustomize.py的文件,用于加载自定义启动内容,在里面输入:

# encoding=utf8

import sys

reload(sys)

sys.setdefaultencoding('utf8')

这样就可以解决前面的问题了。

html个人主题制作,【Html】pelican主题的制作之模板相关推荐

  1. HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

    HTML.CSS 和 JavaScript 是前端编程密不可分的三大语言,我们一般看到的网页都由这三种语言组合编程而成.这三者之间究竟有什么样的关系?他们又是通过什么样的软件编成的呢? 目录 1. H ...

  2. 安卓手机主题软件_用AI软件制作手机主题图标

    铛铛铛,小编回来了 想小编了吗嘻嘻 今天给大家带来的是手机主题内容 让我们往下戳戳看吧 摘要:1.UI图标设计原则(1)容易识别.(2)有差异性.(3)准确用色.(4)表达准确.(5)风格统一.2.U ...

  3. DIV布局 京东商城购物网站(4页) 基于Html+Css+javascript的网页制作(购物主题)

    HTML5期末大作业:京东商城网站设计--京东商城购物网站(4页) 基于Html+Css+javascript的网页制作(购物主题) 文章目录 HTML5期末大作业:京东商城网站设计--京东商城购物网 ...

  4. 子主题function php,使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题...

    在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以 ...

  5. DW学生个人网站制作成品下载 HTML5+CSS大作业——汽车世界(6页) 关于制作汽车网页主题论述

    HTML5+CSS大作业--汽车世界(6页) 关于制作汽车网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...

  6. HTML5+CSS大作业——汽车世界(6页) 关于制作汽车网页主题论述

    HTML5+CSS大作业--汽车世界(6页) 关于制作汽车网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...

  7. 【Web网页制作】影视主题网页制作web页面开发(附源码)

    [写在前面] 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢. ...

  8. lda主题模型应用java_主题模型LDA及在推荐系统中的应用

    1 关于主题模型 使用LDA做推荐已经有一段时间了,LDA的推导过程反复看过很多遍,今天有点理顺的感觉,就先写一版.隐含狄利克雷分布简称LDA(latent dirichlet allocation) ...

  9. WordPress主题:自媒体二号大前端模板

    介绍: 自媒体二号是一款WordPress主题,这是一款大前端主题.该WordPress模板由主题巴巴制作并免费发布,当前版本为1.0.6.适合个人博客和自媒体使用. 模板相关: 主题作者:主题巴巴 ...

最新文章

  1. kinect深度距离误差_Kinect 深度测量原理
  2. UI组件之TextView及其子类(三)ToggleButton和Switch
  3. HD 1003 Max Sum (最大字段和问题)
  4. Windows下,启动Redis闪退 问题解决方案
  5. vue饼图组件_vue2.0 自定义 饼状图 (Echarts)组件
  6. 传统武术家为什么看起来厉害?谈实战的重要性
  7. 模拟生成微软序列号python_【python】13位随机序列号生成工具 源码分析
  8. 智慧路灯物联网解决方案
  9. 编写 USB 存储设备使用痕迹检测和删除工具
  10. 8-1 职场价值塑造-摆脱低价值瓶颈,展示高价值收获新机会
  11. please select a valid python interpreter(请选择一个解释器)
  12. Apriori关联分析算法 -尿布与啤酒的故事
  13. 破解神器面世!iPhone用户怎么办?
  14. 数据列表组件 jqGrid 二次封装
  15. python提取每个单词首字母_如何将字符串中每个单词的首字母大写(Python)?
  16. 记一次在android使用fdisk
  17. 在香港,无法使用迅雷下载怎么办?
  18. 给SwipeRefreshLayout添加上拉加载更多功能
  19. 装X与务实并存!iPad越狱必装插件汇总
  20. javascript中sessionStorage 、localStorage 和 Cookie

热门文章

  1. 鲸鱼游戏后端开发工程师职位面试过程回顾
  2. 分片报文的最后一片_IP分片(碎片)重组简单概念
  3. python毕业设计之django+vue医院医疗救助系统
  4. Nginx 支持 ws 协议的 MQTT
  5. usb通信时HOST和DEVICE要做的事情
  6. 哪种技术的工作更稳定?
  7. GTID的基本概念与应用
  8. Flutter修仙传——起源
  9. ttf字体库文件转换成base64 的css文件
  10. IDEA学习篇——IDEA刷新项目/清除项目缓存