HyG Front-end Dev Engineer

对这个 jekyll 博客主题的改版和重构

2016-03-12
Haoyang Gao

本文主要说明对这个博客主题的改版和代码重构的过程。这个简洁高雅的博客主题受到了很多朋友的喜欢。在写第一版界面时,我对前端并不是很熟悉,对Jekyll也不熟悉。现在距离当时也一年了,对自己当时写的代码也不太满意了,同时Jekyll如今也已经升级了,目前最新版为3.1.2。因此我在临近毕业尚未入职前做一下博客主题的代码重构和改版吧。

主要想做这些事情有:添加归档,添加标签,添加分类页面,主页显示文章摘要,代码去除 jQuery 和 BootStrap,优化移动端显示,将所有变量写入配置文件_config.yml中等。再优化一些细节吧。希望更多人会喜欢。

改版重构说明

  • 使用 GitHub 风格的代码块 Markdown 写法 (Fenced code blocks)。

    即 GFM(github flavored markdown) 的方式。

    Jekyll 已经升级至 3.1.2(2016-03),其中有一些新的要注意的地方,比如官网上说使用了 Rouge 去做代码高亮而不是默认的 Pygments,因为 Jekyll 本身是基于 Ruby 的,因此我看到官方说希望不再使用基于 Python 的 Pygments 了,而是都使用基于 Ruby 的代码。详情见官网升级说明 syntax-highlighter-changed

  • 首页中添加摘要

    摘要可以在每一篇 md 文件头中使用 excerpt 属性写出来。也可以在正文中,4个换行符来分割,这个设置见配置文件_config.yml

  • 添加归档

    上一版中没有归档,现在专门做了一个归档页面,当文章很多时方便根据年份快速查阅。

  • 添加标签

    标签还是很有必要添加的,上一版中也没有这个功能。现在也可以根据标签查找文章了。同时标签还有一个重要的作用是,用来获取相似文章的。

  • 添加分类页

    之前的分类就是在首页中直接完成的,现在和标签和归档类似,我将分类单独制作为一页,方便查阅。

  • 去掉 jQuery 和 BootStrap

    我觉得太重了,没必要使用这两个库,使用原生 JavaScript 和 CSS就可以做到一样的效果,代码量大大减轻,载入速度略有提高。

  • 重写了demo页的瀑布流布局

    改变数据写死的方式,将数据用 json 格式录入,由 JavaScript 拼接为 HTML 代码。同时,使用 Masonry,重写了瀑布流布局。

  • 简化评论配置,支持 多说 和 disqus

    _config.yml中评论配置直接添加自己的short_name,评论就能正常使用了。

下面列举一些可能遇到的问题,至少我是遇到了:

RubyGems 无法访问,SSL 证书问题

以前我使用的是 RubyGems 的淘宝镜像https://ruby.taobao.org/。现在这个镜像已经不再维护了,作者 huacnlee (李华顺) 转到 Ruby China 中继续维护了,详情见 RubyGems 镜像- Ruby China

错误呈现

在执行任何gem命令的时候出现以下错误:

ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
    SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://gems.ruby-china.org/specs.4.8.gz)

解决方法

根据 https://gems.ruby-china.org/ 页面最下方提供的 GitHub Issue 地址。

可以进入这个 issue:https://github.com/ruby-china/rubygems-mirror/issues/3

其中 sanlengjingvv 给出了一个链接地址 https://gist.github.com/fnichol/867550 里面提供了方法。我就是采用这里面的方法解决的。

我使用的是 The Manual Way,因为 The Ruby Way 我没有成功,不知道什么原因,有兴趣的朋友可以试试。下面说说我的具体操作吧。

首先从 https://curl.haxx.se/ca/cacert.pem 将文件cacert.pem下载至 C:\RailsInstaller\cacert.pem

然后执行

set SSL_CERT_FILE=C:\RailsInstaller\cacert.pem

就成功了,不会再出现 SSL 错误了。

最后原文中说,为了长久设置,将这个目录存入控制面板中。我没理解是什么意思,是指环境变量吗?有朋友知道的话,欢迎留言告知我。

我存入环境变量后,还是会出现 SSL 错误,这时再次执行上面那条命令即可。

jekyll-paginate 依赖缺失

因为 jekyll 3 中默认安装已经没有这个分页组件了,官方把这个分页组件插件化了,因此要独立安装。详情见 https://jekyllrb.com/docs/pagination/

错误呈现

在启动 jekyll 服务的时候出现以下错误:

jekyll serve
Configuration file: c:/gitWorkSpace/blog-based-on-jekyll-3/_config.yml
  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
jekyll 3.1.2 | Error:  jekyll-paginate

解决方法

我们安装这个插件到本地即可。

gem install jekyll-paginate
Fetching: jekyll-paginate-1.1.0.gem (100%)
Successfully installed jekyll-paginate-1.1.0
Parsing documentation for jekyll-paginate-1.1.0
Installing ri documentation for jekyll-paginate-1.1.0
Done installing documentation for jekyll-paginate after 3 seconds
1 gem installed

被 Foxit pdf reader 占用4000端口

错误呈现

在本地使用命令

jekyll serve

出现错误,如下

jekyll serve
Configuration file: E:/GitWorkSpace/blog/_config.yml
           Source: E:/GitWorkSpace/blog
      Destination: E:/GitWorkSpace/blog/_site
Incremental build: disabled. Enable with --incremental
     Generating...
                   done in 0.547 seconds.
 Please add the following to your Gemfile to avoid polling for changes:
   gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'E:/GitWorkSpace/blog'
Configuration file: E:/GitWorkSpace/blog/_config.yml
jekyll 3.1.1 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

网上查阅后,这篇博文解决了我的问题。谁占了我的端口 for Windows –By Liu Xia, ThoughtWorks Senior Consultant. .NET Expert

上述报错主要原因是,jekyll 启动使用的4000端口被福昕pdf阅读器的自动更新进程占用了,关掉这个进程,jekyll在本地调试启动服务时就没有问题了。

解决方法

简单的解决方法是:

输入命令,查看各端口被占用情况

netstat -ano

找到4000端口被占用的PID

我的结果如下:

协议  本地地址          外部地址          状态           PID
TCP  0.0.0.0:80        0.0.0.0:0         LISTENING     4
TCP  0.0.0.0:135       0.0.0.0:0         LISTENING     836
TCP  0.0.0.0:445       0.0.0.0:0         LISTENING     4
TCP  0.0.0.0:1801      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2103      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2105      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2107      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:3306      0.0.0.0:0         LISTENING     2404
TCP  0.0.0.0:3389      0.0.0.0:0         LISTENING     1172
TCP  0.0.0.0:49664     0.0.0.0:0         LISTENING     584
TCP  0.0.0.0:49665     0.0.0.0:0         LISTENING     1072
TCP  0.0.0.0:49666     0.0.0.0:0         LISTENING     460
TCP  0.0.0.0:49667     0.0.0.0:0         LISTENING     1000
TCP  0.0.0.0:49670     0.0.0.0:0         LISTENING     696
TCP  0.0.0.0:49678     0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:49692     0.0.0.0:0         LISTENING     688
TCP  127.0.0.1:4000    0.0.0.0:0         LISTENING     2476
TCP  127.0.0.1:4000    127.0.0.1:55160   ESTABLISHED   2476
TCP  127.0.0.1:4012    0.0.0.0:0         LISTENING     12724

可以看到4000端口的PID是2476。下面查看是什么进程,命令行中输入:

tasklist /svc /FI "PID eq 2476"

得到结果:

映像名称                       PID 服务
========================= ======== ============================================
FoxitProtect.exe              2476 FxService

可以看到正是福昕阅读器。下面关掉这个服务就好了。在 win10 中进入任务管理器,选择服务选项卡,关闭这个服务就好了,如下图:

当然也可以在启动jekyll服务的时候指定端口号,如下:

jekyll serve --port 3000

这样在浏览器中输入 http://localhost:3000/ 就可以访问了。

还可以在配置文件_config.yml中添加端口号设置(参考官网文档-Serve Command OptionsPermalink),如下:

# port
port: 1234

此时,启动jekyll服务后,访问 http://localhost:1234/ 即可


Comments