【Hexo】hexo 博客添加导航功能

hexo 博客添加导航功能

效果图如下 : 传送门

如果你需要新建一个页面, 前提是你需要有一个博客, 我用的是 matery 主题, 参考了 洪卫的博客搭建教程 , 和 闪烁之狐 的搭建教程, 如果没有博客也可以参考我写的 教程搭建一个自己的博客, 话不多说, 下面开始操作

新建导航页面

bash

hexo new page 'navigate'

这时候我们发现 sources/navigate/ 多了一个目录和 index.md 文件, 这个时候就不用管了, 下面开始编写导航相关代码

添加导航栏页面

进入\themes\matery\_config.yml

yaml

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  Friends:
    url: /friends
    icon: fas fa-address-book
    # 添加导航栏页面
  Navigate:
    url: /navigate
    icon: fas fa-location-arrow

图标请在 https://fontawesome.com 这个网站获取, 因为这是 matery 主题源码指定的图标库, 修改起来很麻烦, 搜索需要使用对应的英文, 中文无法获取搜索结果;

添加 navigate.ejs

定位到 \themes\matery\layout\ 新建 navigate.ejs 文件, 复制以下代码

javascript

<div class="navi-height bg-cover pd-header">
    <div class="link-box container">
        <!-- 搜索框 -->
        <div class="baidu baidu-2 large-screen">
            <!-- 切换默认搜索引擎-->
            <form name="f" action="https://www.google.com/search" target="_blank">
                <div id="Select-2">
                    <div class="Select-box-2" id="baidu">
                        <ul style="height: 47px">
                            <li class="this_s">谷 · 歌</li>
                            <li class="google_s">谷 · 歌</li>
                            <li class="baidu_s">百 · 度</li>
                            <li class="kaifa_s">开 · 发</li>
                            <li class="bing_s">必 · 应</li>
                            <li class="yahoo_s">雅 · 虎</li>
                            <li class="yandex_s">语 · 目</li>
                        </ul>
                    </div>
                    <!--更换默认搜索引擎后需要更换 name 的 q 或 wd、text 等-->
                    <label for="kw-2">
                        <input name="q" id="kw-2" class="search-input" maxlength="100" autocomplete="off"
                               type="text" placeholder="请输入搜索内容。。。">
                        <input value="搜 · 索" id="su-2" type="submit">
                    </label>
                </div>
            </form>
        </div>
        <script>
            // 定义搜索引擎的配置
            const searchEngines = {
                'baidu_s': {url: 'https://www.baidu.com/s', name: 'wd'},
                'google_s': {url: 'https://www.google.com/search', name: 'q'},
                'bing_s': {url: 'https://www.bing.com/search', name: 'q'},
                'kaifa_s': {url: 'https://kaifa.baidu.com/searchPage', name: 'wd'},
                'yahoo_s': {url: 'https://search.yahoo.com/search', name: 'p'},
                'yandex_s': {url: 'https://yandex.com/search/', name: 'text'}
            };

            // 更新搜索引擎和输入框的名称
            function updateSearchEngine(selector, inputSelector, formSelector) {
                $(selector).click(function () {
                    const engineClass = $(this).attr('class');
                    const engineInfo = searchEngines[engineClass];
                    if (engineInfo) {
                        // 更新表单的 action 和输入框的 name 属性
                        $(formSelector).attr('action', engineInfo.url);
                        $('.this_s').html($(this).html());
                        $(inputSelector).attr('name', engineInfo.name);
                    }
                    // 收起搜索引擎列表
                    $(this).closest('ul').css('height', '40px');
                });
            }

            // 设置搜索引擎选择框的 hover 效果
            function setSearchEngineHover(selector, smallHeight, largeHeight) {
                $(selector).hover(function () {
                    $(this).css('height', largeHeight);
                }, function () {
                    $(this).css('height', smallHeight);
                });
            }

            // 为两个搜索框设置事件处理
            updateSearchEngine('.Select-box li', '#kw', '.baidu form');
            updateSearchEngine('.Select-box-2 li', '#kw-2', '.baidu form');
            // 设置鼠标悬停时显示完整列表
            setSearchEngineHover('.Select-box ul', '40px', 'auto');
            setSearchEngineHover('.Select-box-2 ul', '46px', 'auto');
        </script>

        <!-- 链接 -->
        <div class="row tags-posts">
            <!-- 使用 JavaScript 动态生成 -->
        </div>

        <script>
            const categories = [
                {
                    title: '编程 · 开源',
                    links: [
                        {text: '搜索 Top', url: 'https://trends.google.com'},
                        {text: '编程 Top', url: 'https://www.tiobe.com/tiobe-index'},
                        {text: 'Start Top', url: 'https://github-trending.com'},
                        {text: '前端 Top', url: 'https://www.awesomes.cn/rank'},
                        {text: 'Google Code', url: 'https://code.google.com'},
                        {text: 'GitHub Star', url: 'https://gitstar-ranking.com/users'},
                        {text: '数据库', url: 'https://db-engines.com/de/ranking'},
                        {text: '时序数据库', url: 'https://db-engines.com/en/ranking/time+series+dbms'},
                        {text: 'Server Top', url: 'https://news.netcraft.com'},
                        {text: 'apache', url: 'https://www.apache.org/'},
                        {text: 'Spring', url: 'https://spring.io/projects'},
                        {text: 'Google', url: 'https://opensource.google/'},
                        {text: '阿里', url: 'https://opensource.alibaba.com/'},
                        {text: '百度', url: 'https://opensource.baidu.com/'},
                        {text: '腾讯', url: 'https://opensource.tencent.com/'}
                    ]
                },
                {
                    title: '编程 · 交流',
                    links: [
                        {text: 'GitHub', url: 'https://github.com'},
                        {text: 'StackOverflow', url: 'https://stackoverflow.com'},
                        {text: '码云', url: 'https://gitee.com'},
                        {text: 'Coding', url: 'https://coding.net'},
                        {text: '云 + 社区', url: 'https://cloud.tencent.com/developer'},
                        {text: '博客园', url: 'https://www.cnblogs.com'},
                        {text: '掘金', url: 'https://juejin.im'},
                        {text: 'CSDN', url: 'https://www.csdn.net'},
                        {text: '简书', url: 'https://www.jianshu.com'},
                        {text: '思否', url: 'https://segmentfault.com'},
                        {text: '开源中国', url: 'https://www.oschina.net'},
                        {text: '看雪论坛', url: 'https://bbs.pediy.com'},
                        {text: 'SourceForge', url: 'https://sourceforge.net'},
                        {text: '美团技术团队', url: 'https://tech.meituan.com/'},
                        {text: '书栈网', url: 'https://www.bookstack.cn'}
                    ]
                },
                {
                    title: '编程 · 学习',
                    links: [
                        {text: 'How2j', url: 'https://how2j.cn/'},
                        {text: '慕课教程', url: 'https://www.imooc.com/wiki/'},
                        {text: '菜鸟教程', url: 'https://www.runoob.com/'},
                        {text: '动力节点', url: 'https://www.bjpowernode.com/tutorial/'},
                        {text: 'HihoCoder', url: 'https://hihocoder.com/'},
                        {text: 'LeetCode', url: 'https://leetcode-cn.com/'},
                        {text: 'LintCode', url: 'https://www.lintcode.com/'},
                        {text: '牛客网', url: 'https://www.nowcoder.com/'},
                        {text: 'CodeGym', url: 'https://codegym.cc/zh/'},
                        {text: '腾讯云大学', url: 'https://cloud.tencent.com/edu/learning'},
                        {text: '阿里云大学', url: 'https://edu.aliyun.com/course/explore'},
                        {text: '易百教程', url: 'https://www.yiibai.com/'},
                        {text: 'JAVAschool', url: 'https://www.51gjie.com/'},
                        {text: '设计模式', url: 'https://refactoringguru.cn/'},
                        {text: 'Baeldung', url: 'https://www.baeldung.com/'}
                    ]
                },
                {
                    title: '实用 · 工具',
                    links: [
                        {text: '网易云课堂', url: 'https://study.163.com'},
                        {text: '生成 GUID', url: 'https://www.guidgen.com/'},
                        {text: '抢票助手', url: 'https://www.bypass.cn/'},
                        {text: '狗狗查询', url: 'https://www.ggcx.com/'},
                        {text: '隐私泄露查询', url: 'https://monitor.firefox.com/'},
                        {text: '超清壁纸', url: 'https://wallhaven.cc/'},
                        {text: '吾爱破解', url: 'https://www.52pojie.cn/'},
                        {text: 'FontAwesome', url: 'https://fontawesome.com/'},
                        {text: '射手网', url: 'https://assrt.net/'},
                        {text: 'processon', url: 'https://www.processon.com/'},
                        {text: 'icons8 图标', url: 'https://icons8.com'},
                        {text: '阿里图标库', url: 'https://www.iconfont.cn/'},
                        {text: '中国色', url: 'https://zhongguose.com/'},
                        {text: 'Logo 设计', url: 'https://www.uugai.com'},
                        {text: 'WikiHow', url: 'https://zh.wikihow.com'}
                    ]
                },
                {
                    title: '云端 · 工具',
                    links: [
                        {text: '腾讯云', url: 'https://cloud.tencent.com/developer/devdocs'},
                        {text: '阿里云', url: 'https://developer.aliyun.com/'},
                        {text: '华为云', url: 'https://www.huaweicloud.com/'},
                        {text: '百度云', url: 'https://abcxueyuan.baidu.com/'},
                        {text: 'Apache', url: 'https://www.apache.org/'},
                        {text: 'CdnJs', url: 'https://cdnjs.com/'},
                        {text: 'JsDelivr', url: 'https://www.jsdelivr.com/'},
                        {text: 'SSL 安全评估', url: 'https://myssl.com/'},
                        {text: 'CloudFlare', url: 'https://www.cloudflare.com/'},
                        {text: 'w3school', url: 'https://www.w3school.com.cn/index.html'},
                        {text: '蓝奏云', url: 'https://www.lanzou.com/'},
                        {text: '腾讯源', url: 'https://mirrors.cloud.tencent.com/'},
                        {text: '清华源', url: 'https://tuna.moe/'},
                        {text: '推广联盟', url: 'https://union.lizhi.io/panel/#/'},
                        {text: '外国语镜像', url: 'https://mirrors.bfsu.edu.cn/'}
                    ]
                },
                {
                    title: '影视 · 镜像',
                    links: [
                        {text: '音范丝', url: 'https://www.yinfans.me/'},
                        {text: 'YouTube', url: 'https://www.youtube.com/'},
                        {text: 'Netflix', url: 'https://www.netflix.com/'},
                        {text: '天天看电影', url: 'https://m.tiantk.net/'},
                        {text: '医学微视', url: 'https://www.mvyxws.com/'},
                        {text: '学信网', url: 'https://my.chsi.com.cn/'},
                        {text: '代码图片', url: 'https://carbon.now.sh/'},
                        {text: '音乐磁场', url: 'https://www.hifini.com/'},
                        {text: '极简插件', url: 'https://chrome.zzzmh.cn/'},
                        {text: 'Google 指数', url: 'https://trends.google.com'},
                        {text: '十年之约', url: 'https://www.foreverblog.cn/'},
                        {text: 'Boss 直聘', url: 'https://www.zhipin.com/'},
                        {text: '智联招聘', url: 'https://www.zhaopin.com/'},
                        {text: '笔趣阁', url: 'https://www.biquge.com.cn'},
                        {text: '每平每屋', url: 'https://3d.shejijia.com/'}
                    ]
                }
            ];
            document.addEventListener('DOMContentLoaded', function () {
                const container = document.querySelector('.tags-posts');
                categories.forEach(category => {
                    // 创建一个新的 div
                    const categoryDiv = document.createElement('div');
                    categoryDiv.classList.add('col', 's12', 'm6', 'l4', 'friend-div');
                    categoryDiv.setAttribute('data-aos', 'zoom-in-up');

                    // 创建 card
                    const card = document.createElement('div');
                    card.classList.add('card');

                    // 创建标题
                    const title = document.createElement('div');
                    title.classList.add('jj-list-tit');
                    title.textContent = category.title;

                    // 创建 ul
                    const ul = document.createElement('ul');
                    ul.classList.add('jj-list-con');

                    // 遍历每个链接，生成 li
                    category.links.forEach(link => {
                        const li = document.createElement('li');
                        const a = document.createElement('a');
                        a.href = link.url;
                        a.classList.add('link-3');
                        a.target = '_blank';
                        a.textContent = link.text;
                        li.appendChild(a);
                        ul.appendChild(li);
                    });
                    // 将标题和 ul 插入 card
                    card.appendChild(title);
                    card.appendChild(ul);

                    // 将 card 插入 categoryDiv
                    categoryDiv.appendChild(card);

                    // 将 categoryDiv 插入 container
                    container.appendChild(categoryDiv);
                });
            });
        </script>
    </div>
</div>
<% if (theme.banner.enable) { %>
    <script>
        // 每天切换 banner 图.  Switch banner image every day.
        var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for(theme.banner.url) %>" + new Date().getDay() + '.jpg';
        $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
    </script>
<% } else { %>
    <script>
        $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('https://tencent.cos.mobaijun.com/img/banner/0.jpg') %>)');
    </script>
<% } %>
<style>
    *{margin:0;padding:0}dd{margin:0;padding:0;font-size:14px;font-weight:normal}img{border-style:none}li{list-style:none;float:left}a{text-decoration:none}.card{background-color:rgba(25,240,229,0);width:96%;margin-left:2%}.baidu{float:left;margin-left:100px}.baidu form{position:relative}.Select-box ul{height:40px;position:absolute;left:-1px;top:0px;z-index:9999;background:#FFF;border:1px solid #ccc;border-top:none;overflow:hidden}.Select-box li{width:60px;line-height:40px;font-size:14px;color:#484848;border:0;cursor:pointer}.Select-box li:hover{background:#3385ff;color:#FFF}.Select-box .this_s{color:#317ef3}.Select-box .this_s:hover{background:#FFF;color:#317ef3}.baidu-2{width:100%;height:110px;margin:0 auto;background:none;padding-top:15px}.baidu-2 form{width:520px;margin:0 auto}.baidu-2 input{padding:13px 8px;opacity:.9;font-size:15px}#Select-2{float:left}.Select-box-2{text-align:center;float:left;position:relative}.Select-box-2 ul{height:46px;position:absolute;left:0;top:1px;z-index:9999;background:rgba(255,255,255,.9);border:1px solid #ccc;border-top:none;overflow:hidden;border-radius:10px}.Select-box-2 li{width:60px;line-height:46px;font-size:15px;color:#484848;border:0;cursor:pointer;border-radius:10px}.Select-box-2 li:hover{background:#3385ff;color:#FFF}.Select-box-2 .this_s{color:#317ef3}.Select-box-2 .this_s:hover{background:none;color:#317ef3}#kw-2{width:335px;outline:0;border:1px solid #ccc;background:rgba(255,255,255,.2);color:#000000;padding-left:70px;font-weight:bold;border-radius:10px}#su-2{width:80px;background:blue;border:none;border-top:#3385ff 1px solid;border-bottom:1px solid #2d78f4;color:#FFF;cursor:pointer;outline:none;border-radius:35px}#su-2:hover{background:blue;border-bottom:1px solid blue}#su-2:active{background:blue;box-shadow:inset 1px 1px 3px blue;-webkit-box-shadow:inset 1px 1px 3px blue}.jj-list-tit{font-size:16px;line-height:25px;color:#ffffff;width:100%;padding-left:38.5%}.jj-list-con{overflow:hidden;margin:0 auto}.jj-list-con li{width:31.333%;margin:1%}.link-3{display:block;background:rgba(0,0,0,.35);color:#FFF;font-size:13px;text-align:center;line-height:35px;padding:4px 0;border-radius:2px;transition:all .2s}.link-3:hover{background:rgba(0,0,0,.45);font-size:15px;font-weight:bold}@media only screen and (max-width:601px){.navi-height{height:95%}.link-box{margin-top:12%}.large-screen{display:none}}@media only screen and (min-width:600px) and (max-width:993px){.navi-height{height:100%}.link-box{margin-top:5%}.large-screen{display:none}}@media only screen and (min-width:993px){.navi-height{position:absolute;width:100%;height:100%}}.page-footer{display:none}
</style>

添加翻译

定位到 \themes\matery\languages\ 目录, 下方存在两个翻译文件, 一个 default.yml 是默认英文,zh-CN.yml是中文, 可以在博客根目录配置文件 _config.yml 修改默认语言

yaml

# Site
title: 框架师
subtitle: 墨白
description: 中南财经大学 | 金融管理 | 计算机应用
keywords: Java Python 编程语言 墨白 框架师 计算机应用 视频资料 免费
author: 墨白
language: zh-CN
timezone:

打开 default.yml 文件, 定位到 friends: Friends, 在下面添加一行navigate: Navigate 即可, 打开 zh-CN.yml, 定位到friends: 友链, 在下面添加一行navigate: 导航; 到这里基本上是没问题了, 如果你发现导航栏还是英文, 定位到\themes\matery\layout\_partial\mobile-nav.ejs 添加以下代码, 还有 navigation.ejs 同上修改

javascript

<%
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", "导航");
%>

在 git bash 输入以下命令预览, 记得清理一下 浏览器缓存

bash

$ hexo clean && hexo g && hexo s

如果以上很顺利没什么问题, 可以直接将博客部署上线即可, 输入以下命令

bash

$ hexo clean && hexo g && hexo d