Link

主题配置

目录

  1. 主题配置
    1. 主题色彩
    2. 细节色彩
    3. 自定义风格Override styles

主题色彩

New

Just the Docs 支持两种色调,深色和浅色。

可以通过修改根目录下的 _config.yml文件中的 color_scheme 参数来调整:

Example

# Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark"

网站也内置了一个 JS 函数,可以切换主题颜色,在网页中插入下方按钮即可:

细节色彩

如果想深度定义网站的色彩,可以通过编辑_sass/custom/custom.scss完成。此配置文件中可以配置字体、颜色、间隔等选项,如果想覆盖默认配置,只需取消每行前面的双斜杠 //

例如,将链接由默认的紫色改为蓝色,修改 _sass/custom/custom.css 中的 $link-color参数,取消双斜杠,将其改为 $blue-000

示例

// ...
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
$link-color: $blue-000;
//
// ...

注意: 建议修改 custom.scss 来完成色彩的配置,强烈不建议直接修改 _sass/support/variables.scss 文件。

自定义风格Override styles

如果觉得默认设置不够满意,你也可以自定义 CSS文件, 编辑 _sass/overrides.scss 即可。

示例

// Print-only styles.
@media print {
  .side-bar, .page-header { display: none; }
  .main-content { max-width: auto; margin: 1em;}
}

或者本博客用的标题主题:


h1 {
    padding-bottom: .3em;
    font-size: 1.75em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
    color: rgb(0, 113, 172);
}
h2 {
   padding-bottom: .3em;
    font-size: 1.5em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
    color: rgb(3, 148, 210);
}
h3 {
    font-size: 1.25em;
    line-height: 1.43;
    color: rgb(214, 181, 31);
}
h4 {
    font-size: 1.15em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}