ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jekyll搭建个人博客3

2019-07-17 16:02:34  阅读:267  来源: 互联网

标签:tags 分类 list 博客 jekyll tag 文章 搭建


文章目录

文章是怎样分类显示的

下图是我的分类显示博文的页面,可以看到这个页面是根目录下的tags页面,页面主要有两大部分,上半部分是所有文章的一个分类,以及每个分类下文章的数量;下面是每个分类下所有文章的列表

mark

我们打开/tags.html文件,内容如下

mark

第一次打开这个文件,很可能看不懂,html代码里面夹杂着其他的代码,这些用大括号和百分号组成的代码,其实是Liquid语言,要看懂这段代码,你首先得了解一下这种语言,这里有中文文档,这里是英文文档,其实很简单,只需要不到一个小时,你就能懂基础的语法了

首先来看博文目录是怎样生成的

  • {% raw %}{% assign tags_list = site.tags %}{% endraw %}:声明了一个tag_list变量,内容是site.tagssite.tags其实是jekyll中的一个变量,那么到底是什么内容呢?内容如下
{"博客"=>[#, #], "笔记"=>[#]}

博客笔记是文章的分类,说明现在有两种文章类型,一种是博客,另一种是笔记,博客下面有两篇文章(两个**#),笔记下面有一篇文章(一个#**)

  • {% raw %}{% include JB/tags_list %}{% endraw %}:即插入了_includes/JB/tags_list文件,我们打开这个文件,主要起作用的代码如下:
{% raw %}{% for tag in tags_list %} 
    <li>
        <a href="{{ BASE_PATH }}{{ site.JB.tags_path }}#{{ tag[0] }}-ref">
        {{ tag[0] }} <span>{{ tag[1].size }}</span>
        </a>
    </li>
{% endfor %}{% endraw %}
  • {% raw %}{% for tag in tags_list %}{% endraw %}:循环遍历tag_list里的每一条内容, tag_list里的内容就是上面的大括号里内容,所以tag就是某一条内容,比如第一次循环,tag就是"博客"=>[#, #],那么很自然tag[0]就是分类名,即博客,tag[1].size就是属于博客类型的文章的个数,即2条,所以最终你看到的结果就是分类+文章数目

再来看博文标题列表是怎样生成的

经过上面的分析,我们知道tag[1]是属于tag标签下所有文章的集合,那么只要循环遍历每个文章分类(tag)和分类下的文章(tag[1]),就可以输出每篇文章的标题了,循环每个tag的代码在上面的/tags.html的博文列表那一段,循环某个tag下所有文章的代码在_includes/JB/pages_list中,其中主要起作用的内容如下

{% raw %}{% for node in pages_list %}
    <li><a href="{{ BASE_PATH }}{{node.url}}">{{node.title}}</a></li>
{% endfor %}{% endraw %}

怎样写一篇博文

你只需要在你的markdown文章前加上头信息,就可以被jekyll处理成可以访问的页面,头信息格式如下:

---
layout : post
title: "jelyll搭建个人博客3"
date: 2019-07-17
tag: 博客
---

三个短横线之内的就是头部信息,layout是文章最后套用的模板,与文章显示的样式有关,title就是博文列表里显示的文章标题,如果为空,则最后会显示文件名,tag就是文章分类显示时的类别,注意冒号后均有一个空格

标签:tags,分类,list,博客,jekyll,tag,文章,搭建
来源: https://blog.csdn.net/Loganojx/article/details/96316894

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有