前言

初衷

Hexo是一个基于Node.js的静态网页生成器，我将它与Github Page搭配使用，创建我的个人博客网站。
但是相信大家绝对不会只用原版简陋的Landscape主题吧……
于是，我结合大佬们的建议、参阅了无数Hexo个人网站后 决定用NexT主题。我选的是Gemini:-)

个性化之路

虽说NexT很不错，但是依然达不到预期的效果。

• 单调的灰白背景
• 想要单击效果
• 没有评论功能
• ……

正文

方法1（失败）

单调的灰白背景谁也不喜欢。谁都想自己找张好看的图片放上去。
本着“Baidu is your friend”的原则，我找到了好多方法。
不过
这些教程清一色的让我们修改themes\next\source\css\ _custom\custom.styl这个文件。

“这个是Next故意留给用户自己个性化定制一些样式的文件”

我 怎 么 没 有 这 东 西
这是因为版本更新NexT改掉了一些文件

于是我自己偷偷新建了一个themes\next\source\css\ _custom\custom.styl……
仍 然 不 好 使（废话
另外，在themes\next\_config.yml中有一个方法

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

不过在经试验后，发现这一方法不能只用一个，优先级似乎高于main.styl
所以如果只添加了一个，网页会找不到其他部分的css并报错。

方法2

以这次报错为契机，我找到了渲染出的main.css与源文件main.styl进行比较。
我发现main.styl中以@import "\.styl";的形式引用themes\next\source\css中的.styl文件，在渲染时构成main.css。
然后我在main.styl的末尾发现了这个东西：

// Custom Layer
// --------------------------------------------------
for $inject_style in hexo-config('injects.style')
  @import $inject_style;

这意味着你可以在这里加入自己的个性化文件，并且与预置的文件一起渲染成最终网站所使用的main.css。
于是我加入了@import "_custom/styles.styl"一行
将想要使用的背景图片放在themes\next\source\images文件夹中
创建themes\next\source\css\ _custom\style.styl文件

body { 
background: url(/images/图片名);
background-repeat: no-repeat;// 设定背景图片非重复填充
background-attachment: fixed;// 设置背景图片不随页面滚动
background-position: 50% 50%;// 设置背景图片位置
background-size: cover//
}

最终成功！

后记

本文是リテンセキＰ的第一次博客写作。作者我仍是一名初中学生，所以本文可能瑕疵颇多，仍需改进；
另外，本文成文匆忙，作者未配插图。
希望大家多多谅解:-)