搭建Github博客：Next主題個性化修改

修改Next主題下面的文件（路徑：D:\CODE\blog\themes\next），達到個性化修改的效果

修改方式：最好在Next主題預留的類似custom文件里面添加自定義代碼

前言

主題配置文件路徑：D:\CODE\blog\themes\next\_config.yml

站點配置文件路徑：D:\CODE\blog\_config.yml

• hexo配置：https://hexo.io/zh-cn/docs/configuration
• Next主題主題設定：http://theme-next.iissnan.com/getting-started.html#theme-settings
• Next主題主題配置：http://theme-next.iissnan.com/theme-settings.html
• Next主題第三方服務集成：http://theme-next.iissnan.com/third-party-services.html#comment-system
• Next主題常見問題：http://theme-next.iissnan.com/faqs.html

需要了解的

瀏覽器按 F12 即可，建議用 Google Chrome 瀏覽器調試。

Next主題樣式文件 :D:\CODE\blog\themes\next\source\css

修改文件后直接保存，刷新頁面即可查看效果。

如何調試手機樣式頁面，請參照下圖

Next主題常見問題

內容來源：常見問題 - NexT 使用文檔

如何設置「閱讀全文」

在首頁顯示一篇文章的部分內容，並提供一個鏈接跳轉到全文頁面是一個常見的需求。 NexT 提供三種方式來控制文章在首頁的顯示方式。 也就是說，在首頁顯示文章的摘錄並顯示 閱讀全文 按鈕，可以通過以下方法：

在文章中使用 <!-- more --> 手動進行截斷，Hexo 提供的方式 「推薦」

如何更改內容區域的寬度

NexT 對於內容的寬度的設定如下：

• 700px，當屏幕寬度 < 1600px
• 900px，當屏幕寬度 >= 1600px
• 移動設備下，寬度自適應

如果你需要修改內容的寬度，同樣需要編輯樣式文件。 編輯主題的 source/css/_variables/custom.styl 文件，新增變量：

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 后的寬度
$content-desktop-large = 900px

此方法不適用於 Pisces Scheme，關於如何修改 Pisces Scheme 的寬度請參看 這個 Issue

這個問題比較麻煩，稍后研究

樣式修改

單行代碼顏色

修改\themes\next\source\css\ _variables\custom.styl文件，加入自定義顏色：

// 文章``代碼塊的自定義樣式
$code-foreground                = #dd0055  // 用``圍出的單行代碼字體顏色
$code-background                = #eee  // 用``圍出的單行代碼背景顏色

修改themes\next\source\css\_custom\custom.styl文件，加入自定義樣式

// 文章``代碼塊的自定義樣式
code {
    margin: 0px 2px;
    border: 1px solid #999;
}

修改鏈接文字樣式

修改themes\next\source\css\_custom\custom.styl文件，加入自定義樣式

// 文章內鏈接文本樣式
.post-body a {
	// 鏈接文字顏色
	color: #0593d3;
	// 去掉下划線：下划線效果是用下邊框實現的，去掉即可
	border-bottom: none;

	&:hover {
		// 鼠標懸停時鏈接文字顏色
		color: #fc6423; 
	}
}

標簽樣式

修改文章底部#號標簽,改為圖標

修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，將 # 換成<i class="fa fa-tag"></i>

文章末尾追加版權信息

修改主題配置文件,搜索creative_commons，將post的值改為true

# Creative Commons 4.0 International License.
# https://creativecommons.org/share-your-work/licensing-types-examples
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true

添加背景圖片

通過 jquery-backstretch，具體操作呢，編輯文件/themes/next/layout/_layout.swig，加入到文件最后面前面即可。

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
+  <script>
+  $("body").backstretch("https://背景圖.jpg");
+  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
  <script>
    // 背景圖片
    // 線條鯨魚：https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-708825.jpg
    // 雲：https://i.loli.net/2018/11/02/5bdb2a8dd9eef.jpg
    $("body").backstretch("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-708825.jpg");
  </script>

點擊出現愛心效果

在/themes/next/source/js/love.js下新建文件love.js，接着把該鏈接下的代碼拷貝粘貼到love.js文件中

!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);

在\themes\next\layout\_layout.swig文件末尾添加：

+ <!-- 頁面點擊小紅心 -->
+ <script type="text/javascript" src="/blog/js/src/love.js"></script>
</body>
</html>

增加內容分享服務

分享功能需要單獨安裝一個庫文件“分享按鈕”，輸入以下命令：

cd D:\CODE\bolg #D:\CODE\bolg是我的文件夾
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

修改themes/next/_config.yml主題配置文件，搜索關鍵字needmoreshare2，找到如下代碼並做以下修改：

# 文章分享功能
needmoreshare2:
  enable: true
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

效果

增加站內文章搜索功能

安裝插件hexo-generator-searchdb，執行以下命令：

npm install hexo-generator-searchdb --save

修改hexo/_config.yml站點配置文件,末尾新增以下代碼:

search:
  path: search.xml
  field: post
  format: html
  limit: 100

修改themes/next/_config.yml主題配置文件，搜索關鍵字local_search找到如下代碼，將enable設置為true，如下：

local_search:
  enable: true

記錄

樣式1

D:\CODE\blog\themes\next\source\css\_custom\custom.styl內容

// Custom styles.
// 文章``代碼內文字的樣式
code {
	margin: 0px 2px;
	border: 1px solid #999;
}

// 文章鏈接文本的樣式
.post-body a, .post-copyright a {
	color: #0593d3; 
	&:hover {
		color: #fc6423;
	}
}
// 去掉鏈接的下划線：即去掉下邊框
a {
	border-bottom: none;
}

樣式2

D:\CODE\blog\themes\next\source\css\_variables\custom.styl內容

// 文章``代碼塊的自定義樣式
$code-foreground                = #dd0055  // 用``圍出的單行代碼字體顏色
$code-background                = #eee  // 用``圍出的單行代碼背景顏色

模板

D:\CODE\blog\themes\next\layout\_layout.swig最后</body>前增加

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
  <script>
    // 背景圖片
    $("body").backstretch("https://wx3.sinaimg.cn/large/ad34f2d1ly1fzearwbdzkj22y41o07wk.jpg");
  </script>

  <!-- 頁面點擊小紅心 -->
  <script type="text/javascript" src="https://blog-static.cnblogs.com/files/ioufev/love.js"></script>

</body>
</html>