最近公司要制作个文档库,直接就可以将jekyll应用到实际中。

模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考。

模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点,我就直接将Bootstrap官网中的CSS和JS拉了下来。

一、全局配置

在_config.yml文件中可以有多种设置,包括全局配置、编译选项等。

#网站根目录
baseurl: /docs# 生成的文件路径
destination: ../../dist/docs# 分页
permalink: /:year/:month/:day/:title.html
paginate: 1
paginate_path: "article/:num"# 转换
markdown: kramdown
highlighter: rouge
excerpt_separator: <!--excerpt-->gems: ['jekyll-paginate']exclude: ['open.bat','Gemfile','Gemfile.lock','Guardfile', 'gulpfile.js']# Collections
collections:common:output: truepermalink: /:collection/:titleui:output: truepermalink: /:collection/:title

1)你网站可能会放在域名的某个文件夹下面,那么根目录就要带着那个文件夹,有了“baseurl”的配置,就能方便拼接了。

2)生成的文件路径“destination”,默认是在_site文件夹中,现在放到了我自定义的文件夹下面。

3)分页中为了方便演示,每页仅显示1条记录,文章保存方式是年月日+标题,分页的目录会在“article”,分页比较特殊,下面会详解。

4)markdown就是文章编辑语言,使用了kramdown,kramdown是markdown的超级。highlighter就是代码高亮的方式,使用了rouge。

5)excerpt_separator与文章摘要相关,后面也会详解。

6)collections就是定义一种新的文档类型,例如上面定义了“common”,那么在最终生成的文件中,会专门有一个文件夹,这个后面也会说明下。

  

二、集合(Collections)

1)与文章的区别

在结构中有一个_post文件夹,这个文件夹内放的就是文章列表,文件名就是按年月日+标题的方式起的,最终生成的将是年月日的文件夹。

  

如果把所有各种类型的文章都放在这个里面,管理会比较混乱,例如我有随笔、UI库、工具库等要放在网站展示。

随笔的话就可以都放在_post文件夹里,但是UI库等其他类型的文章展示的格式与其不一样、展示的方式也与其不一样。

下图是一张UI库的页面,左边放的是分类,右边放的内容。如果单独放在文件夹中,那么就可以很方便的编辑分类链接。

<h1>基础样式</h1>
<ul><li><a href="{{ site.baseurl }}/ui/typeface.html">文本</a></li><li><a href="{{ site.baseurl }}/ui/icon.html">图标</a></li><li><a href="{{ site.baseurl }}/ui/grid.html">网格</a></li><li><a href="{{ site.baseurl }}/ui/border.html">边框</a></li><li><a href="{{ site.baseurl }}/ui/layout.html">布局</a></li>
</ul>

2)_data

在上图的右边,还有个页面内容导航,顺便说明下:

kramdown会给h1等自动加上ID,上图中的“h1-h6”就被自动加了ID,里面有英文就用此英文,如果没有就自动生成。

原先我是将这些内容放在_include文件夹下面,_include内放的都是些页面通用部分,后面发现页面越来越多,但是内容都差不多,仅仅是数据不一样,每次都是在复制黏贴。

后面发现jekyll提供了个_data,可以将数据放入此处,再用for循环来输出,此文件夹内可以使用 .yml、.yaml、.json、csv 扩展名。

- id: "const"name: "普通常量"children:- id: "cookie"name: "cookie"- id: "menu"name: "menu"- id: "to"name: "分享回调中设置的TO"- id: "jsbridge"name: "JSBridge"

在sidenav.html中输出:

<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top"><ul class="nav bs-docs-sidenav">{% for data in site.data[page.sidebar][page.sidenav] %}{% if forloop.first %}<li class="active">{% else %}<li>{% endif %}<a href="#{{ data.id }}">{{ data.name }}</a>{% if data.children %}<ul class="nav">{% for sub in data.children %}<li><a href="#{{ sub.id }}">{{ sub.name }}</a></li>{% endfor %}</ul>{% endif %}</li>{% endfor %}</ul><a href="#top" class="back-to-top">返回顶部</a>
</nav>

jekyll用的是liquid模版引擎,有自己的语法,基本常规的都有。

三、文章

1)分类

现在的文章都会有分类,做了区分后,文章能更有调理,下图是博客园的自定义文章分类。

jekyll的文章中要做分类,可以在头信息中设置category或categories。

---
layout: article-detail
title: demo
date: 2016-05-09 08:25:06
sidebar: article
category: tool
author: strick
---

在上图中会显示这个分类的名字,并且会输出这个分类下面文章的个数,点击这个分类名,能够跳转到相应的分类下的文章列表。

要实现这几个功能,可以通过categories的相关属性获取。

<h1>随笔分类</h1>
{% for category in site.categories %}
<ul><li><a href="{{ site.baseurl}}/category/{{ category.first }}.html">{{category.first}}({{category.last.size}})</a></li>
</ul>
{% endfor %}

2)文章列表

上面的分类文章列表中,会多个判断:

{% for category in site.categories %}{% if category.first == page.category %}{% for post in category.last %}
<div class="article"><div class="well"><h1 class="none"><a href="{{ site.baseurl}}{{ post.url }}">{{ post.title }} {{ post.date | date: "(%Y年%m月%d日)" }}</a></h1><div class="content">{{ post.excerpt | strip_html }}</div></div>
</div>{% endfor %}{% endif %}
{% endfor %}

“{{ post.excerpt | strip_html }}”就是在做文章摘要,strip_html是将HTML标签去除。

“{{ post.date | date: "(%Y年%m月%d日)" }}”是在做格式化时间,上面的头信息中设置了“date: 2016-05-09 08:25:06”。

3)分页

jekyll的分页只能在index.html中执行,只能这个文件,其他文件是不能执行,“paginator”对象中的属性都将为空。

在上面的_config.yml中设置了两个关于分页的属性,一个是每页显示的数量,一个是分页文件输出的方式。

paginate: 1
paginate_path: "article/:num"

没有把页码1给输出,我在做分页的时候,就每次都得多做个判断。

页面的样式就直接用了Bootstrap的分页。

<ul class="pagination"><li><a href="{{ site.baseurl}}/article/"><span>首页</span></a></li><li>{% if paginator.page == 1 %}<span>&laquo;</span>{% else %}{% if paginator.previous_page == 1 %}<a href="{{ site.baseurl}}/article/">{% else %}<a href="{{ site.baseurl}}/article/{{ paginator.previous_page }}">{% endif %}<span>&laquo;</span></a>{% endif %}</li>{% for i in (1..paginator.total_pages) limit:9 offset:{{paginator.page-1}} %}{% if paginator.page == i %}<li class="active">{% else %}<li>{% endif %}{% if i == 1 %}<a href="{{site.baseurl}}/article">{{i}}</a>{% else %}<a href="{{site.baseurl}}/article/{{i}}">{{i}}</a>{% endif %}</li>{% endfor %}<li>{% if paginator.page == paginator.total_pages %}<span>&raquo;</span>{% else %}<a href="{{ site.baseurl}}/article/{{ paginator.next_page }}"><span>&raquo;</span></a>{% endif %}</li><li><a href="{{ site.baseurl}}/article/{{paginator.total_pages}}"><span>末页</span></a></li><li class="disabled"><span>第{{paginator.page}}页 / 共{{paginator.total_pages}}页</span></li>
</ul>

demo下载:

http://download.csdn.net/download/loneleaf1/9518315

参考资料:

Syntax Highlighting in Jekyll With Rouge

Rouge支持的语言

kramdown语法

Kramdown 语法文档翻译

文章分类索引

为Jekyll增加不完美的分页和文章摘要

本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/5484779.html,如需转载请自行联系原作者

用jekyll制作高大上的网站(二)——实际应用相关推荐

  1. cms php vue 开源_企业网站制作常用CMS网站内容管理系统推荐

    现在做网站90%的都是采用cms网站管理系统,内容管理系统(CMS)是一种当下非常主流的网站建设系统,能够快速地帮助我们建立一个属于自己的网站,相比定制后台系统,主流的cms都是经过很多年持续更新,经 ...

  2. 初学者制作自己的网站详细流程(可以上传自己做的网页)

    制作自己的网站详细流程(可以上传自己做的网页) 自己以前做网页都是仅仅做一下,在本地看一下效果.但是最近需要做一个网站在手机上来展示自己网页内容,搜了一下资料,需要用到域名与主机.可能部分朋友不知道它 ...

  3. web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作

    HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 文章 ...

  4. HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作

    HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...

  5. 如何制作一个漂亮的二维码 QRBTF

    作者 ciaochaos CPunisher 置顶:我们的二维码生成网站 qrbtf.com 有人说,二维码是 线下向线上转化最重要的入口,无论是对于线下商家.自媒体运营者.策展人还是纸媒编辑,二维码 ...

  6. 用php建设一个简单的网站,PHP_PHP新手上路(六),建设一个简单交互的网站(二) 5 - phpStudy...

    PHP新手上路(六) 建设一个简单交互的网站(二) 5.5 计数器 让我们在首页上加上一个计数器.这个例子已经被讲过多次了,但是还是有利于演示怎样读写文件以及创建自己的函数.counter.inc包含 ...

  7. 影集制作php源码_2018最新仿720全景在线制作云平台网站PHP源码(新增微信支付+打赏+场景红包+本地存储)...

    源码介绍 最新仿720全景在线制作云平台网站|720云全景系统源码|全景在线制作网站源码是一款基于php+mysql开发制作的全景在线制作网站源码,包含全景图片,全景视频等.数据存储全部存于OSS云端 ...

  8. 新建的一个网页怎么上传到服务器,Dreamweaver怎样制作网页发布网站

    在平平淡淡的学习.工作.生活中,大家都跟作文打过交道吧,作文是由文字组成,经过人的思想考虑,通过语言组织来表达一个主题意义的文体.相信写作文是一个让许多人都头痛的问题,下面是小编精心整理的Dreamw ...

  9. 搜索引擎制作_搜索引擎优化方法_网站制作流程:网站建设7个基本流程!

    发布时间:2020-12-08 10:12:16 从目前来看,每天都会有大量的初创企业诞生,作为企业主而言,第一时间想到的事情,就是建立一个网站,但由于初创企业,并没有专业相关的网站制作人员,往往是寻 ...

最新文章

  1. 使用Vue动态生成form表单的实例代码
  2. c语言大学程序设计题库,黑龙江大学C语言程序设计试题库程序单选
  3. Python 处理带中文 Excel 文件
  4. ​FreeSWITCH视频会议“标准”解决方案
  5. java范形_java为什么要用范(泛)型?
  6. 请插入多卷集的最后一张磁盘_聊一聊插入排序和选择排序
  7. Tomcat学习总结(5)——Tomcat容器管理安全的几种验证方式
  8. 合成资产挖矿项目 ARCx 启动流动性挖矿
  9. 为什么自动挡的挡位顺序都是P、R、N、D?
  10. apache ab测试与centos系统优化
  11. Udp、Tcp、Http Socket
  12. oracle存储过程id递增,oracle存储过程——按id更新相关信息
  13. 汇编语言典型例子详解_汇编语言例子_汇编语言 举例子
  14. C#中public函数的用法_python中的lambda函数用法
  15. DR模式 + keepalived
  16. jquery radio设置选中_前端jQuery实战之 attr() 和 prop() 的区别
  17. 直流电机控制原理与TB6612FNG(初识编码器)
  18. git commit --amend 的使用记录
  19. python_PEP 8: E703 statement ends with a semicolon
  20. 树莓派 linux hook,树莓派制造日视/夜视串流直播摄像头

热门文章

  1. matlab 棍,双足机器人行走棍图怎么用MATLAB画出来
  2. mysql003三表查询.三表查询.自链接查询
  3. django框架中的模型
  4. python基础 list和tuple
  5. ai创造了哪些职业_关于创造职业的思考
  6. Fiddler 十分钟最全使用介绍
  7. JS中创建函数的几种方式
  8. 1080*1920 下看网站很爽
  9. Vincross孙天齐:人机界面的突破将引发科技革命
  10. SpringMVC 数据的格式化、JSR 303数据校验和国际化