Github+Hexo博客搭建小白教程（四）

点击上方“果果小师弟”，选择“置顶/星标公众号”

干货福利，第一时间送达！

六、其他一些DIY(可选)

主题DIY会涉及到js文件和css文件等的修改，个人建议新增的js文件放在themes/matery/layout/layout.ejs这个文件下，这样会稍微加快博客访问的速度。不想花钱最好的方式是使用cdn.jsdeliver。以后会说到。

6.1. 修改导航栏颜色以及透明效果

打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：

1.bg-color { 
2  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值 
3  opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改 }

6.2. 鼠标点击文字特效

实现方法，引入js文件，在主题文件下的/source/js/下新建click_show_text.js，其代码如下：

1var a_idx = 0;
2jQuery(document).ready(function ($) {
3    $("body").click(function (e) {
4        var a = new Array
5            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
6        var $i = $("<span/>").text(a[a_idx]);
7        a_idx = (a_idx + 1) % a.length;
8        var x = e.pageX,
9            y = e.pageY;
10        $i.css({
11            "z-index": 5,
12            "top": y - 20,
13            "left": x,
14            "position": "absolute",
15            "font-weight": "bold",
16            "color": "#FF0000"
17        });
18        $("body").append($i);
19        $i.animate({
20            "top": y - 180,
21            "opacity": 0
22        },
23            3000,
24            function () {
25                $i.remove();
26            });
27    });
28    setTimeout('delay()', 2000);
29});
30
31
32function delay() {
33    $(".buryit").removeAttr("onclick");
34}

6.3. 添加天气小插件

首先去中国天气官网：https://cj.weather.com.cn/plugin/pc，配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到themes/matery/layout/layout.ejs即可。

6.4. 豆瓣书单电影页面

1.首先在博客站点目录执行下面的命令安装豆瓣插件：

1npm install hexo-douban --save

2.紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：

1douban: 
2  user:   #这个需要修改为你个人的id
3  builtin: true 
4  book: 
5      title: '我的书单' 
6      quote: '你必须要看的书籍' 
7  movie: 
8      title: '我的影单' 
9      quote: '那些年我们一起看过的电影' 
10timeout: 10000

• user:：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。

• builtin：是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true 。

• title：该页面的标题。

• quote：写在页面开头的一段话,支持html语法。

• timeout：爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

3. 然后再主题配置文件_config.yml中添加关于此页面的菜单：(下面是我的配置)

1  媒体:
2    icon: fas fa-list
3    children:
4      - name: 电影
5        url: /movies
6        icon: fas fa-film
7      - name: 书单
8        url: /books
9        icon: fas fa-book

4.适配Matery主题：在 /themes/hexo-theme-matery/layout文件夹下面创建一个名为 douban.ejs的文件，并将下面的内容复制进去：

1<%- partial('_partial/post-cover') %>
2<style>
3    .hexo-douban-picture img {
4        width: 100%;
5    }
6</style>
7<main class="content">
8    <div id="contact" class="container chip-container">
9        <div class="card">
10            <div class="card-content" style="padding: 30px">
11                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1>
12                <%- page.content %>
13            </div>
14        </div>
15        <div class="card">
16            <div class="card-content" style="text-align: center">
17              <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3>
18            </div>
19         </div>
20        <div class="card">
21            <% if (theme.gitalk && theme.gitalk.enable) { %>
22            <%- partial('_partial/gitalk') %>
23            <% } %>
24
25
26            <% if (theme.gitment.enable) { %>
27            <%- partial('_partial/gitment') %>
28            <% } %>
29
30
31            <% if (theme.disqus.enable) { %>
32            <%- partial('_partial/disqus') %>
33            <% } %>
34
35
36            <% if (theme.livere && theme.livere.enable) { %>
37            <%- partial('_partialvere') %>
38            <% } %>
39
40
41            <% if (theme.valine && theme.valine.enable) { %>
42            <%- partial('_partialaline') %>
43            <% } %>
44        </div>
45    </div>
46</main>

5.然后在博客站点目录下的node_modules文件夹下找到hexo-douban/lib，文件夹下有三个js文件，分别为：books-generator.js 、games-generator.js 、movies-generator.js，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为以下内容：

1/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/ 
2layout: [`page`, `douban`]

6.最后就是使用并生成相应的页面，执行命令如下:

1hexo douban

需要注意的是，通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化，但是当安装了 hexo douban 之后，就不能用 hexo d 了，因为 hexo douban 跟 hexo deploy 的前缀都是 hexo d ，你以后执行的 hexo d 将不再是 Hexo 页面的生成，而是豆瓣页面的生成。以下是可选的命令参数：

1-h, --help # 帮助页面 
2-b, --books # 只生成书单页面 
3-g, --games # 只生成游戏页面 
4-m, --movies # 只生成电影页面

当站点配置文件的builtin的值为true时，生成页面的功能会嵌入到hexo g和hexo s中，在进行部署生成操作，会自动生成相应的页面。

6.5. 外链跳转插件

hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装

1## npm 安装 
2npm install hexo-external-link --save 
3## yarn 安装 
4yarn add hexo-external-link

之后再hexo博客站点根目录下添加如下配置:

1  hexo_external_link: 
2  enable: true 
3  enable_base64_encode: true 
4  url_param_name: 'u' 
5  html_file_name: 'go.html' 
6  target_blank: true 
7  link_rel: 'external nofollow noopener noreferrer' 
8  domain: 'your_domain' # 如果开启了防盗链 
9  safety_chain: true

• enable - 是否开启hexo_external_link插件 - 默认false

• enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle

• url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’

• html_file_name - 跳转到外链的页面文件路径 - 默认‘go.html’

• target_blank - 是否为外链的a标签添加target='_blank' - 默认 true

• link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’

• domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host

• safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false

6.6. 文章生成永久链接

主题默认的文章链接配置是

1   premalink: :year/:month/:day/:title

这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。

首先再根目录下执行下面的命令：

bash npm install hexo-abbrlink --save 

然后再站点配置文件下添加如下配置：

1abbrlink: 
2    alg: crc16 #算法： 
3    crc16(default) and crc32 rep: hex #进制：dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

再将站点配置文件的permalink的值修改为：

1permalink: posts/:abbrlink.html  
2# 此处可以自己设置，也可以直接使用 :/abbrlink

生成完后，原md文件的Front-matter 内会增加abbrlink字段，值为生成的ID。这个字段确保了在我们修改了Front-matter内的博客标题title或创建日期date字段之后而不会改变链接地址.

END

---

微信公众号：果果小师弟
关注可了解获取更多的免费资料;
如果你觉得文章对你有帮助，转发分享，欢迎赞赏

最后

10T资源大放送！包括但不限于：C/C++，Linux，Python，Java，PHP，人工智能，PCB、FPGA、DSP、单片机、等等！在公众号内回复「更多资源」，即可免费获取，期待你的关注！！！