Advanced Customization Tutorial

本教程将教您如何深度定制 Butterfly 主题。

自定义 CSS

您可以在 source/_data/styles.styl 文件中添加自定义样式：

// 自定义样式
.custom-class
  color: #49b1f5
  font-size: 16px

修改布局

Butterfly 使用 EJS 模板，您可以在 themes/butterfly/layout 目录下找到所有模板文件。

修改头部

编辑 themes/butterfly/layout/includes/header/index.ejs 文件。

修改页脚

编辑 themes/butterfly/layout/includes/footer.ejs 文件。

添加第三方插件

添加评论系统

在 _config.butterfly.yml 中配置：

comments:
  use: valine
  valine:
    appId: your-app-id
    appKey: your-app-key

添加统计代码

在 _config.butterfly.yml 中配置：

inject:
  head:
    - <script src="your-analytics-script.js"></script>

自定义颜色主题

在 _config.butterfly.yml 中修改颜色配置：

theme_color:
  enable: true
  main: "#49b1f5"
  paginator: "#00c4b6"
  button_hover: "#ff7242"

总结

通过这些高级定制技巧，您可以打造出独一无二的博客主题。