主题配置

主题配置

通过修改 garden.config.js 文件来个性化你的数字花园。

配置文件说明

项目使用配置文件回退机制：

  1. 优先读取 garden.config.js（你的个人配置）
  2. 如果不存在，使用 garden.config.js.example（默认配置）

创建你的配置文件：

BASH
cp garden.config.js.example garden.config.js

网站基本信息

JAVASCRIPT
module.exports = {
  site: {
    title: "我的数字花园",           // 网站标题
    description: "知识的花园",       // 网站描述
    url: "https://yourdomain.com", // 网站地址
    author: "你的名字",             // 作者名称
    language: "zh-CN"              // 网站语言
  }
};

导航菜单

JAVASCRIPT
menu: [
  { name: "首页", url: "/" },
  { name: "标签", url: "/tags/" },
  { name: "分类", url: "/categories/" },
  { name: "关于", url: "/关于/" },
  { name: "联系", url: "/联系/" }
]

首页设置

JAVASCRIPT
homepage: {
  recentNotesCount: 5,           // 显示文章数量
  showRecentlyCreated: true,     // 显示最近创建
  showRecentlyUpdated: true,     // 显示最近更新
  customArticlePath: "_index.md" // 自定义首页文章
}

搜索功能

JAVASCRIPT
search: {
  enabled: true  // 是否启用搜索
}

主题样式

JAVASCRIPT
theme: {
  showHeadingMarkers: true,  // 显示标题等级标识
  showBackToTop: true        // 显示返回顶部按钮
}

评论系统

JAVASCRIPT
comments: {
  enabled: true,  // 是否启用评论
  title: "",      // 评论区标题
  html: `
    <!-- 在这里添加你的评论系统代码 -->
    <!-- 支持 Giscus、Artalk、Twikoo 等 -->
  `
}

Giscus 示例：

JAVASCRIPT
html: `
  <script src="https://giscus.app/client.js"
          data-repo="your-username/your-repo"
          data-repo-id="R_kgDOJ..."
          data-category="General"
          data-category-id="DIC_kwDOJ..."
          data-mapping="pathname"
          data-strict="0"
          data-reactions-enabled="1"
          data-emit-metadata="0" 
          data-input-position="bottom"
          data-theme="preferred_color_scheme"
          data-lang="zh-CN"
          crossorigin="anonymous"
          async>
  </script>
`

网站统计

JAVASCRIPT
analytics: {
  enabled: false,  // 是否启用网站统计
  html: `
    <!-- 在这里添加你的网站统计代码 -->
    <!-- 支持 Google Analytics、百度统计、Umami、51LA 等 -->
  `
}

Google Analytics 示例：

JAVASCRIPT
html: `
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  </script>
`

百度统计示例：

JAVASCRIPT
html: `
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?统计代码";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
`

构建优化

JAVASCRIPT
build: {
  minifyHtml: false  // 是否压缩HTML代码
}

启用HTML压缩的好处：

  • 移除HTML注释和多余空白字符
  • 减少文件大小，提升加载速度
  • 压缩内联CSS和JavaScript代码
  • 优化网站性能和SEO

注意： 开发阶段建议保持 false，部署时设为 true

应用配置

修改配置后重启开发服务器：

BASH
# 停止服务器（Ctrl+C）
# 重新启动
npm run serve

更多评论系统配置请参考相关文档或 README 文件中的详细说明。