利用github page和jekyll搭建個人博客網站(三):使用最熱門的 Next 主題並進行深度配置

利用github page和jekyll搭建個人博客網站(三):使用最熱門的 Next 主題並進行深度配置

前言

自己一直想做一個個人專屬的博客網站,所以之前使用 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章