自定义head与header导航
发布时间：
更新时间：
head的自定义
在Stalux主题中，你可以通过配置文件自定义head标签内容，这允许你添加自定义脚本、样式表、元标签或其他HTML元素到页面的<head>部分。
基本配置
export const siteConfig: SiteConfig = { ... head: ' <script>console.log("你好世界")</script>' ...}是的，这是自定义head标签的配置，本质上是硬插入HTML内容到页面的head部分。
你最好知道你插入内容的性质，尤其是
script标签，即使是这种纯静态站点也要注意安全与风险防范
常见用途
你可以使用head自定义功能来实现以下常见需求：
- 添加Google Analytics或百度统计等分析工具
- 插入自定义CSS样式
- 添加网站验证标签
- 设置网站图标(favicon)
- 加载第三方字体或CDN资源
实际示例
export const siteConfig: SiteConfig = { ... head: ` <!-- 网站图标 --> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- 自定义样式 --> <style> :root { --theme-color: #42b883; } </style>
<!-- 分析工具 --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script> ` ...}header的自定义
导航栏（header）是网站的重要组成部分，Stalux主题提供了灵活的配置选项，让你可以根据个人需求定制导航菜单。
基本配置
export const siteConfig: SiteConfig = { /** * 站点导航配置 */ //https://feathericons.com/ nav: [ { title: '首页', path: '/', icon: 'home' }, { title: '归档', path: '/archives', icon: 'archive' }, { title: '分类', path: '/categories', icon: 'folder' }, { title: '标签', path: '/tags', icon: 'tag' }, { title: '友链', path: '/links', icon: 'link' }, { title: '关于', path: '/about', icon: 'user' }, ],}这是导航栏的配置，默认最后一个是搜索，不用刻意设置，path选项可以填外链，icon图标名字来自于网站feathericons的开源组件图标。
外部链接配置
如果你想在导航栏添加外部链接，可以这样配置：
{ title: 'GitHub', path: 'https://github.com/yourusername', icon: 'github'}
留言评论