网站设计与制作软件,envato wordpress toolkit,宁波网站制作公司费用价格,辽宁建设厅查询网站最近公司要制作个文档库#xff0c;直接就可以将jekyll应用到实际中。 模版使用了Jekyll Clean#xff0c;这么模版相对内部简单一点#xff0c;学习成本不会很大#xff0c;而复杂的Minimal Mistakes就当作参考。 模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点… 最近公司要制作个文档库直接就可以将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/:title1你网站可能会放在域名的某个文件夹下面那么根目录就要带着那个文件夹有了“baseurl”的配置就能方便拼接了。 2生成的文件路径“destination”默认是在_site文件夹中现在放到了我自定义的文件夹下面。 3分页中为了方便演示每页仅显示1条记录文章保存方式是年月日标题分页的目录会在“article”分页比较特殊下面会详解。 4markdown就是文章编辑语言使用了kramdownkramdown是markdown的超级。highlighter就是代码高亮的方式使用了rouge。 5excerpt_separator与文章摘要相关后面也会详解。 6collections就是定义一种新的文档类型例如上面定义了“common”那么在最终生成的文件中会专门有一个文件夹这个后面也会说明下。        二、集合Collections 1与文章的区别 在结构中有一个_post文件夹这个文件夹内放的就是文章列表文件名就是按年月日标题的方式起的最终生成的将是年月日的文件夹。    如果把所有各种类型的文章都放在这个里面管理会比较混乱例如我有随笔、UI库、工具库等要放在网站展示。 随笔的话就可以都放在_post文件夹里但是UI库等其他类型的文章展示的格式与其不一样、展示的方式也与其不一样。 下图是一张UI库的页面左边放的是分类右边放的内容。如果单独放在文件夹中那么就可以很方便的编辑分类链接。 h1基础样式/h1 ullia href{{ site.baseurl }}/ui/typeface.html文本/a/lilia href{{ site.baseurl }}/ui/icon.html图标/a/lilia href{{ site.baseurl }}/ui/grid.html网格/a/lilia href{{ site.baseurl }}/ui/border.html边框/a/lilia 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: constname: 普通常量children:- id: cookiename: cookie- id: menuname: menu- id: toname: 分享回调中设置的TO- id: jsbridgename: JSBridge 在sidenav.html中输出 nav classbs-docs-sidebar hidden-print hidden-xs hidden-sm affix-topul classnav bs-docs-sidenav{% for data in site.data[page.sidebar][page.sidenav] %}{% if forloop.first %}li classactive{% else %}li{% endif %}a href#{{ data.id }}{{ data.name }}/a{% if data.children %}ul classnav{% for sub in data.children %}lia href#{{ sub.id }}{{ sub.name }}/a/li{% endfor %}/ul{% endif %}/li{% endfor %}/ula href#top classback-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 %} ullia 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 classarticlediv classwellh1 classnonea href{{ site.baseurl}}{{ post.url }}{{ post.title }} {{ post.date | date: %Y年%m月%d日 }}/a/h1div classcontent{{ 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 classpaginationlia href{{ site.baseurl}}/article/span首页/span/a/lili{% if paginator.page 1 %}spanlaquo;/span{% else %}{% if paginator.previous_page 1 %}a href{{ site.baseurl}}/article/{% else %}a href{{ site.baseurl}}/article/{{ paginator.previous_page }}{% endif %}spanlaquo;/span/a{% endif %}/li{% for i in (1..paginator.total_pages) limit:9 offset:{{paginator.page-1}} %}{% if paginator.page i %}li classactive{% 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 %}spanraquo;/span{% else %}a href{{ site.baseurl}}/article/{{ paginator.next_page }}spanraquo;/span/a{% endif %}/lilia href{{ site.baseurl}}/article/{{paginator.total_pages}}span末页/span/a/lili classdisabledspan第{{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如需转载请自行联系原作者