#布局图示

本文用 GoAT 图展示 Lichtung 主题各页面布局的结构,并在图中标注各区域对应的 hugo.toml 参数名。

所有页面共享同一整体骨架(图一),main 区域的内容因布局类型不同而有差异(图二至图六)。

##图一:整体页面结构

所有页面共享此骨架。左侧为站点导航(site-nav),右侧 main 区域的具体结构因布局类型而异。

ss.isStrtmtSxyftSlesnStlStsiStsciStehecayrhoTirheiaheiheinheiotieaoShx-eonrleoTdvoNnoLtfoItpet-rweoewoeeewrewakwieowney-encSanTme-FeSvsSnSf-rh.ahi|oa|i|iiki|fieTvogaiohdtttelererH.m(usalsguiaeobnye+toLiuditticl-ahesgtpruteanhcmgeismfeibt-ceot,lpoo-gwlg)ilnekmenus.main

site-nav 内部组件(从上到下):

组件参数说明
搜索框ShowSiteSearchFuse.js 站内搜索
分类树ShowTaxonomyTree层级式分类浏览
文件树ShowFileTree内容目录树浏览
侧边导航ShowSiteNavmenus.side 定义
链接与社交ShowSiteLinkparams.links + params.social
站点信息ShowSiteInfo描述、字数统计(ShowSiteCountWords)、分类统计(ShowSiteCountTerms)、运行天数(StartDate

##图二:文章页(page / about)

文章页布局对应 page.html(普通文章)和 about.html(关于页)。两者结构相同,区别仅在于关于页的 page-header 内额外显示 ShowHeatMap(写作热力图)。

pb(a.pp(artrCaowgeatogsaeaginetl-dsct--ihclefinerdenoneauatofdmtttebee(wrsrLiwakposoortosdC/tchg-oaimunsengctteuaLsri/Senchakwod)dwi)Snpegocctsotitpim-yoenrnaiCsvgothuactntotumWsmoerAndIts-maasTSrpSPflSwnblScriOheohowihakaihkkdColsosdnorcnoLewatwt-kwdkkwisTtsRsFL-sBnuoeeoiakmcdlr|mary)

page-header 内的 post-meta 显示:分类标签、日期(DateFormat)、字数、阅读时间、文章状态标记、AI 标记、摘要。

aside 内部组件:

组件参数说明
目录ShowToc文章目录大纲
相关文章ShowRelPostHugoRelPostHugoRelPostLimit相关推荐文章
出链ShowForwardLink文章中指向的外部链接
入链ShowBackLink其他文章指向本文的链接

page-footer 内部组件:

组件参数说明
文章信息LastChangeLink最后修改日期 + Git 提交链接
前后导航同章节内的上一篇/下一篇文章
评论commentwaline/twikoo/giscus/cwd评论系统,需在 [params] 中启用对应系统
版权copyrightCC 许可证类型

关于页特有:ShowHeatMap 出现在 page-header 中,显示 GitHub 风格的写作热力图。

##图三:章节/列表页(section / home / term)

章节页(section.html)、首页(home.html)和分类项页(term.html)共享此布局。核心是 article 中的内容 + 子章节 + 文章列表。当 ListStyle = date 时,右侧出现年月跳转导航。

pba.sSaLarrCuhrigetobotseainswit-dcteScShcleculterentbeyautiS-ldmoeleebncirsstsIittSoehnmoSwtSyelcetiLoinsCtoLuinmtiWtordsa(yjswLeuihiamdesrpent/-Smntoaynvlteh=date)

article 内部组件:

组件参数说明
内容.Content章节 _index.md 的正文
子章节ShowSubSection嵌套子章节列表
文章列表ShowListListStyleItemStyleListLimit文章列表,ListStyle 可选 list/date/splitItemStyle 可选 card/simple

ListStyle = date 时的子选项:ShowCountWordsPerYearShowCountWordsPerMonthShowPostsPerYearShowPostsPerMonth

首页特有:ShowAllPagesInHome 控制首页显示全部文章还是仅 mainSections 中的文章。

##图四:归档页(archive)

归档页(archive.html)结构与章节/列表页基本相同,区别在于:ListStyle 默认为 date,右侧 aside 始终显示年月跳转导航,ShowAllPagesInArchive 控制是否显示全站所有文章。

pba.aLSarrCrihgetotsoeainitw-dctcSAhcleltlereneylaut-lPdmleaebi=grssdetasStIhenoAw(rSdceehcfitaviueolntC)ountWordsayj(seuaiamldrpwe/-amnyoasnvtvhisible)
组件参数说明
文章列表ShowAllPagesInArchivetrue = 全站所有文章,false = 同章节列表页逻辑
aside固定显示年月跳转导航(等同于章节页 ListStyle=date 时的 aside)

##图五:索引页(indexes)

索引页(indexes.html)是一个特殊的聚合页面,没有右侧 aside。article 内依次排列搜索框、章节树、分类列表和过滤器。

pba.arrCgetosstfeaineeai-dctacxlhclertoterencineauthoordm-nmebb-yrsot-SxrlheioeswStFhio(lwwtSieetrahrcchounts)

article 内部组件(从上到下):

组件参数说明
搜索框ShowSearch(front matter)站内搜索入口
章节树全站章节结构导航
分类列表各分类及其条目计数
过滤器ShowFilter基于分类的多维度筛选

##图六:分类页(taxonomy)

分类页(taxonomy.html)展示某个分类维度下的所有 term(如 /tags/ 下的所有标签)。右侧 aside 为 term 跳转导航。

pba.t(arrCePagetororeainmst-dct-tihclelPcerenielautsredmtTsebersrpmeLrimtietrm)atjseuirmdmpe-nav
组件参数说明
term 列表PostPerTermLimit每个 term 下最多显示的文章数
aside所有 term 的页内跳转链接