MKDocs页面内可设置全局变量/宏吗?含跨页引用需求
在MKDocs中设置跨页面全局变量的方案
原生MKDocs结合Jinja2模板引擎本身不支持从页面内部设置跨页面生效的全局变量——因为Jinja2的模板渲染是单页面独立进行的,没有内置的跨页面状态存储机制,{% set myvar = 'some-value' %}这类声明仅在当前页面的渲染上下文里有效。
针对你要通过首页下拉菜单设置全局变量、供其他页面调用的需求,有两种可行的实现方向:
1. 前端JavaScript实现动态全局状态(推荐,支持用户交互修改)
MKDocs生成的是静态站点,用户交互后的状态需要在前端存储,最常用的是localStorage或sessionStorage:
步骤1:首页添加下拉菜单并存储选择值
在首页的Markdown内容中嵌入HTML和JS,监听下拉选择事件,将值存入本地存储:
<select id="siteGlobalVar"> <option value="default">默认选项</option> <option value="optionA">选项A</option> <option value="optionB">选项B</option> </select> <script> // 监听下拉菜单变化,保存值到localStorage document.getElementById('siteGlobalVar').addEventListener('change', function(e) { localStorage.setItem('siteGlobalVar', e.target.value); }); // 页面加载时恢复上次选择的值 window.addEventListener('load', function() { const savedValue = localStorage.getItem('siteGlobalVar'); if (savedValue) { document.getElementById('siteGlobalVar').value = savedValue; } }); </script>
步骤2:其他页面读取并使用全局变量
在需要调用全局变量的页面,嵌入JS读取本地存储的值,渲染到页面中:
<p>当前全局选择:<span id="globalVarDisplay"></span></p> <script> window.addEventListener('load', function() { // 读取存储的值,无值时用默认值 const globalValue = localStorage.getItem('siteGlobalVar') || 'default'; document.getElementById('globalVarDisplay').textContent = globalValue; // 如果需要结合Jinja2模板逻辑,也可以用这个值触发其他前端行为 }); </script>
2. 插件实现静态全局变量(仅构建时生效,不支持用户动态修改)
如果你的需求是静态全局变量(不需要用户交互修改,仅在构建时从首页配置),可以通过MKDocs插件实现:
- 编写一个简单的插件,读取首页的元数据(比如页面Front Matter中的变量);
- 将该变量注入到所有页面的Jinja2渲染上下文中,实现全局调用。
示例插件逻辑(可放入plugins/global_var_plugin.py):
from mkdocs.plugins import BasePlugin class GlobalVarPlugin(BasePlugin): def on_page_context(self, context, page, config, nav): # 假设首页的Front Matter中有global_var字段 if page.file.src_path == 'index.md': global_var = page.meta.get('global_var', 'default') # 将变量注入所有页面的上下文 context['global_var'] = global_var return context
然后在mkdocs.yml中启用插件:
plugins: - global_var_plugin
之后在任意页面的模板中就可以直接调用{{ global_var }},但这种方式的变量是构建时固定的,无法响应用户的下拉选择操作。
内容的提问来源于stack exchange,提问作者Robb
相关产品推荐
相关产品推荐

