ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

TKL侧边导航定制教程:Works作品集、分类菜单与友情链接下拉框的完整配置方法

TKL侧边导航定制教程:Works作品集、分类菜单与友情链接下拉框的完整配置方法 TKL侧边导航定制教程Works作品集、分类菜单与友情链接下拉框的完整配置方法【免费下载链接】TKLHexo Theme项目地址: https://gitcode.com/gh_mirrors/tk/TKLTKL 是一款免费且高度可定制的 Hexo 响应式博客主题其右侧滑出的侧边导航是整站导航体验的核心。本教程是一份 TKL 侧边导航定制完整指南只改一个主题配置文件就能让你轻松搞定Works 作品集下拉框、Categories 分类菜单、Links 友情链接下拉框三大板块——全程无需修改任何模板代码10 分钟即可拥有专业级 Hexo 博客导航栏 侧边导航结构速览下拉框从哪里来TKL 的侧边导航由固定项 三个下拉板块组成整体结构一目了然板块配置来源数据来源说明Home / Archives无需配置自动固定入口始终显示Works主题_config.yml的works手工配置作品集/项目页下拉框Categories无需配置文章 front-matter 自动生成按分类名排序并显示文章数Links主题_config.yml的links手工配置友情链接下拉框三个下拉板块的渲染逻辑都集中在侧边导航模板 layout/_partial/header.ejs 中。理解一条关键规则后后续配置事半功倍下拉框只在对应列表非空时才会渲染——配置为空或没配置整个入口直接消失而不是显示一个空菜单。✍️ Works 作品集下拉框一分钟完成配置打开主题根目录下的配置文件 _config.yml找到works字段按列表格式逐项添加works: - works_name: 个人作品 works_url: /portfolio - works_name: 摄影集 works_url: /gallery每个条目只需两个字段字段作用works_name侧边导航中显示的菜单文字works_url点击后跳转的地址内部路径或完整网址几个实用细节菜单项点击后会在新标签页打开模板中已内置target_BLANK适合跳转外部作品集页面想隐藏 Works 入口把整个works块删掉或留空即可侧边导航会自动跳过它建议条目控制在 4~6 个以内下拉框过长会影响可读性。️ 分类菜单全站最省事的导航入口Categories 下拉菜单是 TKL 最省心的部分它不需要任何配置由主题自动扫描全站文章的分发生成菜单名后还自带文章计数例如C/C(2)、JavaScript(3)。你只需要做好两件事1. 在文章 front-matter 中写明分类--- title: 我的第一篇文章 categories: [Hexo, 主题定制] ---2. 确认 Hexo 主配置启用了分类页面在 Hexo 根目录的_config.yml中确保以下值为 1启用分页archive: 1 category: 1 tag: 1分类页对应的页面模板为 layout/category.ejs菜单按分类名自动排序文章数越多读者越容易找到内容 Links 友情链接下拉框配置方法友情链接同样在 _config.yml 中配置结构与 Works 一致只是字段名不同links: - name: 朋友A link: 朋友A的博客地址 - name: 朋友B link: 朋友B的博客地址name为显示名称link填写朋友的完整博客网址与 Works 不同Links 的链接在当前窗口打开模板未加新标签页属性列表留空时 Links 入口自动隐藏和 Works 的行为完全一致。✅ 配置生效与常见问题清单改完配置后执行一次重新生成并部署让改动真正生效hexo clean hexo g -d遇到效果不符预期时按这份排查清单逐项检查现象原因与解决办法下拉框没出现列表为空、YAML 缩进错误-需与字段顶格、子字段缩进 2 格菜单文字显示成[object Object]漏写了works_name/name字段名顶部导航栏整体不显示新版 Hexo 会自动补全闭合标签可按 README.md 说明安装 hexo 3.7.1 解决首页横幅模糊、留白多换一张高分辨率图片在 _config.yml 中修改cover字段即可最后检查一遍配置改动全部集中在一个_config.ymlWorks、Categories、Links 三板块各司其职。把作品链接、内容分类、好友博客都安排进侧边导航后你的 Hexo 博客就有了清晰完整的站点地图——剩下的就是安心写文章了 ✍️【免费下载链接】TKLHexo Theme项目地址: https://gitcode.com/gh_mirrors/tk/TKL创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表