hexo自定义导航栏

图书馆呆坐4个小时，在Ai的帮助下，终于把hexo自定义导航栏搞定。

想法

之前一直想搞个聚合的导航栏，总结一些日常的资源链接啥的；但是发现好像没有好看的导航栏，不够简洁且不好看；最开始想着用友链的方式来做，发现友链是主题自带的模板；在我的一通修改下；好像好看了点，但是有没有那么好看；

这是我之前导航页的样子，还是经过我改后的样子

然后目前所在的这家公司有个导航聚合页长这个样子

虽然也不算多好看，但是人家简洁且分层清晰，那我是不是也可以自定义一个导航页呢？必须的！

开干

借助ai的力量，把图片丢给ai让他给我按这个样式给我写一个一模一样的页面出来；

然后尝试了deepseek-v1、通义千问，发现写的啥玩意儿？写的啥东西，一个分类直接的竖线居然给我用代码写死的方式实现？这不能上样式吗？就这还要取代程序员，再进化进化吧

然后又是对着Ai一顿输出，最终换成deepseek-v3才终于有点ok了；当然过程中少不了自己改改样式啥的，这种简单的微调样式我为数不多的前端知识还是能搞定的；

然后历时近半个小时的打磨后，我终于得到了想要的导航页；内容肯定是我自己总结（ai帮我找的啦）；效果如下：

移动端样式兼容

这是网页端的效果，那么我想放到移动端展示；那么样式不得要兼容吗？然后又是ai一顿狂输出，让它给我优化了；过程中自己也微调了点，发现最终像那么回事儿

优化后的效果如下：

部署

这是静态页面啊，怎么结合hexo使用呢？hexo的模板语法倒是能看懂，但是写完嵌套进去不得把我样式给覆盖了；

然后看了下hexo的官网，发现有配置可以跳过文件渲染

步骤如下：

• 最外层的_config.yml中配置：skip_render: custom_html/**
• suorce 文件夹下新增custom_html文件夹，里面放html文件

页面优化

页面是静态的，但是我想数据是动态的怎么玩呢？一个大json去渲染？no,层级太多了难看且不好修改

那我是不是也可以通过yml文件，然后js去读取yml文件，渲染进页面呢？答案是肯定的；然后让ai给我抽取yaml文件，然后写个渲染js,我再改吧改吧，发现好使啊！

yml文件格式如下：

js代码如下：

<!-- 加载 YAML 解析库和渲染脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.0.0/dist/js-yaml.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            document.getElementById('nav-container').innerHTML = '加载中...';
            // 1. 加载 YAML 数据
            const response = await fetch('nav-data.yml', {
                headers: {
                    'Cache-Control': 'no-cache'
                }
            });
            const yamlText = await response.text();
            const data = jsyaml.load(yamlText);

            // 2. 定义模板渲染函数
            const renderTemplate = (categories) => {
                return categories.map(category => `
        <div class="category cat-title">
        <span>${category.name}</span>
        ${category.groups.map(group => `
          <div class="link-group">
            <span class="subcat">${group.name}</span>
            ${group.links.map(link => `
              <a href="${link.url}"
                 target="_blank"
                 title="${link.title || ''}"
                 class="link-item">
                ${link.name}
              </a>
            `).join('')}
          </div>
        `).join('')} </div>`).join('');
            };

            // 3. 渲染到页面
            document.getElementById('nav-container').innerHTML = renderTemplate(data.categories);
        });
    </script>

总结

以上就是我使用的方法，最后将主题里的链接改成静态页面的链接就可以了

大家如果有类似想法可以自行尝试，后面会不定期更新导航栏，若有需要可以联系我，我提供导航栏的模板，大家可以参考。