Keep 主题使用指南
XPoet Lv3

如你所见,Keep 界面设计十分简洁、清爽,但功能齐全、不失优雅,这正是 Keep 的开发理念。也曾尝试过花里胡哨,发现不仅配置繁琐、也容易审美疲劳,而且背驰了写博客的初衷,记录生活、展示文字,应该才是搭建博客网站的最终追求,为此 Keep 主题应运而生。简约轻快、化繁为简、配置简单、突出内容、长期维护,如果你也喜欢或认可这些主题特点,一起来探索吧~

Features 功能特性

Completed 已完成

  • 恰到好处的留白,简约大气
  • 响应式设计,适配平板/手机
  • 日间/夜间模式自由切换
  • 多种代码高亮方案
  • 多语言,支持中/英文
  • 内置多款评论插件
  • 支持全站文章搜索
  • 支持文章顶置
  • 代码块一键复制
  • TOC 目录结构
  • RSS 订阅
  • 网站 UV 和 PV 统计
  • 文章阅读次数统计
  • 文章字数统计
  • 文章阅读时长统计
  • 大图查看器
  • 文章版权信息
  • 在线更改字号
  • 页面滚动进度条提示
  • 一键快速回到顶部
  • 支持 CDN
  • 支持 PJAX

Unfinished 未完成

  • 图片懒加载
  • 文章点赞功能
  • 代码块折叠
  • 在线更改字体
  • 打赏功能
  • ……

Get start 快速开始

在开始使用 Keep 主题之前,建议你先阅读 「Easy Hexo 团队」撰写的 Hexo 教程!
链接:https://easyhexo.com/

Install 安装

  • 使用 Git SSH

    1
    2
    $ cd hexo-site
    $ git clone --depth=1 https://github.com/XPoet/hexo-theme-keep themes/keep

    该方式获取的是 Master 分支最新代码,包含该主题最新的功能,但无法保证完全稳定。

  • 使用 NPM

    1
    2
    $ cd hexo-site
    $ npm install hexo-theme-keep
  • 下载 Release 版本

    点击此处进入该主题 Releases 版本下载页面,下载最新版本,解压到 Hexo 根目录下的 themes 文件夹里并重命名为 keep

Enable 启用

修改 Hexo 根目录下的 _config.yml 配置文件,将 theme 设置为 keep

1
theme: keep

Update 更新

  • 通过 Git 更新到最新的 master 分支

    1
    2
    $ cd themes/keep
    $ git pull
  • 通过 NPM 安装最新版本

    1
    2
    $ cd hexo-site
    $ npm update hexo-theme-keep
  • 下载 主题最新 Release 版本

How to use 如何使用

Configuration 配置

关于主题配置文件 config.yml 如何使用,请参考 Keep 主题配置指南

如遇到无法解决的问题,可以给作者提 Issue

Comment 评论

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

Valine

前往 https://github.com/xCss/Valine 查看 Valine 如何使用,获取必要的参数,填写在配置文件里。

Gitalk

  1. 新建 GitHub OAuth App

    Homepage URL 和 Authorization callback URL 均填写自己的域名(例如:https://keep.xpoet.cn/)即可。

  2. 新建 GitHub 仓库并开启 Issues(自行随便填写一条 Issue 即可开启),用于存储评论内容。

  3. 把自己的 GitHub 用户名称、仓库名称 、OAuth App 的 Client ID 、Client Secret 分别填写在 Keep 的主题配置文件里。

前往 https://github.com/gitalk/gitalk 查看 Gitalk 更多信息。

Post top 文章顶置

实现文章顶置功能,需在文章页添加 sticky 属性,sticky 值越大,顶置的文章越靠前,参考如下。

1
2
3
4
5
6
7
---
title: Hexo 主题 Keep 使用指南
date: 2020-04-07 21:55:14
tags: [Hexo]
categories: [Hexo]
+ sticky: 9999
---

Local search 本地搜索

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

    1
    $ npm install hexo-generator-searchdb
  2. 在 Hexo 配置文件 _config.yml 增加如下配置(可选)。

    1
    2
    3
    4
    5
    6
    7
    # Search
    ## https://github.com/theme-next/hexo-generator-searchdb
    search:
    path: search.json
    field: post
    content: true
    format: striptags
  3. 修改主题配置文件 _config.yml

    1
    2
    3
    4
    5
    local_search:
    enable: true
    trigger: auto # values: auto | manual
    unescape: false
    preload: true

    RSS 订阅

  4. 启用 RSS 订阅功能,需先在 Hexo 根目录下安装插件 **hexo-generator-feed**。

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

    1
    2
    3
    4
    5
    6
    # Feed Atom
    # npm install hexo-generator-feed
    feed:
    type: atom
    path: atom.xml
    limit: 20
  6. 修改主题配置文件 _config.yml

    1
    2
    rss:
    enable: true

    Create page 创建页面

注意:Hexo 初始并没有 categories(分类)、about(关于)、links(友链)、tags(标签) 等页面,需要自己手动创建。

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

  1. 在 Hexo 根目录下使用命令,即可创建 about 文件夹。

    1
    2
    $ cd hexo-site
    $ hexo new page about
  2. 创建成功后,打开博客目录下 /source/about/index.md 文件,即可填写自己的内容。
    支持 Markdown 和 HTML 格式;comments: true 表示该页面开启评论功能。

    参考如下示例:

    1
    2
    3
    4
    5
    6
    7
    ---
    title: about
    date: 2020-03-19 14:59:53
    + comments: true
    ---

    content...
  3. 在主题配置文件启用 about 导航菜单。

    1
    2
    3
    4
    5
    6
    7
    8
    # navigation menu
    menu:
    Home: /
    Archives: /archives
    # Category: /category
    # Links: /links
    About: /about
    # ...

    其他页面的创建方式跟「关于」页面类似,此处不再赘述。

MathJax 数学公式

如果要在文章中显示数学公式,可以使用插件 **hexo-filter-mathjax**,详情参考:https://github.com/next-theme/hexo-filter-mathjax/

或按下列步骤完成相关配置:

  1. 在 Hexo 博客根目录下安装插件 **hexo-filter-mathjax**。

    1
    2
    $ cd hexo-site
    $ npm install hexo-filter-mathjax
  2. 在 Hexo 配置文件 _config.yml 增加如下配置。

    1
    2
    3
    4
    5
    6
    7
    mathjax:
    tags: none # or 'ams' or 'all'
    single_dollars: true # enable single dollar signs as in-line math delimiters
    cjk_width: 0.9 # relative CJK char width
    normal_width: 0.6 # relative normal (monospace) width
    append_css: true # add CSS to every page
    every_page: false # if true, every page will be rendered by mathjax regardless the `mathjax` setting in Front-matter of each article
  3. 在文章页添加 mathjax: true,至此,就可以在该页面中写公式了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: MathJax Test
    date: 2020-09-12 16:02:07
    tags: MathJax
    categories: MathJax
    mathjax: true
    ---
    $$
    i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
    $$

    Contribution 贡献

欢迎各种形式的贡献,包括但不限于:美化样式、增加功能、改进代码、 修复 Bug 等。

请查看 Keep 代码贡献指南

Feedback 反馈

在使用该主题过程中,如果遇到问题,请仔细阅读使用文档,或者给作者提 Issue

License 许可

MIT Copyright (c) 2020 XPoet

参考链接

  • Post title:Keep 主题使用指南
  • Post author:XPoet
  • Create time:2020-04-07 21:55:14
  • Post link:https://xpoet.cn/2020/04/Keep-主题使用指南/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments