浏览器不会自动显示“创作工具列表”元信息，需手动用HTML结构（如）静态展示，或通过JS读取或data-属性并动态插入DOM。
怎么让浏览器识别并显示“创作工具列表”这类元信息
HTML 本身不提供「创作工具列表」的内置语义标签或自动渲染机制。所谓“创作工具列表”，通常是开发者手动写入的元数据，比如在 <meta> 里声明，或用自定义 data- 属性存，但浏览器不会主动把它渲染成可见列表。
想让它显示出来，得靠你自己写 HTML 结构 + CSS 样式 +（可选）JS 动态读取和插入。
- 最直接的做法：把工具名写进
<ul></ul>或<dl></dl>，用纯 HTML 静态展示——这是唯一能保证所有浏览器都显示的方式 - 如果想从
<meta name="generator" content="...">或<meta name="tool" content="...">里提取并渲染，必须用 JS 读取document.querySelector('meta[name="tool"]')，再把值塞进某个<div id="tools"></div> - 注意：
name="generator"是约定俗成的字段，但内容格式完全自由（如content="Vue 3.4 + Vite 5.0"），没法自动拆解成“列表”，得自己解析字符串或要求后端输出 JSON 格式
为什么 generator meta 标签不显示、也不该指望它显示
<meta name="generator" content="..."> 是给机器看的，不是给人看的。搜索引擎、调试工具、爬虫可能读它，但浏览器渲染引擎压根不把它当内容处理，也不会出现在 DOM 可见区域。
- 它的标准用途是标识页面生成技术栈，比如 CMS、静态站点生成器、框架版本，方便运维或审计
- 如果你在源码里写了
<meta name="generator" content="Obsidian 1.5.2">，但页面上没看到任何文字——这完全正常，不是 bug - 某些 SEO 插件或浏览器扩展（如 Wappalyzer）会读这个字段做技术识别，但它们不修改页面 DOM，所以不影响显示
- 别试图用 CSS 给
meta加display: block——无效，<meta>是 void 元素，不在渲染流中
用 data- 属性存工具信息，然后 JS 渲染成列表
比依赖 <meta> 更可控：把结构化数据放 data- 属性里，JS 拿到后生成真实 DOM 节点，确保可见、可样式、可交互。
立即学习“前端免费学习笔记（深入）”；
例如，在 上加：
<body data-tools='["Markdown Editor", "Mermaid.js", "Prettier"]'>
然后 JS 做：
const tools = JSON.parse(document.body.dataset.tools || '[]');<br>const list = tools.map(t => `<li>${t}</li>`).join('');<br>document.getElementById('tools-list').innerHTML = `<ul>${list}</ul>`;
- 必须用
JSON.parse()，因为dataset返回的是字符串，即使你写的是数组字面量 - 注意引号嵌套：HTML 属性值用单引号，JS 字符串用双引号，避免解析失败
- 如果工具信息来自服务端模板（如 Nunjucks、Jinja），优先让模板直接输出
<ul><li>...</li></ul>，省去 JS 解析环节，更可靠
框架/构建工具怎么注入这些信息（Vite、Next.js、Astro）
现代前端框架通常在构建时生成 HTML，你可以把工具信息作为构建参数或环境变量注入，而不是硬编码。
- Vite：在
vite.config.ts的html.title或自定义插件里，用transformIndexHtml把工具列表写入<script type="application/json"></script>或data-属性 - Next.js：用
getStaticProps或generateStaticParams把工具配置传给页面组件，再由 JSX 渲染；避免塞进的<meta>里指望它显示 - Astro：直接在 .astro 文件顶部用
---frontmatter 定义tools: ["VS Code", "Astro 4.0"]，然后{tools.map(t => <code><li>{t}</li>)} - 关键区别：框架生成的是最终 HTML，所以「注入」=「写进 HTML 字符串」，不是改个配置就自动出现——你得明确告诉它“往哪写”“怎么写”
真正容易被忽略的是：工具列表是否需要随用户操作更新（比如切换主题后加个「Theme Switcher」）。如果是动态场景，就不能只靠构建时注入，得设计可更新的数据源和重渲染逻辑。
