主题配置
目录
主题色彩
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;
}