网站优化 log4.4_美化 NexT

发布： 分类： 评论： 0 本文字数： 842 阅读时长 ≈ 1 分钟

此次优化项目：

  1. 修改 NexT 主题布局和配色。

关键点：

修改主题配置文件

取消注释 NexT 主题配置文件中的 variable mixin style 行。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

创建并修改对应 styl 文件

在本地根目录的 \source\_data 下新建对应 3 个文件。

写法参照 NexT 主题目录 \source\css 中的文件。

选取配色

通过搜索中国传统颜色，选取了苍蓝作为了主要主题色，并分别向深浅递进了几个颜色。最终由深到浅分别是：钢蓝 —— 鸽蓝 —— 灰蓝 —— 苍蓝 —— 鸢尾蓝 —— 清水蓝。接着把正黑和正白替换成了莽丛绿和月白。具体颜色代码可参见下方。

1
2
3
4
5
6
7
8
#0f1423 // 钢蓝
#1c2938 // 鸽蓝
#21373d // 灰蓝
#134857 // 苍蓝
#158bb8 // 鸢尾蓝
#93d5dc // 清水蓝
#141e1b // 莽丛绿
#eef7f2 // 月白

参考