jekyll php,使用Jekyll在Github上搭建个人博客(文章分类索引)
系列文章传送门:
今天又滚出去野了一天,打牌输了,好在输的不多,聊天聊到了以后的路子,不太好走啊...
使用Category分类
一般来说,一个个人博客的文章会分为很多种,比如说有记录生活情感的、技术交流的、转载他人的等等,而在jekyll中,可以使用Category进行分类,使用方法非常简单
为文章定义分类
首先要确定文章属于哪个分类。这个配置可以设置在文章的头信息中,使用category或者categories确定,如文章属于“test”类别:
---
layout: MyTemplate
title: Category Sample
category: test
---
或者使用categories,这个属性接受一个数组,代表这篇文章所述的类,如文章属于“test”和“sample”类别:
---
layout: MyTemplate
title: Category Sample
categories: [test, sample]
---
加入这些信息后,文章所属分类就定义好了。但是还需要在页面(或者模板)中输出分类所有的文章才能完成以分类为基础的索引功能
输出所有分类
所有的分类信息都被存储在site对象的categories中,所以可以通过liquid的for标签进行输出:
{% for category in site.categories %}
{{ category | first }}
{{ category | last | size }}
{% for post in category.last %}
{{ post.date | date:"%d/%m/%Y"}}{{ post.title }}
{% endfor %}
{% endfor %}
上面代码可以看到,首先从site中取出所有categories的信息,分别输出。categories的元素为一个两个元素的数组,第一个元素为category的名字,第二个元素则为一个数组,保存有该分类下文章的列表
于是乎就很简单了:
* 使用{{ category | first }}输出分类的名称
* 使用{{ category | last | size }}输出该分类下文章的数目
* 遍历category.last输出所有文章的信息,构建到该文章的索引
这样就完成了在一个页面上输出所有分类,及其所有文章索引的方法了。但是需要注意的是,这种方式只能获取所有分类,而不能获取某个单一分类下的文章。毕竟jekyll编译完成后是静态页面,没有办法动态生成(除非为每一个分类都创建一个html文件,并在首页上创建一大堆通向这些html文件的a标签)。事实上,这个问题有一个解决方法是使用jekyll插件去解决。但是github不支持三方jekyll插件。所以必须绕个弯子来实现这种方式
输出单个分类下的所有文章
我们可以轻松获得所有分类下的所有文章,但是没有办法只输出一个分类下的文章。
首先可以想到的解决方法方法:首先把所有分类和所有文章的html生成好,然后全部隐藏。把需要显示的分类的名称放在url中,使用javascript读取名称出来后根据名称显示该分类。这样做有一个坏处:如果文章数较多,而每个文章都有很多分类,那么就会出现html文件很大,加载很慢的情况。
于是乎又想到一种方法,将所有的数据压缩在JSON中,然后通过javascript解析JSON对象,然后动态生成html。这种方法不过是一个折中,如果需要生成的html较为复杂,完全可以使用第一种方法。但如果只是简单的索引,这种方法就足够了。根据需要考量吧。下面放一点简单的源码来介绍一下这种方法:
var dataStr = '{ {% for cat in site.categories %}{% if cat[0] != site.categories.first[0] %},{% endif %}"{{ cat[0] }}":[{% for post in cat[1] %}{% if post != cat[1].first %},{% endif %}{"url":"{{post.url}}", "title":"{{post.title}}", "date":"{{post.date | date:"%d/%m/%Y"}}"}{% endfor %}]{% endfor %} }',
data = JSON.parse(dataStr),
curTag = $.query.get("cat"),
archieves = data[curTag];
首先通过上面介绍过的方法构建JSON字符串,这里只是一个模板,读取了所有分类,并以分类名称为key,文章列表为value构建了一个对象。文章列表的元素也是一个对象,有date,url,title三个值,分别表示文章的日期、url路径、标题,帮助生成索引。解析完之后就可以通过url中的category的名称取出来了。这里使用了一个叫jQuery.query的插件,专门取url的参数并进行包装。
综上所述,比如只显示单一分类的页面叫showCategory.html,要显示java分类,那么首页中给个a标签,href为/showCategory.html?cat=java就行了,方便快捷(笑)
类别为中文时问题
Windows下,使用UTF-8编码时当category为中文时,在通过url进入文章时,会出现如下错误
Internal Server Error
"\xAE\xBE" from GBK to UTF-8
我并不知道这个编码为何会需要从GBK转换为UTF-8,所以只能通过其他方式进行避开。网上应该会有人解答这个问题,需要进一步去查了,这里讲一下我怎么避开的吧
首先介绍一下jekyll的Permalinks这个配置,这个配置定义了文章被jekyll处理后生成结果的最终路径,默认为/:categories/:year/:month/:day/:title.html,也就是说,如一篇文章叫“2014-2-6-this-is-a-title.md”,在文章中定义的文类为[测试, new],那么最终这篇文章的路径将会是“_site/测试/new/2014/02/06/this-is-a-title.html”,也就是说如果category为中文名称的话,中文将会出现在url中。然后就会根据中文去jekyll的action中索引,然后导致错误。
避开方法就是去掉根据permlinks中的categories,因为一般情况下根据时间来生成文件夹就已经够了,在_config.yml中新增一行:
permalink: /:year/:month/:day/:title
规则可以自己定,具体参照jekyll的Permlinks配置介绍页面,别出现categories就行了
使用文章标签索引文章
现在很多博客都支持给文章添加标签,表示这篇文章具体是哪几方面的技术。jekyll也是支持标签的,而且不需要额外的插件。使用方法和categories类似
给文章添加标签
文章中的标签配置使用tags来定义,内容为一个数组,放在文章的头中,如本文的标签定义:
---
layout: MyTemplate
title: 使用Jekyll在Github上搭建个人博客(文章分类索引)
tags: [github, jekyll]
---
输出所有标签
一般情况下,标签与文章为很复杂的多对多关系,所以如果生成所有标签及含有该标签的所有文章,html将会非常庞大,所以一般只是生成所有的标签,然后通过点击标签到达该标签的索引页面,页面中仅显示含有该标签的文章。
输出所有标签,可以通过liquid的for标签遍历site.tags来实现:
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
tag[0]是标签的名称
输出含有某标签的所有文章数
实现思路和上面categories一样,先生成JSON字符串再通过javascript动态生成html,具体代码:
var dataStr = '{ {% for tag in site.tags %}{% if tag[0] != site.tags.first[0] %},{% endif %}"{{ tag[0] }}":[{% for post in tag[1] %}{% if post != tag[1].first %},{% endif %}{"url":"{{post.url}}", "title":"{{post.title}}", "date":"{{post.date | date:"%d/%m/%Y"}}"}{% endfor %}]{% endfor %} }',
data = JSON.parse(dataStr),
curTag = $.query.get("tag"),
archieves = data[curTag];
这里还是一样,使用jQuery.query插件获取url中的参数,和上面的 {{ tag[0] }}相对应
标签没有字符集问题,放心使用吧
总结
文章的分类其实实现并不难,但是需要绕点小弯子。如果有更好的不需要使用插件的方法希望能告知我,感激不尽
jekyll php,使用Jekyll在Github上搭建个人博客(文章分类索引)相关推荐
- hexo在github上搭建个人博客详细步骤
hexo搭建个人博客详细步骤 本片博文讲详细讲解搭建过程,经历鉴于我搭建托管博客所遇到的错误!为了避免读者重蹈覆辙.我将尽量详细,和一些遇到的错误与大家分享. 第一步 1 首先我们先去准备[githu ...
- 在github上搭建个人博客
1.平台注册账号,新建域名 github(源码托管服务站):https://github.com/ 到GitHub官网,注册自己的账号,填好用户名,密码,邮箱,并完成邮箱验证就可以啦! 默认的域名是h ...
- 在github上搭建hexo博客
cnblog的MarkDown太糟心了,干脆换hexo和github pages用用. 这个随笔给自己当备忘录用的,网上有更详细的教程. hexo官方文档 安装git,安装nodejs windows ...
- github上搭建个人博客
为什么80%的码农都做不了架构师?>>> http://blog.csdn.net/liumengxinfly/article/details/7419144 http://w ...
- 尝鲜之在Github上搭建Octopress博客
参考这两篇文章足矣. 1.http://blog.163.com/fuhaocn@126/blog/static/366650802012115103842500/ 2.http://www.cnbl ...
- 最全面的github pages搭建个人博客教程
作为一个程序员怎么能没有自己的个人博客呢,这里详细记录和分享我的博客搭建经验,让你轻轻松松拥有自己的博客网站.傻瓜式一站式教你用 github pages 来搭建博客,详细记录全过程,保证你能学会. ...
- 利用Github Page 搭建个人博客网站
利用Github Page 搭建个人博客网站 转载请注明出处: http://blog.csdn.net/tzs_1041218129/article/details/53214497 http:// ...
- Github Pages搭建个人博客(2018年10月版)
Github Pages搭建个人博客(2018年10月版) 前言 几年前看到网上大神自己搭建的个人博客网站,就想过搭建一个属于自己的个人博客网站,为此还专门去研究了建站所需技能,但是购买了域名和云虚拟 ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
最新文章
- 【libevent】libevent库学习总结(一)——基础
- 存储过程---角色权限叠加
- 剑桥大学Raven系统
- Python邮件发送案例
- Xamarin.Forms读取并展示Android和iOS通讯录 - TerminalMACS客户端
- Python获取硬件信息(硬盘序列号,CPU序列号)
- oracle字段属性设置下拉列表,下拉列表 select-option ; select-optgroup-option
- 我的第一个MPI程序:利用矩形规则计算pi
- WinForm里ListBox实现加入项目,并且排序。
- 如何收集常见的前端性能信息
- Android Studio报错:Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-reflect:1.3.61)
- 项目涉及到的知识点及项目流程图
- [oracle]Oracle 11g DG搭建(备库使用ASM)
- 大于2019电大计算机应用上机表格题,2019年电大计算机应用基础试题及答案重要知识点...
- chromium的下载和编译
- Qt下图片加密的两种方式
- 破解 zip 压缩包程序
- 使用镜像服务站下载CentOS安装包
- vmvare打开虚拟机时报错:vmx文件已损坏
- chrome浏览器F12 Network中Timing参数含义
热门文章
- python控制键盘鼠标库pynput基本操作
- js jQuery方法join()
- Camera2闪光灯相关
- ubuntu 16.04 开机开启小键盘数字键
- python (win32com) 批量删除 word (docx, doc) 中所有页眉、页脚 (Word.Application, Word.Basic)
- PHP判断中文字符串的长度和字节长度
- 安装Tensorflow 报错false Not creating XLA devices, tf_xla_enable_xla_devices not set
- GraphQL(四):GraphQL工程化实践
- win10装win7虚拟机教程
- fastqc检验时不能执行java_安装Fastqc软件遇到的坑