html个人主题制作,【Html】pelican主题的制作之模板
概述
此次论述的是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主题的制作之模板相关推荐
- HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页
HTML.CSS 和 JavaScript 是前端编程密不可分的三大语言,我们一般看到的网页都由这三种语言组合编程而成.这三者之间究竟有什么样的关系?他们又是通过什么样的软件编成的呢? 目录 1. H ...
- 安卓手机主题软件_用AI软件制作手机主题图标
铛铛铛,小编回来了 想小编了吗嘻嘻 今天给大家带来的是手机主题内容 让我们往下戳戳看吧 摘要:1.UI图标设计原则(1)容易识别.(2)有差异性.(3)准确用色.(4)表达准确.(5)风格统一.2.U ...
- DIV布局 京东商城购物网站(4页) 基于Html+Css+javascript的网页制作(购物主题)
HTML5期末大作业:京东商城网站设计--京东商城购物网站(4页) 基于Html+Css+javascript的网页制作(购物主题) 文章目录 HTML5期末大作业:京东商城网站设计--京东商城购物网 ...
- 子主题function php,使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题...
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以 ...
- DW学生个人网站制作成品下载 HTML5+CSS大作业——汽车世界(6页) 关于制作汽车网页主题论述
HTML5+CSS大作业--汽车世界(6页) 关于制作汽车网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...
- HTML5+CSS大作业——汽车世界(6页) 关于制作汽车网页主题论述
HTML5+CSS大作业--汽车世界(6页) 关于制作汽车网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...
- 【Web网页制作】影视主题网页制作web页面开发(附源码)
[写在前面] 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢. ...
- lda主题模型应用java_主题模型LDA及在推荐系统中的应用
1 关于主题模型 使用LDA做推荐已经有一段时间了,LDA的推导过程反复看过很多遍,今天有点理顺的感觉,就先写一版.隐含狄利克雷分布简称LDA(latent dirichlet allocation) ...
- WordPress主题:自媒体二号大前端模板
介绍: 自媒体二号是一款WordPress主题,这是一款大前端主题.该WordPress模板由主题巴巴制作并免费发布,当前版本为1.0.6.适合个人博客和自媒体使用. 模板相关: 主题作者:主题巴巴 ...
最新文章
- kinect深度距离误差_Kinect 深度测量原理
- UI组件之TextView及其子类(三)ToggleButton和Switch
- HD 1003 Max Sum (最大字段和问题)
- Windows下,启动Redis闪退 问题解决方案
- vue饼图组件_vue2.0 自定义 饼状图 (Echarts)组件
- 传统武术家为什么看起来厉害?谈实战的重要性
- 模拟生成微软序列号python_【python】13位随机序列号生成工具 源码分析
- 智慧路灯物联网解决方案
- 编写 USB 存储设备使用痕迹检测和删除工具
- 8-1 职场价值塑造-摆脱低价值瓶颈,展示高价值收获新机会
- please select a valid python interpreter(请选择一个解释器)
- Apriori关联分析算法 -尿布与啤酒的故事
- 破解神器面世!iPhone用户怎么办?
- 数据列表组件 jqGrid 二次封装
- python提取每个单词首字母_如何将字符串中每个单词的首字母大写(Python)?
- 记一次在android使用fdisk
- 在香港,无法使用迅雷下载怎么办?
- 给SwipeRefreshLayout添加上拉加载更多功能
- 装X与务实并存!iPad越狱必装插件汇总
- javascript中sessionStorage 、localStorage 和 Cookie