Keep 主题配置指南
Keep Team Lv2

本文详细讲解 Keep 主题配置文件 _config.yml 如何使用,附带图文教程,目录对应着 _config.yml 的配置项,方便查阅。

在使用过程中有任何疑问,请在评论区留言。

base_info

1
2
3
4
base_info:
title: Keep
author: Keep team
url: https://keep.xpoet.cn/

请在此处正确填写你的博客网站基本信息:

  • title 你的网站名称(将显示在网站头部,如下图)
    image

  • author 你的昵称(将显示在网站底部和文章内容页,如下图)
    image
    image

  • url 你的博客网站域名

style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
style:
# Theme primary color
primary_color: "#0066CC"

# Image align position, value: left | center
img_position: left

# Left side width
left_side_width: 260px

# Mouse hover
hover:
shadow: true # shadow effect when the mouse hover
scale: false # scale effect when the mouse hover

# First screen
first_screen:
enable: true
description: Welcome to use Hexo theme Keep

此处设置博客网站基本样式:

primary_color

设置网站主题色,支持 rgb、rgba、十六进制格式,例如:rgb(0, 102, 204)rgba(0, 102, 204,0.8)#0066cc。建议使用 Web 安全色

img_position

设置文章内容页的图片排列位置,默认 left(靠左),可选:leftcenter(居中)。

left_side_width

  • 设置左侧 TOC 目录结构模块的宽度,一般情况下,你无需更改。如需设置,请保持单位为 px
  • 示例:
    image

hover

设置鼠标悬浮时的样式,可开启 shadowscale 效果。

  • shadow 阴影效果
  • scale 缩放效果

first_screen

Keep v3.0.0 新增的网站首屏模块,开启后将显示在网站首页。

  • enable 是否开启首屏
  • background_img 首屏背景图片
  • description 首屏描述
  • 首屏开启状态示例:
    image

social_contact

1
2
3
4
5
6
7
8
9
social_contact:
enable: false
links:
github: # your GitHub URL
wechat: # your WeChat QR-Code URL
weibo: # your WeiBo URL
twitter: # your twitter URL
facebook: # your facebook URL
email: # your email

配置社交网络链接。注意:仅在首屏开启状态下才生效!
image

1
2
3
4
5
6
7
8
menu:
Home: /
Archives: /archives
# Categories: /categories
# Tags: /tags
# Links: /links
# About: /about
# ...

网站头部导航菜单,如需新增导航菜单,按上面格式填写,同时需要创建相对应的 Hexo 页面。

image

新创建的 Hexo 项目并没有 categories(分类)、tags(标签)、about(关于)、links(友链)等页面,需要自己手动创建。

以创建「 about(关于)」页面为例:

  1. 在 Hexo 博客目录下执行命令 hexo new page about ,即可在 source 目录下生成 about 文件夹。

  2. 在 Keep 主题配置文件的 menu 下添加 about

    1
    2
    3
    4
    5
    6
    7
    menu:
    Home: /
    Archives: /archives
    # Categories: /categories
    # Tags: /tags
    # Links: /links
    About: /about
  3. 打开博客目录下 /source/about/index.md 文件填写内容,即可显示在页面上。
    支持 Markdown 和 HTML 格式;comment: true 表示该页面开启评论功能。
    参考如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: about
    date: 2020-03-19 14:59:53
    comment: true
    ---

    ## About me

    - XPoet「 Keep core developer 」...
    ...
    ...
    ...

    注意自动生成的 title 属性不要修改!例如:title: about 无需修改!

rss

1
2
rss:
enable: false
  1. 启用 RSS 订阅功能,需先在 Hexo 博客根目录下安装插件 hexo-generator-feed

    1
    npm install hexo-generator-feed
  2. 在 Hexo 配置文件 _config.yml 增加如下配置项。

    1
    2
    3
    4
    5
    6
    # Feed Atom
    # npm install hexo-generator-feed
    feed:
    type: atom
    path: atom.xml
    limit: 20
  3. RSS 订阅功能开启后,将会在右下角工具按钮组里面显示RSS 按钮
    image

comment

Keep 主题目前内置两款评论插件:Valine 和 Gitalk,你只能使用其中一款,如果两款评论插件的 enable 都设为了 true,将使用 Valine。

Valine

Valine 诞生于 2017 年 8 月 7 日,是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。

详情查看:

在 Keep 中如何使用:

  1. 请先 登录注册 LeanCloud,进入控制台后点击左下角创建应用。

    image

  2. 应用创建好以后,进入刚刚创建的应用,选择左下角的设置 > 应用Key,然后就能看到你的 APP IDAPP Key 了。

    image

  3. 在 Keep 主题配置文件填写必要参数信息(APP ID、APP Key 等),示例如下。

    1
    2
    3
    4
    5
    6
    valine:
    enable: true
    appid: ih2nzxxxxxxxxxxxxxxxxxxxxxx
    appkey: gdf6666666666666666666666666
    meta: ["nick", "mail", "link"]
    placeholder: 😜 尽情吐槽吧~
    • appid 必填。
    • appkey 必填。
    • meta 可填,表示评论框的要填写的信息(昵称、邮箱、链接)。
    • placeholder 可填,表示评论框的在还没输入内容时的显示的信息。
  4. Valine 评论插件效果图。
    image

Gitalk

Gitalk,一个基于 Github Issue 和 Preact 开发的评论插件。

详情查看:

在 Keep 中如何使用:

  1. 新建 GitHub OAuth App
    注册或登录 GitHub,创建新的 OAuth App,链接:https://github.com/settings/applications/new ,其中 Homepage URLAuthorization callback URL 均填写自己的域名即可。

    Client IDClient Secret 保存起来。

    image

  2. 新建 GitHub 仓库
    注册或登录 GitHub,创建一个新的仓库(repository),并打开 Issues(自己手动增加一个 Issue),用于存储评论内容。

  3. 把自己的 GitHub 用户名称仓库名称 、OAuth App 的 Client IDClient Secret 分别填写在主题配置文件里,如下示例。

    1
    2
    3
    4
    5
    6
    gitalk:
    enable: true
    github_id: XPoet
    repository: ils-site-comments
    client_id: cdfffffffffffffffffffff
    client_secret: f4b55555555555555555555555555555
  4. Gitalk 评论插件效果图。
    image

website_count

Keep 主题内置“不蒜子”计数,无需额外配置,选择你要开启的计数项即可。

1
2
3
4
5
busuanzi_count:
enable: true
site_uv: true
site_pv: true
page_pv: true
  • site_uv 网站访问人数
  • site_pv 网站总访问量
  • page_pv 文章阅读次数

计数效果图如下:
image
image

博客网站文章的搜索功能,非常实用,强烈建议开启。开启后,右上角将出现搜索按钮

image

在 Keep 主题中如何使用:

  1. 启用本地搜索功能,需在 Hexo 博客根目录下安装插件 hexo-generator-searchdb

    1
    npm install hexo-generator-searchdb
  2. 修改主题配置文件 _config.yml 的 local_search 配置项。

    1
    2
    3
    4
    5
    local_search:
    enable: true
    trigger: auto
    unescape: false
    preload: true
    • trigger 搜索触发方式,输入关键字后会触发搜索,可选 auto(自动)或 manual(手动)。

      • auto 每输入或删除一个字符后,自动触发搜索。
      • manual 每输入或删除一个字符后,需要按回车键触发搜索。
    • unescape 转义 HTML 字符串为可读字符串。

    • preload 在页面加载时预加载搜索数据。

  3. 搜索功能效果图。

    image

post_wordcount

文章字数统计和阅读时长统计功能。

如何使用:

  1. 如需启用,请先安装 Hexo 插件:hexo-wordcount。
    在博客根目录下使用 npm 命令安装: npm i hexo-wordcount --save

  2. 在主题配置文件中开启。

    1
    2
    3
    4
    post_wordcount:
    enable: true
    wordcount: true
    min2read: true
    • wordcount 文章字数统计。
    • min2read 阅读时长统计。
  3. 效果图。
    image

home_article

首页文章块底部的显示设置。

1
2
3
4
5
6
7
home_article:
category:
enable: true
limit: 3
tag:
enable: true
limit: 5
  • enable 表示是否开启显示。
  • limit 表示显示的最大个数。
  • 效果图。
    image

code_copy

代码复制功能。

1
2
3
code_copy:
enable: true
style: default # values: default | mac
  • enable 是否开启。

  • style 代码复制的样式,可选 defaultmac

    • default 效果图
      image

    • mac 效果图
      image

side_tools

是否开启右下角的工具按钮。

1
2
side_tools:
enable: true
  • 未展开状态
    image

  • 展开状态
    image

back2top

一键快速 回到顶部到达底部 功能。

1
2
back2top:
enable: true
  • 点击 ↑ 上箭头 即可快速回到网站顶部
  • 点击 ↓ 下箭头 即可快速到达网站底部

image

toc

文章目录结构,非常实用的功能,方便查看文章结构和跳转,强烈建议开启。

1
2
3
4
5
6
7
8
toc:
enable: true

# Automatically add list number to toc.
number: true

# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: true
  • number 目录结构是否显示数字序号。

  • expand_all 是否展开所有目录结构。

    • expand_all: true 初始已展开所有的目录结构。
    • expand_all: false 边滚动页面边展开对应的位置的目录。
1
2
copyright_info:
enable: true

文章内容页的版权信息模块。

image

cdn

1
2
cdn:
enable: true

开启资源 CDN 加速。

1
2
footer:
since: 2020

网站最底部的信息展示设置。

  • since 设置网站起始年份
  • 示例
    image
  • 本文标题:Keep 主题配置指南
  • 本文作者:Keep Team
  • 创建时间:2020-11-18 10:00:00
  • 本文链接:https://keep.xpoet.cn/2020/11/Keep-主题配置指南/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论