Keep 主题使用指南
XPoet 前端鼓励师
 2020-04-07 21:55:14    1.5k Words  6 Mins  

如你所见，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 订阅

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

    1
    2
    $ cd hexo-site
    $ 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. 修改主题配置文件 _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