求助：如何在Lektor项目左侧创建子导航树？

你的假设验证 #

• 假设1：正确。Lektor项目中通用的顶部主导航属于全局布局元素，通常定义在根模板layout.html中，让所有继承该模板的页面都能复用。
• 假设2：正确。官方文档的左侧子导航是文档类页面的专属组件，所以会在doc-page.html模板中实现，通过模板语法遍历当前页面的子页面生成树形结构。
• 假设3：正确。官方项目使用navbar相关CSS类实现顶部导航布局，通过该类的样式规则将导航固定在页面顶部区域。
• 假设4：正确。tree-nav类就是官方项目中专门用于渲染左侧树形子导航的CSS类，通过宽度、定位等样式将其固定在页面左侧。

后续方案建议 #

快速搭建小型Demo #

不用找现成示例项目，你可以自己快速构建最小化Demo：

1. 创建Lektor项目，添加doc-page.ini模型，包含基础字段（如title、body）及子页面关联配置；
2. 在templates目录下创建layout.html，编写顶部主导航，使用navbar类，通过Lektor模板语法遍历站点顶级页面；
3. 创建doc-page.html继承layout.html，在页面左侧区域添加tree-nav类的容器，用递归模板语法遍历this.children生成多级子导航；
4. 编写基础CSS：给navbar设置position: fixed; top: 0; width: 100%固定顶部，给tree-nav设置width: 250px; float: left; margin-top: 60px避开顶部导航高度，主内容区设置margin-left: 270px留出左侧导航空间。

精简官方项目作为起点 #

如果觉得官方项目过于复杂，完全可以精简后使用：只保留doc-page模型、对应的模板文件、导航相关CSS，删除多余的插件、示例页面、非必要模板，就能得到一个干净的基础框架，再根据自身需求调整细节。

内容的提问来源于stack exchange，提问作者Thorsten