使用Jekyll撰写博客(四)

minima样式调整

新创建的博客默认的样式使用_sass文件中的文件(如果没有找到该文件夹,请参考jekyll搭建章节补充内容),目录结构:

.
├── minima.scss
├── minima
|   ├── _base.scss
|   ├── _layout.scss
|	└── _syntax-highlighting.scss

根据minima.scss文件中的内容可知,最终通过@import将其他的文件合并到一个文件中。:

// Import partials.
@import
  "minima/base",
  "minima/layout",
  "minima/syntax-highlighting"
;

文件中的内容,上面的多行$...类似于我们定义的变量,因此也可以在@import中的其它地方使用。minima.scss中的内容,例如:

// Width of the content area
$content-width:    800px !default;

英文的注释不难理解,通过调整上面的值,就可以改变自己的网站默认显示的内容的宽度了。

在修改时,最后在自己的site根目录下创建相同的目录_sass,并把样式文件拷贝过来修改,lekyll在加载时会自动覆盖默认的样式文件。

安装插件

jekyll-tagging

安装教程:jekyll-tagging安装教程

  1. 安装jekyll-tagging

    sudo gem install jekyll-tagging

  2. 配置

    • 打开_config.yml文件,添加下面内容:

      tag_page_layout: tag_page
      tag_page_dir: tag
      
    • 打开根目录下的Gemfile文件,添加下面内容:

      gem 'jekyll-tagging'
      
    • 在项目根目录中创建_plugins目录,并创建_plugins/ext.rb文件(如果不存在的话),内容(添加)为require 'jekyll/tagging'

    • _layouts目录中新建tag_page.html文件,添加下面内容:

      ---
      layout: default
      ---
      <h2>{{ page.tag }}</h2>
      <ul>
      {% for post in page.posts %}
        <li><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.date | date_to_string }} | Tags: {{ post | tags }})</li>
      {% endfor %}
      </ul>
      
      <div id="tag-cloud">
        {{ site | tag_cloud }}
      </div>
      
  3. 在页头放置标签链接

    • 在根目录下创建tags.md文件,只需填写YAML Frout Matter信息即可:

      layout: tag_page
      title: 标签
      

      此时启动jekyll serve,就可以看到header上多了一个标签的超链接了。

      标签链接就是我们刚才放到根目录中的tags.md文件转换生成的,原因类似于About超链接。About在我们创建博客开始就一直存在于根目录中about.md,同样的也在我们页面的header中有About超链接。

    • 为什么要这么做呢?

      查看_includes/header.html文件:

      {% assign default_paths = site.pages | map: "path" %}
      {% assign page_paths = site.header_pages | default: default_paths %}
      <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
      	...
      	...
      <div class="trigger">
        {% for path in page_paths %}
          {% assign my_page = site.pages | where: "path", path | first %}
          {% if my_page.title %}
          	<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {% endif %}
          {% endfor %}
        <a class="page-link" href="{{ "/feed.xml" | relative_url }}">RSS</a>
      </div>
      

      class=“trigger”的div中的for循环里,会去遍历根路径(默认,当然也可以通过上面的assign来自定义路径)下的所有*.md文档,并把文档的title作为超链接呈现在主页面的header上。

注意事项:

  1. 根目录下没有_plugins目录和ext.rb文件?

    创建即可

  2. 如何使用?

    我们根据教程会创建一个tag_page.html的模板文件(存放于_layouts目录下),安装教程到这就截止了,那我怎莫用呢…?

    直接点说,就是我们新创建一个post,然后将它的YAML Front Matter中的layout: tag_page文章内容空白就可以了。

最终效果图:

此外根据jekyll官网的插件章节中介绍的生成云状的标签列表,可以根据文章的篇数调整标签的大小。测试时可以在本地观察到具体效果,但提交到github上后不能显示的问题,暂时还未解决,根据官网说明:

GitHub Pages是由Jekyll提供技术支持的,考虑到安全因素,所有的Pages通过--safe选项禁用了插件功能,因此如果你的网站部署在Github Pages,那么你的插件不会工作。

不过仍然有办法发布到GitHub Pages,你只需在本地做一些转换,并把生成好的文件上传到Github替代Jekyll就可以了。

问题已解决,感谢知乎上朋友的帮助,请参考:Jekyll Plugins on GitHub