Hexo博客增加导航页

编程语言 2021-10-08 14:37:31 阅读次数: 0

Hexo博客可以借助GitHub Pages快速搭建，拥有我们自己的博客空间，可以将平时碰到的问题和解决思路、以及最近的学习内容和状态记录下来。最近在使用一些功能网站时，总是将常用到的网站加入浏览器标签，便思考是否可以将网站加入到我们的博客中，不仅提升了学习效率，还减少了浏览器标签、增加了界面的简洁性。

1. 切换博客主题

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

1.1 查看Hexo当前的主题

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

image-20211002223930692

1.2 切换到matery主题

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

  1. 首先下载matery主题项目文件，项目地址

  2. 将下载的hexo-theme-matery项目文件放到hexo博客项目的hexo/themes文件夹下

  3. 再次打开hexo的全局配置文件，blog/_config.yml文件

  4. 全局搜索theme找到主题配置选项，将当前主题设置为hexo-theme-matery

    • 注意theme配置项的值要和本地主题文件夹的名字一致

      image-20211002225143210

  5. 设置完成后，使用hexo clean && hexo g && hexo s命令重新部署执行博客项目，并在本地http://localhost:4000/查看新的主题是否生效。

2. 添加导航功能

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

2.1 新建导航页面

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

image-20211002232707021

2.2 添加导航栏页面

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

image-20210703181939759

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

image-20210703174641583

2.3 添加对应中文名称

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

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

  1. hexo博客项目中的全局配置：打开blog/_config.yml文件搜索language，找到整个站点的语言设置，设置language值为zh-CN，默认为en。

    image-20211003162902420

  2. 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", "导航");
%>
复制代码

  3. 配置完成后，重新部署博客项目，可以预览当前功能栏已经显示为中文名称。

    image-20210703181954296

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 () { $(this).css('height', 'auto') }, function () { $(this).css('height', '40px') }); 
	$('.Select-box-2 ul').hover(function () { $(this).css('height', 'auto') }, function () { $(this).css('height','46px')});
	$('.Select-box li').click(function () { 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } 
        if (_tihs == 'zhihu_s') { _tihs = 'https://www.zhihu.com/search'; _name = 'q'; } 
        if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } 
        if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw').attr('name', _name); 
        $('.Select-box ul').css('height', '40px') 
    }); 
	$('.Select-box-2 li').click(function () { 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } 
        if (_tihs == 'zhihu_s') { _tihs = 'https://www.zhihu.com/search'; _name = 'q'; } 
        if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } 
        if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw-2').attr('name', _name); 
        $('.Select-box-2 ul').css('height', '48px') 
    });

复制代码
  • 页面样式部分
<style>
    ...
</style>
复制代码
  • 页面背景图片轮换
<% if (theme.banner.enable) { 
    %> 
        <script> 
        	Switch banner image every day. $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)'); 
    	</script> 
    <% 
  } else { %>
        <script> 
      		$('.bg-cover').css('background-image', 'url(/medias/banner/0.jpg)');				</script>
  <% } 
%>
复制代码

2.4 重新部署

导航页配置完成后，在本地git终端中使用命令hexo clean && hexo g && hexo s重新部署本地hexo项目，部署完成后在本地http://localhost:4000/navigate/查看导航页面效果。

导航页显示成功后，使用命令hexo d将本地修改部署到远程，并通过github pages页面进行访问查看导航页效果。

image-20211003220836889

3. 总结

本意是想要在hexo博客中增加一个导航页面来管理常用网址，以免去浏览器中臃肿的标签，在网上查询并学习了文章方法，并作记录。

  1. 当前导航功能针对hexo的matery主题，其他主题文件格式不一样暂不可用
  2. 导航页的配置参考其他大佬的一些文章，仅做了一些搜索源、网址源的修改，记录学习过程

猜你喜欢

转载自juejin.im/post/7014846148141645855
今日推荐
周排行
(BIND最佳实践)Linux运维最佳实践
makefile ifeq之坑: 1. syntax error near unexpected token 2. *** missing separator. Stop.
easyui datagrid操作栏内置图片按钮
SQLyog连接MySQL时出现的2058错误解决方法
linux音频开发
hashcode方法 简析
SpringBoot中使用Transaction注解遇到的坑
逆战-CSS中子元素在父元素中的4种水平垂直居中方法
Expression.Blend.4 Chapter 图片和视频的使用
springMVC返回void值
每日归档
更多
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)
2024-09-08(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022