@leecervan/vuepress-theme-pluto v1.0.0

扩展 frontmatter

评论

• 若配置了评论，默认会加载评论组件
• 全局关闭评论

themeConfig: {
  hideComment: true
}

• 局部关闭：在指定文档的 frontmatter 中设置

---
hideComment: true
---

修改样式

由于主题色的控制，主要依据修改 CSS 变量来实现，我将区分使用 CSS 变量和 Stylus 变量：

• CSS 变量：主要用于换肤，以及一些与颜色变换相关的变量，可在 themeConfig 中指定选项覆盖
• Stylus 变量：主要用于控制页面布局、与主题无关的样式，可在 palette.styl 中覆盖

Stylus 变量

• Vuepress预定义的 Stylus 变量

// 颜色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

• 本主题扩增的变量

CSS 变量

• 适配了深色模式，添加主题色定制

themeConfig: {
  // ...
  modeOptions: {
    mode: "auto",  // 默认的主题模式
    light: {
      // light 模式下的 css 变量
      '--text-color': '#242424'
    },
    dark: {
      // dark 模式下的 css 变量
      '--text-color': '#f8f8f8'
    }
  }
}

• 默认变量如下，你可以添加同名的选项来覆盖默认变量

Todo

• 定制侧边栏(sidebar)
• 定制首页(/)