Hexo博客中增加导航页面

1. 切换博客主题

在学习的过程中，发现Hexo博客当前的landscape主题扩展性不够，没有找到添加导航页的方法；与之相比，matery主题在众多大佬的不断调教下，扩展了更丰富的功能。

1.1 查看Hexo当前的主题

在本地设置好hexo博客项目后，进入博客项目下blog文件夹找到_config.yml文件，这就是hexo的全局配置文件，使用编辑器打开，搜索theme关键字，则可以看到项目的当前主题设置。

1.2 切换到matery主题

Hexo默认使用的主题是landscape，切换hexo主题到matery主题流程为：

首先下载matery主题项目文件，项目地址
将下载的hexo-theme-matery项目文件放到hexo博客项目的hexo/themes文件夹下
再次打开hexo的全局配置文件，blog/_config.yml文件
全局搜索theme找到主题配置选项，将当前主题设置为hexo-theme-matery
- 注意theme配置项的值要和本地主题文件夹的名字一致
设置完成后，使用hexo clean && hexo g && hexo s命令重新部署执行博客项目，并在本地http://localhost:4000/查看新的主题是否生效。

2. 添加导航页

现在博客的主题已经是matery了，就可以在此基础上添加一个导航页来收藏我们常用的网址了。

2.1 新建导航页面

首先需要在项目中增加一个导航页，进入到项目文件夹下，使用git终端执行命令：hexo new page 'navigate' ，为博客创建一个导航页面。此时在blog/source文件夹下可以看到出现一个navigate文件夹，其中含有一个index.md文件。

2.2 添加导航栏页面

创建了导航相关的文件夹和文件，还需要在博客网站功能菜单栏中展示出来，而展示菜单是要在具体的主题中进行配置的。在matery主题对应的文件夹下找到配置文件：\theme\hexo-theme-matery\_config.yml ，搜索menu配置项，在最后添加一个导航栏页面。图标可以指定本地资源或者在fontawesome网站引用。

配置完成后，再此执行hexo clean && hexo g && hexo s命令重新部署本地博客项目，查看配置是否生效，如下图所示则已经生效。

2.3 添加对应中文名称

在配置文件中的菜单中添加了navigate属性并部署后，页面中已经生效，但是显示的是英文navigate，因此需要将英文显示翻译为中文显示。

博客网站的语言设置分为Hexo项目全局语言设置和matery主题语言设置：

hexo博客项目中的全局配置：打开blog/_config.yml文件搜索language，找到整个站点的语言设置，设置language值为zh-CN，默认为en。
matery主题配置：
- 主题语言文件，进入hexo-theme-matery/languages文件夹，其中文件即是不同语言配置。其中default.yml是默认英文配置；zh-CN是对应简体中文配置；zh-HK是繁体中文配置。因为我们新增了navigate功能页，因此需要在相应的文件总添加navigate对应显示的英文、简体中文、繁体中文。
```
#default.yml
navigate: Navigate

#zh-CN.yml
navigate: 导航

#zh-HK.yml
navigate: 導航
```
- 在hexo-theme-matery/layout/_partial文件夹下，找到mobile-nav.ejs文件和navigation.ejs文件，在其中找到菜单相关集合的配置，添加navigate和对应的中文名称。
```
<%
var menuMap = new Map();
menuMap.set("Index", "首页");
menuMap.set("Tags", "标签");
menuMap.set("Categories", "分类");
menuMap.set("Archives", "归档");
menuMap.set("About", "关于");
menuMap.set("Contact", "留言板");
menuMap.set("Friends", "友情链接");
menuMap.set("Navigate", "导航");
%>
```
配置完成后，重新部署博客项目，可以预览当前功能栏已经显示为中文名称。

2.3 添加navigate.ejs配置页面信息

导航栏配置完成，接下来就是要在点击导航功能栏的时候显示我们自定义的导航页面。

在\themes\matery\layout\ 文件夹中新建navigate.ejs文件，自定义的导航页的信息和样式都在该文件中设置。

页面搜索框部分

<!-- 搜索框 -->
<div class="baidu baidu-2 large-screen">
    <form name="f" action="https://www.baidu.com/" target="_blank">
        <div id="Select-2">
            <div class="Select-box-2" id="baidu">
                <ul style="height: 46px;">
                    <li class="this_s">百 · 度</li>
                    <li class="bing_s">必 · 应</li>
                    <li class="google_s">谷 · 歌</li>
                    <li class="baidu_s">百 · 度</li>
                    <li class="zhihu_s">知 · 乎</li>
                </ul>
            </div> 
            <input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text">
        </div>
        <div class="qingkong" id="qingkong" title="清 · 空" style="display: none;">x</div> 
        <input value="搜 · 索" id="su-2" type="submit"> 
        <ul class="keylist"></ul>
    </form>
</div>

页面导航网址部分

<div class="row tags-posts ">
    <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
        <div class="card">
            <div class="jj-list-tit">精典 · 导航</div>
                <ul class="jj-list-con">
                    <li><a href="https://tophub.today/" class="link-3" target="_blank">今日热榜</a></li>
                    <li><a href="https://search.chongbuluo.com/" class="link-3" target="_blank">虫部落快搜</a></li>
                    <li><a href="http://ilxdh.com/" class="link-3" target="_blank">龙轩导航</a></li>
                    <li><a href="https://adzhp.cn/" class="link-3" target="_blank">爱达杂货铺</a></li>
                    <li><a href="https://fuliba123.net/" class="link-3" target="_blank">福利吧导航</a></li>
                    <li><a href="http://cxy521.com/" class="link-3" target="_blank">程序员导航</a> </li>
                    <li><a href="http://www.6453.net/" class="link-3" target="_blank">龙猫学术导航</a> </li>
                    <li><a href="https://ac.scmor.com/" class="link-3" target="_blank">谷歌镜像</a></li>
                    <li><a href="http://www.pansoso.com/" class="link-3" target="_blank">网盘搜索</a></li>
                   </ul>
        </div>
    </div>
    ...
</div>

搜索引擎配置部分

/*选择搜索引擎*/ 
<script> 
    $('.Select-box ul').hover(function () &#123; $(this).css('height', 'auto') &#125;, function () &#123; $(this).css('height', '40px') &#125;); 
    $('.Select-box-2 ul').hover(function () &#123; $(this).css('height', 'auto') &#125;, function () &#123; $(this).css('height','46px')&#125;);
    $('.Select-box li').click(function () &#123; 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') &#123; _tihs = 'https://www.baidu.com/s'; _name = 'wd'; &#125; 
        if (_tihs == 'zhihu_s') &#123; _tihs = 'https://www.zhihu.com/search'; _name = 'q'; &#125; 
        if (_tihs == 'google_s') &#123; _tihs = 'https://www.google.com/search'; _name = 'q'; &#125; 
        if (_tihs == 'bing_s') &#123; _tihs = 'https://www.bing.com/search'; _name = 'q'; &#125; 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw').attr('name', _name); 
        $('.Select-box ul').css('height', '40px') 
    &#125;); 
    $('.Select-box-2 li').click(function () &#123; 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') &#123; _tihs = 'https://www.baidu.com/s'; _name = 'wd'; &#125; 
        if (_tihs == 'zhihu_s') &#123; _tihs = 'https://www.zhihu.com/search'; _name = 'q'; &#125; 
        if (_tihs == 'google_s') &#123; _tihs = 'https://www.google.com/search'; _name = 'q'; &#125; 
        if (_tihs == 'bing_s') &#123; _tihs = 'https://www.bing.com/search'; _name = 'q'; &#125; 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw-2').attr('name', _name); 
        $('.Select-box-2 ul').css('height', '48px') 
    &#125;);

页面样式部分

<style>
    ...
</style>

页面背景图片轮换

<% if (theme.banner.enable) &#123; 
    %> 
        <script> 
            Switch banner image every day. $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)'); 
        </script> 
    <% 
  &#125; else &#123; %>
        <script> 
              $('.bg-cover').css('background-image', 'url(/medias/banner/0.jpg)');                </script>
  <% &#125; 
%>