自定义 Favicon 和元数据
问题
默认的文档网站在浏览器中往往缺乏独特的视觉标识（使用通用的 favicon），并且在链接被分享到社交媒体或 Slack、Discord 等沟通工具时，提供的预览效果较差。这会降低品牌识别度和点击率。
为什么重要
Favicon 是浏览器窗口中主要的视觉锚点。高质量的 OpenGraph 和 Twitter 元数据可以确保您的文档在分享时看起来专业且值得信赖，通过标题、描述和英雄图提供必要的上下文。
方法
docmd 提供了一个内置的 favicon 属性，用于轻松配置图标。对于高级 SEO 和社交元数据，请利用 SEO 插件，它可以根据您的项目配置和页面 Frontmatter 自动生成元标签。
实施
1. 配置 Favicon
将您的 Favicon 文件（例如 favicon.svg 或 favicon.ico）放在源目录中，并在 docmd.config.json 中引用它。docmd 会自动处理相对路径和缓存失效。
{
"title": "我的项目",
"favicon": "/favicon.svg"
}
2. 全局 SEO 配置
启用并配置 SEO 插件，为整个网站设置默认的社交媒体预览。
{
"url": "https://docs.example.com",
"plugins": {
"seo": {
"defaultDescription": "关于我们神奇软件的终极指南。",
"openGraph": {
"defaultImage": "/static/og-banner.png"
},
"twitter": {
"siteUsername": "@myproject",
"cardType": "summary_large_image"
}
}
}
}
3. 页面级覆盖
您可以使用 Frontmatter 中的 seo 属性覆盖单个页面的 SEO 设置。
---
title: "重大发布 v2.0"
description: "关于我们新引擎您需要了解的一切。"
seo:
image: "/assets/v2-hero-banner.png"
keywords: ["发布", "v2", "更新", "性能"]
---
权衡
虽然 favicon 属性很方便，但它仅支持单个文件。对于复杂的多尺寸 Favicon 集（Apple Touch 图标、Android manifest 等），您可能需要使用自定义插件将额外的 <link> 标签注入 <head> 中。