Github Page+Hexo搭建炫酷个人博客（主题优化基础篇）

上一篇已经把博客搭建好了，这一篇来进行博客的主题优化讲解。

文章目录

配置博客信息
安装主题
配置主题

Scheme
设置菜单
设置侧栏
设置头像（旋转效果）
设置RSS
新建页面
设置代码高亮主题
侧边栏社交链接
设置「背景动画」

优化主题

底部显示建站时间和图标修改
设置网站logo
左上角或右上角的Github样式
隐藏网页底部powered By Hexo
主页文章添加阴影效果
修改文章内链接文本样式
文章末尾统一添加“本文结束”标记
自定义鼠标样式
修改``代码块自定义样式
网站底部字数统计
在文章底部增加版权信息
博客添加站内搜索
如何设置页面文章的篇数？

配置博客信息

在 _config.yml 中修改大部分的配置。
title：网站标题
subtitle：网站副标题
description：网站描述
author：您的名字
language：网站使用的语言
timezone：网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。
在这里插入图片描述

安装主题

可以到hexo官网选择自己心仪的主题，我选择下载的是next主题。在这里插入图片描述
在自己的博客文件夹下打开git bash，输入以下命令

git clone https://github.com/theme-next/hexo-theme-next.git
但是要把文件保存到文件夹themes/next下，所以应该如图所示，在地址后面加themes/next。

之后的更新可以通过 git pull 来快速更新，而不用再次下载压缩包替换。

下载成功可以看到文件夹下有了next文件。
在这里插入图片描述
打开_config.yml文件，修改如下

然后输入hexo g, hexo s
在浏览器输入http://localhost:4000 看看效果已经更改成功辣！

配置主题

Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist Muse 的紧凑版本，整洁有序的单栏外观
Pisces 双栏 Scheme，小家碧玉似的清新
Scheme 的切换通过更改主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

设定菜单内容，对应的字段是 menu。菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。
设定菜单项的图标，对应的字段是 menu_icons。此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。
官网的解释是上面这样的，版本更新的原因吗？
||后面就是图标的名称。

设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。可以通过修改主题配置文件中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置，其二是侧栏显示的时机。

设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：
left - 靠左放置
right - 靠右放置
目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。
sidebar:
position: left
设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：
post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除
sidebar:
display: post

设置头像（旋转效果）

将头像图片放入
编辑主题配置文件，修改字段 avatar，值设置成头像的链接地址。将头像放置主题目录下的 source/images/ （新建images 目录若不存在），名字就叫avatar把。

设置旋转效果：

打开themes\next\source\css_common\components\sidebar\sidebar-author.styl,
添加以下注释代码
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 /
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/ 鼠标经过头像旋转时间 /
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/ 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;/
/ 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

设置RSS

在博客的文件目录下启动git bash并安装插件，执行以下命令。

$ npm install --save hexo-generator-feed

修改站点配置文件，在最后添加以下代码
在这里插入图片描述

修改主题配置文件如下：
在这里插入图片描述

新建页面

除了Next自动创建的两个页面，其它页面需要自己创建，执行以下代码：
在这里插入图片描述
在tags下的index.md新增type属性

剩下的categories，about页面也是同样的做法

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties。
在这里插入图片描述
在主题文件中修改自己想要的高亮主题

侧边栏社交链接

社交链接在主题配置文件中的social片段下：
在这里插入图片描述
地址换成自己的就好
设定链接的图标，其格式是: Font Awesome 图标名称，匹配键与上一步所配置的链接的显示文本相同（大小写严格匹配），图标名称是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

设置「背景动画」

编辑主题配置文件，我下的这个next版本已经支持四种动画了，Canvas-nest，three_waves，canvas_lines，canvas_sphere根据自己的需求设置值为 true 或者 false 即可，还有颜色透明度那些参数可以自己修改。
在这里插入图片描述

但是没有用。。。。
解决方案是：先进到themes/next文件夹下，执行以下命令，把相应的js文件clone下来才能生效鸭- -
在这里插入图片描述

优化主题

底部显示建站时间和图标修改

在这里插入图片描述
since就是建站时间，可以去掉#自己进行修改。name后面对应就是图标的名字，我改为了heart看起来有爱一点鸭O(∩_∩)O。

设置网站logo

先把自己的图片放置在文件下
在这里插入图片描述
打开主题配置文件_config.yml ,找到字段favicon，修改图片名。

重新运行，已经改成自己的辣。

左上角或右上角的Github样式

到http://tholman.com/github-corners/挑选自己喜欢的样式，复制代码。并将代码放在指定位置下，如图所示。在这里插入图片描述

隐藏网页底部powered By Hexo

打开themes/next/layout/_partials/footer.swig,直接隐藏以下代码即可,
我到主题配置文件下的footer字段修改了两个值便可以隐藏了。

主页文章添加阴影效果

在这里插入图片描述
找到此文件添加以下代码

// Custom styles.
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

修改文章内链接文本样式

找到以下文件，
在这里插入图片描述
加入以下代码：

.post-body p a{
color: #64CEAA; //原始链接颜色
border-bottom: none;
border-bottom: 1px solid #64CEAA;//底部分割线颜色
&:hover {
color: #fc6423; //鼠标经过颜色
border-bottom: none;
border-bottom: 1px solid #fc6423; //底部分割线颜色
}
}
可以自己修改想要的颜色。

文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;"本文结束<i class="fa fa-car"></i>感谢您的阅读</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后，添加以下代码

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

添加位置如图所示
在这里插入图片描述

自定义鼠标样式

打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码

// 鼠标样式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

修改``代码块自定义样式

打开\themes\next\source\css_custom\custom.styl,向里面加入：(颜色可以自己定义)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

网站底部字数统计

切换到根目录下，运行以下代码

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

在文章底部增加版权信息

在目录 next/layout/_macro/下添加 my-copyright.swig：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
	  $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	    });
    });  
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig
添加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

添加位置为：
在这里插入图片描述
修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import “my-post-copyright”

如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似:
在这里插入图片描述

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

博客添加站内搜索

先在根目录输入以下代码下载下载两个插件：

npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

然后进入站点配置文件，添加以下代码

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

进入主题配置文件找到local_search字段enable改为true
在这里插入图片描述

如何设置页面文章的篇数？

在 Hexo 里可以为首页和归档页面设置不同的文章篇数，但可能需要安装 Hexo 插件。详细步骤如下。

安装插件

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

等待扩展全部安装完成后，在站点配置文章中，设定如下选项：

index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

 per_page 即文章的数量。

接下来推荐一波大神们的教程

https://blog.csdn.net/qq_33699981/article/details/72716951
https://www.jianshu.com/p/043a4ae7684d
https://www.jianshu.com/p/9f0e90cc32c2