前言
自己一直想做一個個人專屬的博客網站,所以之前使用 jekyll 並配合 github page 搭建了個人的博客網站,詳情參考我的博客https://blog.csdn.net/qq_36272282/article/details/87987068。
但是,我對這個 jekyll 搭建起來的個人博客網站並不是很滿意,一個是我對這個 jekyll 主題並不是很中意,自己找了很久都找不到中意的 jekyll 主題,第二個是這個主題的功能不是很豐富,沒有一些自己想要的功能,所以我決定更換主題。恰好,我找到了一個非常熱門並且功能豐富自己又中意的主題:Jekyll-Next-Theme,github 地址爲 https://github.com/Simpleyyt/jekyll-theme-next。
本文只總結一些配置過程中容易出錯的關鍵點,主要配置教程參考官方文檔。
安裝 NexT
首先確保已安裝Ruby 2.1.0
或更高版本:
ruby --version
然後安裝 Bundler:
gem install bundler
下載 NexT 主題到本地:
git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next
以下是與官方教程不一樣的地方。
首先查看 Gemfile.lock 文件末尾,如下:
PLATFORMS
ruby
x64-mingw32
DEPENDENCIES
github-pages
BUNDLED WITH
1.17.1
BUNDLED WITH 指明瞭要求 bundler 版本爲 1.17.1,所以我們應該先安裝對應版本的 bundler:
gem install bundler -v '1.17.1'
然後安裝依賴:
bundle install
然後,我們要先刪除本項目的隱藏文件 .git 文件,然後再自己的 github 賬戶新建一個名爲 jekyll-theme-next
的倉庫(名字自取,如果配合 github page,就取名爲 xxx.github.io
),然後把本項目 push 到自己 github 下的新建的倉庫,然後在 _config.yml 文件末尾添加以下代碼:
# 倉庫名
repository: watchcat2k/jekyll-theme-next
這就完成了安裝,以命令運行即可在 http://127.0.0.1:4000
處訪問:
bundle exec jekyll server
運行後,命令行出現了一些提示,如下圖:
根據命令行輸出提示,我們把下列代碼添加到Gemfile
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
然後要注意的是,運行服務的命令不要添加 --incremental
參數,不然無法預覽新的 post:
效果
最終運行結果圖如下:
深度配置
該主題的配置詳情參考官方文檔,這裏只對一些關鍵點進行說明。
編碼問題
我在 window 本地環境下運行 jekyll 服務器進行網站的預覽時,有出現博客無法找到、無法打開預覽的情況,原因是這些博客的文件名、分類名或標籤名使用了中文,jekyll 無法正常解析。要解決這個問題,就要找到 window 環境下的 ruby 安裝路徑,如下:
C:\Ruby25-x64\lib\ruby\2.5.0\webrick\httpservlet
找到該路徑下的 filehandler.rb
文件,修改下面兩處地方(有+的一行爲添加部分):
path = req.path_info.dup.force_encoding(Encoding.find("filesystem"))
+ path.force_encoding("UTF-8") # 加入編碼
if trailing_pathsep?(req.path_info)
break if base == "/"
+ base.force_encoding("UTF-8") #加入編碼
break unless File.directory?(File.expand_path(res.filename + base))
開啓打賞功能
Jekyll-Next-Theme 主題的 _config.yml 配置文件默認是沒有關於打賞功能的字段的,我們自己添加相應字段後便可開啓打賞功能。所以在配置文件添加以下代碼:
reward_comment: 堅持原創技術分享,您的支持將鼓勵我繼續創作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image
修改頁面寬度
我使用的主題是 scheme: Pisces
,這個主題有個問題就是頁面太窄了,在瀏覽器上看文章和代碼比較喫力,所以推薦修改一下頁面寬度。
首先找到 Pisces
的佈局文件,它的路徑爲 xxx.github.io/_sass/_schemes/Pisces/_layout.scss
,然後修改一下三處地方(有註釋的地方就是要修改的地方):
.header {
position: relative;
margin: 0 auto;
//width: $main-desktop;
width: 80%;
@include tablet() {
width: auto;
}
@include mobile() {
width: auto;
}
}
.container .main-inner {
//width: $main-desktop;
width: 80%;
@include tablet() {
width: auto;
}
@include mobile() {
width: auto;
}
}
.content-wrap {
float: right;
box-sizing: border-box;
padding: $content-desktop-padding;
//width: $content-desktop;
width: calc(100% - 260px);
background: white;
min-height: 700px;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
@include tablet() {
width: 100%;
padding: 20px;
border-radius: initial;
}
@include mobile() {
width: 100%;
padding: 20px;
min-height: auto;
border-radius: initial;
}
}
至於其它兩個主題的頁面寬度修改方式,參考官方文檔http://theme-next.simpleyyt.com/faqs.html#custom-content-width