Skip to content
On this page

Keep 主题图文配置指南,目录结构跟主题配置文件 _config.yml 的配置项保持一一对应,方便大家对照使用。

style

style 配置项用于自定义配置 Keep 主题的样式,通过这里你可以配置出属于你自己独一无二的 Keep 主题博客站点。

yaml
style:
  primary_color: "#0066cc"
  logo: /images/logo.svg
  favicon: /images/logo.svg
  avatar: /images/avatar.svg
  font_size:
  font_family:

  hover:
    shadow: false
    scale: false

  first_screen:
    enable: false
    header_transparent: false
    background_img: /images/bg.svg
    description: Keep writing and Keep loving.
    font_color:
    hitokoto: false

  scroll:
    progress_bar: false
    percent: false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

primary_color

primary_color 用于设置博客站点主题色,支持 十六进制rgbrgba 颜色格式。
例如:#0066ccrgb(0, 102, 204)rgba(0, 102, 204, 0.8)、。

获取配色推荐:

logo 用于设置博客站点头部 LOGO,如下图。

image

favicon

favicon 用于设置博客站点 favicon 图标,如下图。

image

你可以使用 本地图片(即存储 keep/source/images/ 路径下的图片)或 图片外链 URL

  • 本地图片

    yaml
    favicon: /images/logo.svg
    
    1
  • 图片外链(推荐)

    yaml
    favicon: https://cdn.staticaly.com/gh/XPoet/image-hosting@master/hexo-theme-keep/logo.7ihwqpf2atg0.svg
    
    1

    图床推荐

    大家可以使用免费的 PicX 图床工具来存储自己的图片并生成图片外链。
    PicX:https://github.com/XPoet/picx

avatar

avatar 用于设置博客站点作者头像,将显示在文章内容页,如下图。

image

你可以使用 本地图片(即存储 keep/source/images/ 路径下的图片) 或 图片外链 URL

  • 本地图片

    yaml
    avatar: /images/avatar.svg
    
    1
  • 图片外链(推荐)

    yaml
    avatar: https://cdn.staticaly.com/gh/XPoet/image-hosting@master/hexo-theme-keep/logo.7ihwqpf2atg0.svg
    
    1

font_size

font_size 设置博客站点的初始字体大小,单位必须为 px 。该配置项可以不填,如果不填将使用 Keep 主题内置的初始字体大小 15.2px

yaml
# 字体设置示例
font_size: 18px
1
2

font_family

font_family 设置博客站点的字体样式,该配置项可以不填,如果不填将使用 Keep 主题内置的字体样式。

跟 CSS 设置 font-family 规则一致

yaml
# 设置:楷体
font_family: STKaiti 

# 设置:宋体,黑体
font_family: STSong, STHeiti
1
2
3
4
5
  • 楷体字体示例:

    image

  • 宋体字体示例:

    image

hover

hover 用于设置鼠标悬浮时的样式(例如悬浮在主页文章模块、TOC 目录模块、按钮等),可分别开启 shadowscale 效果。

shadow

shadow 设置阴影加重效果,可选值:truefalse

image

scale

scale 设置缩放效果,可选值:truefalse

image

first_screen

first_screen 是 Keep 主题 v3.0.0 新增的首屏模块,开启后将显示在博客站点首页的第一视野(故称首屏)。

enable

enable 设置是否开启首屏,可选值:truefalse

  • true 开启首屏 image

  • false 不开启首屏 image

header_transparent

header_transparent 用于在首屏模块开启状态下设置头部是否透明,可选值:truefalse

  • header_transparent: true 透明状态

    image

  • header_transparent: false 不透明状态

    image

background_img

background_img 设置首屏背景图片,可使用 本地图片图片外链 URL

这里建议大家的高清背景图片用 TinyPNG 压缩一下后再使用,可有效提高页面加载速度。

description

description 设置首屏描述,支持设置两行,换行符 ||

设置两行的首屏描述配置示例:

yaml
description: 黄色的森林分出两条路 || 我选择人迹更少的那一条,从此决定我一生的道路。
1
  • 一行的首屏描述 image

  • 两行的首屏描述 image

font_color

font_color 设置首屏描述的字体颜色,可以为空,不填则使用 Keep 主题内置颜色。

hitokoto v3.4.6

hitokoto 是 Keep 主题 v3.4.6新增的首屏描述一言功能,可选值:truefalse

开启之后,在每次进入博客站点刷新页面都会呈现出不一样的首屏描述。

一言案例展示:

image

image

scroll

scroll 设置页面滚动时的样式。

progress_bar

progress_bar 页面滚动时在网站顶部显示滚动进度条,可选值:truefalse

image

percent

percent 页面滚动时在右下角工具栏显示滚动百分比,可选值:truefalse

image

小提示

鼠标移到百分比按钮处会显示向上箭头图标,点击即可回到顶部

image

Released under the GPL-3.0 License