[{"data":1,"prerenderedAt":198},["ShallowReactive",2],{"content:\u002Fposts\u002Fhalo-hao-navigation":3,"surround:\u002Fposts\u002Fhalo-hao-navigation":188},{"id":4,"title":5,"body":6,"categories":162,"date":164,"description":165,"draft":166,"extension":167,"image":168,"meta":169,"navigation":171,"path":172,"permalink":168,"pinned":166,"published":168,"readingTime":173,"recommend":168,"references":168,"seo":178,"sitemap":179,"stem":180,"tags":181,"type":185,"updated":186,"__hash__":187},"content\u002Fposts\u002Fposts\u002Fhalo-hao-navigation.md","Halo博客Hao主题添加个人导航页",{"type":7,"value":8,"toc":154},"minimark",[9,19,39,49,56,59,64,67,70,77,87,96,99,110,114,121,129,133,143,146],[10,11,15],"alert",{"type":12,"icon":13,"title":14},"info","tabler:robot","AI 迁移提示",[16,17,18],"p",{},"本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。",[20,21,22,33,36],"blockquote",{},[16,23,24,25,32],{},"本教程是修改的主题是",[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Fgithub.com\u002Fchengzhongxue\u002Fhalo-theme-hao",[30],"nofollow","Halo-theme-Hao"," 版本是：1.6.6",[16,34,35],{},"根据友联页面修改而来。",[16,37,38],{},"原理是添加链接，给分组添加一个自定义属性，通过属性过滤展示的链接",[16,40,41],{},[42,43,44,45],"del",{},"效果如图：",[26,46,48],{"href":47},"#","前往：导航页",[16,50,51],{},[52,53],"img",{"alt":54,"src":55},"",".\u002Fimages\u002Fhalo-hao-navigation-813593.webp",[16,57,58],{},"下面就开始教程吧！",[60,61,63],"h2",{"id":62},"修改halo运行配置","修改Halo运行配置",[16,65,66],{},"在运行时会缓存模板文件，下次访问不再会读取物理的模板文件，这会有性能的损耗。",[16,68,69],{},"如果我们修改主题，可以添加一个运行参数",[16,71,72],{},[26,73,76],{"href":74,"rel":75},"https:\u002F\u002Fdocs.halo.run\u002Fdeveloper-guide\u002Ftheme\u002Fprepare#%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83",[30],"搭建开发环境",[10,78,80],{"type":79},"warning",[16,81,82,86],{},[83,84,85],"code",{"code":85},"--spring.thymeleaf.cache=false"," 仅用于开发调试，生产环境必须移除此参数，否则会严重影响性能。",[88,89,94],"pre",{"className":90,"code":92,"language":93,"meta":54},[91],"language-shell","# 关闭主题模板缓存\n- --spring.thymeleaf.cache=false\n","shell",[83,95,92],{"__ignoreMap":54},[60,97,98],{"id":98},"创建navigation模板页面",[16,100,101,102,105,106,109],{},"首先先找到主题文件夹：在持久化存储的",[83,103,104],{"code":104},"halo2","文件夹下的",[83,107,108],{"code":108},"themes\u002Ftheme-hao","里面",[60,111,113],{"id":112},"修改themeyaml配置","修改theme.yaml配置",[16,115,116,117,120],{},"找到",[83,118,119],{"code":119},"spec.customTemplates.page","添加一个导航页面模板：",[88,122,127],{"className":123,"code":125,"language":126,"meta":54},[124],"language-yaml","spec:\n  displayName: Hao\n  author:\n    name: 程序员小航 & 困困鱼 & Carol\n    website: https:\u002F\u002Fgithub.com\u002Fchengzhongxue\n  customTemplates:\n    page:\n      - name: 友情链接页面模版\n        description: 支持可预设文本的友链\n        screenshot:\n        file: page_links.html\n      # 添加导航页面模板\n      - name: 导航页面模板\n        description: 个人导航页\n        screenshot:\n        file: navigation.html\n","yaml",[83,128,125],{"__ignoreMap":54},[60,130,132],{"id":131},"添加navigationhtml","添加navigation.html",[16,134,135,136,139,140],{},"在",[83,137,138],{"code":138},"templates","目录下新建一个文件",[83,141,142],{"code":142},"navigation.html",[16,144,145],{},"添加如下内容：",[88,147,152],{"className":148,"code":150,"language":151,"meta":54},[149],"language-html","\u003C!DOCTYPE html>\n\u003Chtml  xmlns:th=\"http:\u002F\u002Fwww.thymeleaf.org\"\n      th:replace=\"~{modules\u002Flayouts\u002Flayout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}\">\n\u003Cth:block th:fragment=\"head\">\n    \u003Cth:block th:replace=\"~{modules\u002Fcommon\u002Fopen-graph :: open-graph(_title = ${singlePage.spec.title},\n                _permalink = ${singlePage.status.permalink},\n                _cover = ${singlePage.spec.cover},\n                _excerpt = ${singlePage.status.excerpt},\n                _type = 'website')}\">\u003C\u002Fth:block>\n\u003C\u002Fth:block>\n\u003Cth:block th:fragment=\"content\">\n\n    \u003Cdiv class=\"page\" id=\"body-wrap\">\n        \u003Cheader class=\"not-top-img\" id=\"page-header\">\n            \u003Cnav th:replace=\"~{modules\u002Fnav :: nav(title = ${singlePage.spec.title})}\">\u003C\u002Fnav>\n            \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" th:href=\"${assets_link + '\u002Flibs\u002Ffcircle\u002Fheo-fcircle3.css'}\">\n\n        \u003C\u002Fheader>\n        \u003Cmain class=\"layout hide-aside\" id=\"content-inner\">\n            \u003Cdiv id=\"page\">\n                \u003Cth:block th:replace=\"~{macro\u002Fcontent-nav :: content-nav(${htmlType})}\" \u002F>\n                \u003Chr\u002F>\n                \u003C!--\u002F* 评论组件 *\u002F-->\n                \u003Cth:block\n                        th:replace=\"~{modules\u002Fcomment :: comment(group = 'content.halo.run',\n                  kind = 'SinglePage',\n                  name = ${singlePage.metadata.name},\n                  allowComment = ${singlePage.spec.allowComment})}\"\u002F>\n            \u003C\u002Fdiv>\n        \u003C\u002Fmain>\n        \u003C!-- 底部 -->\n        \u003Cfooter th:replace=\"~{modules\u002Ffooter}\"\u002F>\n    \u003C\u002Fdiv>\n\n\u003C\u002Fth:block>\n\n\u003C\u002Fhtml>\n","html",[83,153,150],{"__ignoreMap":54},{"title":54,"searchDepth":155,"depth":155,"links":156},4,[157,159,160,161],{"id":62,"depth":158,"text":63},2,{"id":98,"depth":158,"text":98},{"id":112,"depth":158,"text":113},{"id":131,"depth":158,"text":132},[163],"服务","2025-11-09","详解如何在Halo博客中添加个人导航页，包括添加链接、分组、自定义属性等。",false,"md",null,{"slots":170},{},true,"\u002Fposts\u002Fhalo-hao-navigation",{"text":174,"minutes":175,"time":176,"words":177},"3 min read",2.245,134700,449,{"title":5,"description":165},{"loc":172},"posts\u002Fposts\u002Fhalo-hao-navigation",[182,183,184],"Halo","主题","导航页","tech","2026-06-27 15:16:40","KWOKuWZnrX1BnRlIea8WjCSof_x5PKavdTkDUX-UkI4",[189,194],{"title":190,"path":191,"stem":192,"date":193,"type":185,"children":-1},"Docker 部署 Uptime Kuma 监控服务","\u002Fposts\u002Fdocker-uptime-kuma","posts\u002Fposts\u002Fdocker-uptime-kuma","2025-10-10 15:16:40",{"title":195,"path":196,"stem":197,"date":164,"type":185,"children":-1},"自建图床：基于宝塔部署兰空图床","\u002Fposts\u002Flsky-pro-bt-panel-deploy","posts\u002Fposts\u002Flsky-pro-bt-panel-deploy",1788712225869]