优化个人github博客

---

前言

• 本篇文章是在已经搭建好gitpage+hexo的博客的前提下

• 不懂怎么搭建的可以参考上一篇<搭建个人博客>

• 大致效果如我的博客所示 https://moking1997.github.io/

• 我使用的是next主题,官网有简单的教程

• 最终效果如下：
  

下载next主题

• 在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

cd your-hexo-site git clone https://github.com/iissnan/hexo-theme-next themes/next

• 注意我这里用的是克隆版本,之后的更新可以通过 git pull来快速更新

启用主题

• 与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到theme字段，并将其值更改为 next

• 然后输入以下命令查看next主题效果

hexo clean
hexo g
hexo d

• 基本配置next官网都有教程，这里不过多讲述了

设置菜单子页

• 编辑next主题配置文件，修改以下内容：

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

• 假设要添加categories页面，先将其前的#去掉

• 再在根目录通过hexo new page "categories"创建该文件夹

• 修改index.md中的代码

---
title: All categories
date: 2014-12-22 12:39:04
type: "categories"
---

• 再在自己要分类的文章头部添加代码，如：

title: 撰写个人博客
author: Moking
tags:
  - 博客
categories:
  - 博客
date: 2018-05-27 14:22:39

效果如下:

添加背景图片

• 修改背景样式

• 修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

• url()内可以换成自己文件夹下的图片如:background:url(/images/background.jpg);
• 其中images的文件目录是在next\source下
• repeat、attachment、position就是调整图片的不重复出现、不滚动，位置等等

设置next-Pisces主题透明度

调整Pisces主题内容版块的透明度

• 在\themes\next\source\css_schemes\Pisces_layout.styl目录下，修改.content-wrap中的内容，添加opacity属性：
  

调整Pisces主题侧边栏的透明度

• 在\themes\next\source\css_schemes\Pisces_layout.styl目录下，修改.sidebar中的内容，添加opacity属性：
  

炫酷动态背景

• 打开next/layout/_layout.swig文件,在之前加上

{% if theme.canvas_nest %}

{% endif %}

• 打开next/_config.yml，添加以下代码

 #Canvas-nest
canvas_nest: true

• 在layout文件下面的_layout.swig 添加一个canvas

添加网易云音乐

• 在网易云官网搜索自己喜欢的音乐生成生成外链播放器
  
• 我放在了layout/_macro/sidebar.swig 文件下

添加Fork me on GitHub

• 去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式
• 复制代码，添加到themes\next\layout_layout.swig的body标签之内即可

hexo-wordcount实现统计功能

• wordcount可以实现字数统计，阅读时常还有总字数的统计功能

• 只需要npm install hexo-wordcount –save 就可以安装wordcount插件，

• 安装完插件之后在主题的配置文件中开启该功能就可以了

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

Hexo-Next底部logo栏更改以及注意事项

• 用Next主题搭建起来的博客，在底部会有一个的官方logo
• 解决方案:

• 1.找到 \themes\next\layout_partials\下面的footer.swig文件，打开会发现，如下图的语句
  

• 第一个框 是下面侧栏的“日期❤ XXX”
  如果想像我一样加东西，一定要在双大括号外面写。如：xxx,当然你要是想改彻底可以变量都删掉，看个人意愿。

• 第二个，是图一当中 “由Hexo驱动” 的Hexo链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把…标签这部分删除即可，留着两个单引号’’,否则会出错哦。

• 第三个框也是最后一个了，这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将…都删掉，同样中文“主题”一会处理，删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重

• 2.处理剩余的中文信息。打开\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）