Keep 主题使用手册

Appearance

inject v3.7.0 ​

inject 是 Keep 主题 v3.7.0 新增的配置项，用于在 Keep 主题中注入自定义的 CSS 和 JS 文件，该功能非常强大，具备高度定制化 Keep 主题的能力。

yaml
inject:
  enable: false  # Option values: true | false
  css:
    -
  js:
    -

enable ​

enable 用于是否开启 inject 功能，可选值：true 或 false。

css ​

css 填写需要注入的 CSS 文件路径，支持填写一个或多个。

注入步骤 ​

  1. 在你 Hexo 项目的 source 目录下新建 css 目录，所有需要注入的自定义 CSS 文件都必须存放在 source/css/ 目录下。

    image

  2. 在主题配置文件 keep.yml 中填写需要注入的 CSS 文件路径。

    yaml
    inject:
  enable: true
  css:
    - /css/custom-1.css
    - /css/custom-2.css
    # - ...

  3. 重新运行一下 Hexo 项目即可查看到已注入成功的 CSS 文件。

    yaml
    hexo clean && hexo server --open

    image

CSS 变量 v3.7.1 ​

Keep 主题 v3.7.1 及之后版本，会逐步把 CSS 样式相关的配置项抽离替换成 CSS 变量，通过注入自定义的 CSS 文件的方式，你可以很轻松修改这些 CSS 变量，从而实现高度修改主题样式。

主题内置的 CSS 变量 ​

global font ​
  • --base-font-size 设置默认的字体大小
  • --base-font-family 设置默认的字体样式
page ​
  • --page-content-max-width 设置页面内容区域的最大宽度 v3.8.5
box style ​
  • --box-border-radius 设置模块卡片的边框圆角
  • --header-height 设置 Header 头部高度
  • --header-shrink-height 设置 Header 头部收缩时的高度
  • --header-backdrop-filter-blur 设置 Header 头部的背景毛玻璃效果
  • --header-title-font-size 设置 Header 头部的 Title 字体大小 v4.0.0
  • --header-title-font-family 设置 Header 头部的 Title 字体样式 v4.0.0
  • --header-title-font-family 设置 Header 头部的 Title 字体样式 v4.0.0
  • --header-menu-icon 设置 Header 头部是否显示导航菜单的图标 v4.2.0
first screen ​
  • --first-screen-font-size 设置首屏的文字字体大小
  • --first-screen-icon-size 设置首屏的图标字体大小
  • --first-screen-icon-color-light 设置首屏的图标颜色（白昼模式） v4.0.0
  • --first-screen-icon-color-dark 设置首屏的图标颜色（暗黑模式） v4.0.0
  • --first-screen-font-color-light 设置首屏的文字颜色（白昼模式）
  • --first-screen-font-color-dark 设置首屏的文字颜色（暗黑模式）
  • --first-screen-header-font-color-light 设置首屏开启状态下的头部的字体颜色（白昼模式） v4.0.0
  • --first-screen-header-font-color-dark 设置首屏开启状态下的头部的字体颜色（暗黑模式） v4.0.0
  • --first-screen-font-offset 设置首屏描述文字 Y 轴的偏移值 v4.0.0
home page ​
  • --home-post-hover-scale 设置首页文章块的缩放比例
post page ​
  • --post-img-align 设置文章中的图片排列位置
  • --post-author-avatar 是否显示文章页的作者头像
  • --post-author-name 是否显示文章页的作者名称 v4.0.7
  • --post-create-datetime 是否显示文章页的文章创建时间
  • --post-update-datetime 是否显示文章页的文章更新时间

...
...

注意：此处并未全部列举 Keep 主题内置的 CSS 变量，点击查看更多 >>

CSS 变量使用示例 ​

css
/* 注入 CSS 文件修改 CSS 变量使用示例 */

:root {
   /* 修改全局默认字体大小 */
   --base-font-size: 16px;

   /* 修改全局默认字体样式 */
   --base-font-family: STSong, STHeiti;

   /* 设置模块卡片的边框圆角 */
   --box-border-radius: 10px;

   /* 设置 Header 头部高度 */
   --header-height: 60px;

   /* 
      设置 Header 头部收缩时的高度
      必须小于 Header 头部正常状态的高度
   */
   --header-shrink-height: 50px;

   /* 设置 Header 头部的背景毛玻璃效果程度 */
   --header-backdrop-filter-blur: 5px;

   /* 设置 Header 头部的 Title 字体大小 */
   --header-title-font-size: 30px;

   /* 设置 Header 头部的 Title 字体样式 */
   --header-title-font-family: Optima-Regular, Optima, PingFang SC;

   /* 
      设置 Header 头部是否显示导航菜单的图标
      显示：inline-flex（默认） 
      不显示：none 
    */
   --header-menu-icon: inline-flex;

   /* 设置首屏的文字字体大小 */
   --first-screen-font-size: 20px;

   /* 设置首屏的图标字体大小 */
   --first-screen-icon-size: 30px;

   /* 设置首屏的文字颜色（白昼模式） */
   --first-screen-font-color-light: rgba(224, 41, 72, 0.9);

   /* 设置首屏的文字颜色（暗黑模式） */
   --first-screen-font-color-dark: rgba(76, 124, 231, 0.87);

   /* 设置首屏的图标颜色（白昼模式） */
   --first-screen-icon-color-light: rgba(190, 37, 225, 0.9);

   /* 设置首屏的图标颜色（暗黑模式） */
   --first-screen-icon-color-dark: rgba(65, 178, 224, 0.9);

   /* 设置首屏开启状态下的头部的字体颜色（白昼模式） */
   --first-screen-header-font-color-light: #ddd;

   /* 设置首屏开启状态下的头部的字体颜色（暗黑模式） */
   --first-screen-header-font-color-dark: #333;

   /* 设置首屏描述文字 Y 轴的偏移值 */
   --first-screen-font-offset: 100px;

   /* 设置首页文章模块鼠标悬浮时的缩放级别（默认 1） */
   --home-post-hover-scale: 1.025;

   /* 隐藏文章内容页面作者头像 */
   --post-author-avatar: none;

   /* 隐藏文章内容页面作者名称 */
   --post-author-name: none;

   /* 隐藏文章内容页面的文章创建时间 */
   --post-create-datetime: none;

   /* 隐藏文章内容页面的文章修改时间 */
   --post-update-datetime: none;

   /* 
      设置文章中的图片排列位置
      居左：0 auto 0 0（默认）
      居中：0 auto
      居右：0 0 0 auto
   */
   --post-img-align: 0 auto 0 0;

   /* 设置页面内容区域的最大宽度（默认 928px） */
   --page-content-max-width: 1000px;
}

js ​

填写需要注入的 JS 文件路径，支持填写一个或多个。

注入步骤 ​

  1. 在你 Hexo 项目的 source 目录下新建 js 目录，所有需要注入的自定义 JS 文件都必须存放在 source/js/ 目录下。

    image

  2. 在主题配置文件 keep.yml 中填写需要注入的 JS 文件路径。

    yaml
    inject:
  enable: true
  js:
    - /js/custom-1.js
    - /js/custom-2.js
    # - ...

  3. 重新运行一下 Hexo 项目即可查看到已注入成功的 JS 文件。

    yaml
    hexo clean && hexo server --open

    image

使用场景 ​

通过注入自定义 JS 文件，能够实现的功能非常多，使用场景丰富，前提你需要掌握一定的 JavaScript 和 CSS 编程知识。

这里展示如何通过注入 JS 文件给网站底部增加 网站运行时长 的功能：

  1. 注入的自定义 JS 代码

    js
    if (!window.runningTime) {
    window.runningTime = () => {
        const infoBox = document.querySelector('.footer .website-info-box')
        const tempDiv = document.createElement('div');
        tempDiv.setAttribute('class', 'info-item default')
        infoBox.appendChild(tempDiv)

        const since = '2020-01-01 00:00:00'
        const formatTimestamp = (timestamp) => {
            const now = Date.now()
            const timeDiff = Math.abs(now - timestamp)
            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
            const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60))
            const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000)
            return `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`
        }

        setInterval(() => {
            tempDiv.innerHTML = '本站已安全运行 ' + formatTimestamp(new Date(since).getTime())
        }, 1000)
    }
}
window.runningTime()

  2. 效果

    image

Released under the AGPL-3.0 License

Copyright © 2020-present XPoet & Keep Team