jekyll php,实践:为jekyll构建的博客添加基础功能

龙毅
2023-12-01

通过github默认构建工具生成的博客功能还是非常单薄的,所以就需要做点后期工作添加一些常见的功能,例如:搜索、评论、订阅和归档页面。

构建工具

写了一个简单的Makefile来做自动构建的工作:

all: css js site

css:

@sqwish stylesheets/styles.css

js:

@cat javascripts/respond.js javascripts/common.js | uglifyjs > javascripts/main.min.js

site:

@jekyll --rdiscount

watch:

@jekyll --rdiscount --server --auto

.PHONY: css

这样我在vim调用:make命令就完成压缩合并资源文件和本地部署文件的任务了。

图标

使用了One div上面的几个css样式,这样可以减少图片文件的请求数量,加快响应时间,不过现在图标在移动设备的Chrome上显示有点大,暂时还没解决。

订阅功能

订阅有两种:一种是rss,一种是atom,都是从githab上面找的模板。

---

layout: none

---

{{ site.name }}

{{ site.description }}

{{ site.url }}

{% for post in site.posts limit:10 %}

{{ post.title }}

{{ post.content | xml_escape }}

{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}

{{ site.url }}{{ post.url }}

{{ site.url }}{{ post.url }}

{% endfor %}

注意这里有使用部分_config.xml里的变量

---

layout: nil

title : Atom Feed

---

{{ site.title }}

{{ site.time | date_to_xmlschema }}

{{ site.url }}

{{ site.author.name }}

{{ site.author.email }}

{% for post in site.posts %}

{{ post.title }}

{{ post.date | date_to_xmlschema }}

{{ site.url }}{{ post.id }}

{{ post.content | xml_escape }}

{% endfor %}

注意这里有使用部分_config.xml里的变量

搜索和评论服务

搜索用的google:

样式是由angularjs.org借鉴过来的(感谢),另加了动画和阴影。

评论用的是Disqus(因为没有找到国内提供静态页面评论服务的提供商)

function _load(src, callback){ //load script file async

var script = document.createElement('script');

script.type = 'text/javascript';

script.async = true;

script.src = src;

script.onload = callback;

document.getElementsByTagName('HEAD')[0].appendChild(script);

}

_load('http://{{site.disqus_name}}.disqus.com/embed.js');

注意这里有使用部分_config.xml里的变量

站点地图

创建站点地图索引文件可以有效的帮助搜索引擎找到你的文章, 具体用法请参考google的文章, sitemap可以支持多种格式,我这里还是用的xml:

---

---

{% for post in site.posts %}

{{ site.url }}{{ post.url }}

{{ post.date | date_to_xmlschema }}

monthly

{% endfor %}

定制页面

写了两个分类的页面,一个是按时间分类的 archive.html,另一个是按tag分类的 tags.html. 两个页面模板代码差不多,例如tags.html:

---

layout: default

title: 按标记归档

---

{% for tag in site.tags %}

{{ tag[0] | join: "/" }} {{ tag[1].size }}

{% endfor %}

{% for tag in site.tags %}

{{ tag[0] | join: "/" }}

{% assign pages_list = tag[1] %}

{% for node in pages_list %}

{% if node.title != null %}

{% if group == null or group == node.group %}

{% if page.url == node.url %}

{{node.title}}

{% else %}

{{node.title}}

{% endif %}

{% endif %}

{% endif %}

{% endfor %}

{% endfor %}

配置文件

name: jack's blog

author:

name: Qiming Zhao

email: chemzqm@gmail.com

github: chemzqm

description: blog of jack(chemzqm)

#google analysis track id

track: UA-22751097-2

disqus_name: zqm

url: http://chemzqm.me

markdown: rdiscount

pygments: true

其中前面的参数用做变量,可在其它文件中使用{{ site.name }}来引用。后面两个是jekyll运行参数,具体请参考官方文档

尽管使用jekyll来扩展功能不像wordpress中安装插件那样的方便,但是代码的加入和编写的过程完全可控,不必理会操作数据库的繁琐操作,同时liquid模板的可读性相比php要高的多,结果就是管理者在修改的时候有章可循,很大程度降低了维护的成本。

如果你感兴趣,可以到github上下载本站的最新源代码

 类似资料: