Hexo-Next 主题博客个性化配置（随缘更新）

由于本人想要建一个自己的博客，在网上狗刨后，敲定选择hexo来建站，由于比较喜欢简约风格的的，所以选择使用Next主题。

使用工具:

1.git

2.github

3.vscode

4.一个勇于探索的心

前置工作：

安装hexo

建议看袁既望的博客，已经很详细介绍了图和安装hexo博客和github pages如何使用了，这里就不再赘述

安装Next

首先，先确认你的文件夹里有以下几个东东：

_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes

然后，你就可以开始安装了，我这里使用npm进行安装：

npm config set registry https://registry.npmmirror.com
npm install hexo-theme-next

或者：

git clone https://github.com/next-theme/hexo-theme-next themes/next

请注意：如果你使用git安装的话，以下所说的node_modules/hexo-theme-next是指themes/next文件夹

复制一份主题配置文件：

打开powershell，输入以下命令：

npm:

cp node_modules/hexo-theme-next/_config.yml _config.next.yml

git:

cp themes/next/_config.yml _config.next.yml

以后说的主题配置文件就是复制下来的_config.next.yml文件了

请记住！除非要求更改node_moudle/hexo-theme-next的_config.yml文件，一律说的主题配置文件指的是_config.next.yml!!!!(血泪教训)

再补充一点，说的站点配置文件就是根目录下的_config.yml文件

接下来我们就可以搞事情了

配置主题：

修改站点配置文件，找到如下代码：

theme: landscape

将lanscape改为next即可

修改语言：

修改主题配置文件，找到如下代码：

author:
language:
timezone:

在language后面加上zh-CN

分类页面：

打开主题配置文件，找到 menu 字样：

将你想要加上的界面前的#删除，比如:

  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  commonweal: /404/ || fa fa-heartbeat

不知为什么，弄好这一步后，要运行几行命令

hexo new page "删除#号后的单词"

例如：

hexo new page "about"

找到source目录下的about文件夹（你当时填的是哪个单词就要打开那个文件夹）

将index.md中的内容加上一行(在两个-------------------的中间):

type: about

隐藏底部powered by/强力驱动

打开/node_modules/hexo-theme-next/layout/_partials/footer.njk文件

找到：

{%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }}
  </div>
{%- endif %}

将这段代码首尾分别加上<!--和-->,或者直接删除

文章添加阴影

打开node_modules/hexo-theme-next/source/css/_common/components/index.styl文件

将

.rtl {
  &.post-body {
    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
      direction: rtl;
      font-family: UKIJ Ekran;
    }
  }

  &.post-title {
    font-family: UKIJ Ekran;
  }
}

.post-button {
  margin-top: 40px;
  text-align: center;
}

.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block{
      visibility: hidden;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 1);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, 1);  
    }
    .pagination, .comments {
      visibility: hidden;
    }
  }

  if (hexo-config('motion.transition.post_header')) {
    .post-header {
      visibility: hidden;
    }
  }

  if (hexo-config('motion.transition.post_body')) {
    .post-body {
      visibility: hidden;
    }
  }

  if (hexo-config('motion.transition.coll_header')) {
    .collection-header {
      visibility: hidden;
    }
  }
}

添加到原来那几个@什么东西的前面就行了

对了，你还可以看看这位人的博客：传送门，也介绍了另一种能添加阴影的方法，但我纯粹是想搞高大上（嘻嘻）

显示当前浏览进度

打开主题配置文件，找到"reading_progress"字样

reading_progress:
  enable: false
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 3px

把enable:false改为true

效果：