自定义样式

    或者,你可以自定义你的 Vssue 样式。

    Vssue 的样式是通过 Stylus 编写的,源文件在 vssue/src/styles 目录。样式主文件是 vssue/src/styles/index.styl

    你可以提取并修改它们,来自定义你的 Vssue 样式。

    目前,Vssue 使用 作为 Markdown 样式。你可能注意到了所有的评论内容都被 class="markdown-body" 包裹着。

    不过,github-markdown-css 的 CSS 文件没有在 Vssue 的 stylus 代码中引入,而是在构建时拼接到编译好的 CSS 文件后面。

    因此,在你使用 Vssue 样式源文件的时候,记得引入 github-markdown-css,或者在 .markdown-body 下添加你的自定义样式。

    使用样式变量来自定义 Vssue

    举例来说,Vssue 默认使用一个“Vue 绿色”(#3eaf7c)作为主题颜色,并将其设置为 $vssue-theme-color 的默认值。你可以在引入 vssue/src/styles/index.styl 之前设置 $vssue-theme-color 的值来改变主题颜色。

    下面是一个示例 Stylus 文件,展示了如何把主题颜色改成 red。假设你在使用 webpackstylus-loader,可以通过 来解析模块:

    1. // 先设置变量
    2. $vssue-theme-color = red
    3. // 引入 Vssue 的样式主文件和 github-markdown-css
    4. @import '~vssue/src/styles/index'