定制 Keep 主题样式 ​

使用 Keep 主题的 inject 注入 CSS 功能，可以自由定制 Keep 主题的基础样式。

Keep 主题的 inject 注入功能配置指南

使用流程 ​

1. 在你 Hexo 项目的 source/css/ 目录下新建 custom.css 文件。

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

   yaml

   inject:
     enable: true
     css:
       - /css/custom.css

   1
   2
   3
   4
   

3. 重新运行 Hexo 项目，完成载入定制样式的 custom.css 文件。

   yaml

   hexo clean && hexo server --open

   1
   

定制基础样式 ​

定制全局默认字体大小 ​

• CSS 变量 --base-font-size

• 示例一 16px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --base-font-size: 16px;
  }

  1
  2
  3
  4
  5
  

• 示例二 20px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --base-font-size: 20px;
  }

  1
  2
  3
  4
  5
  

定制全局默认字体样式 ​

• CSS 变量 --base-font-family

• 示例一 STSong 宋体

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --base-font-family: STSong;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 STHeiti 楷体

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --base-font-family: STKaiti;
  }

  1
  2
  3
  4
  5
  

  

定制模块卡片的边框圆角 ​

• CSS 变量 --box-border-radius

• 示例一 10px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --box-border-radius: 10px;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 20px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --box-border-radius: 20px;
  }

  1
  2
  3
  4
  5
  

  

定制 Header 头部高度 ​

• CSS 变量 --header-height

• 示例一 60px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --header-height: 60px;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 80px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --header-height: 80px;
  }

  1
  2
  3
  4
  5
  

  

定制首屏的文字字体大小 ​

• CSS 变量 --first-screen-font-size

• 示例一 30px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-size: 30px;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 40px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-size: 40px;
  }

  1
  2
  3
  4
  5
  

  

定制首屏的图标字体大小 ​

• CSS 变量 --first-screen-icon-size

• 示例一 26px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-icon-size: 26px;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 36px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-icon-size: 36px;
  }

  1
  2
  3
  4
  5
  

  

定制首屏的文字颜色（亮色） ​

• CSS 变量 --first-screen-font-color-light

• 示例一 #003366

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-color-light: #003366;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 #006666

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-color-light: #006666;
  }

  1
  2
  3
  4
  5
  

  

定制首屏的文字颜色（暗色） ​

• CSS 变量 --first-screen-font-color-dark

• 示例一 #0099CC

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-color-dark: #0099CC;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 #00CCCC

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --first-screen-font-color-light: #00CCCC;
  }

  1
  2
  3
  4
  5
  

  

定制首页文章模块鼠标悬浮时的缩放级别 ​

• CSS 变量 --home-post-hover-scale

• 示例一 1

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --home-post-hover-scale: 1;
  }

  1
  2
  3
  4
  5
  

  

• 示例二 1.025

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --home-post-hover-scale: 1.025;
  }

  1
  2
  3
  4
  5
  

  

隐藏文章内容页面作者头像 ​

• CSS 变量 --post-author-avatar

• 隐藏前

  

• 隐藏后

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-author-avatar: none;
  }

  1
  2
  3
  4
  5
  

  

隐藏文章内容页面的文章创建时间 ​

• CSS 变量 --post-create-datetime

• 隐藏前

  

• 隐藏后

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-create-datetime: none;
  }

  1
  2
  3
  4
  5
  

  

隐藏文章内容页面的文章修改时间 ​

• CSS 变量 --post-update-datetime

• 隐藏前

  

• 隐藏后

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-update-datetime: none;
  }

  1
  2
  3
  4
  5
  

  

定制文章中的图片排列位置 ​

• CSS 变量 --post-img-align

• 示例一：居左 0 auto 0 0 （默认）

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-img-align: 0 auto 0 0;
  }

  1
  2
  3
  4
  5
  

  

• 示例二：居中 0 auto

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-img-align: 0 auto;
  }

  1
  2
  3
  4
  5
  

  

• 示例三：居右 0 0 0 auto

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --post-img-align: 0 0 0 auto;
  }

  1
  2
  3
  4
  5
  

  

定制页面内容区域的最大宽度 v3.8.5 ​

• CSS 变量 --page-content-max-width

• 示例一：900px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --page-content-max-width: 900px;
  }

  1
  2
  3
  4
  5
  

  

• 示例一：1000px

  css

  /* your-hexo/source/css/custom.css */
  
  :root {
      --page-content-max-width: 1000px;
  }

  1
  2
  3
  4
  5
  

  

使用自定义字体 ​

coming soon ...

使用自定义图标 ​

coming soon ...