搭建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>