04月27, 2020

如何优化 Firekylin 博客主题

Firekylin 是一款基于 ThinkJS 和 React 的博客系统,功能强大,界面美观。还可以自定义主题,在后台可以对主题实时修改。虽然这个功能对使用者来说非常友好,但对页面的加载速度是非常不利的。通过源代码可以看到 HTML/JS/CSS 代码都没有压缩,且 CSS 中通过 @import 依赖了其他好几个 CSS 文件,页面展示时都需要加载。虽然链接数在 HTTP2 协议下没什么大的问题,但终归看起来不太舒服。

@import url('base.css');
@import url('icon.css');
@import url('highlight.css');
@import url('sidebar.css');
@import url('header.css');
@import url('pagination.css');
@import url('article.css');
@import url('search.css');
@import url('footer.css');
@import url('comment.css');
@import url('responsive.css');

压缩 CSS/JS

压缩外链的 CSS/JS 很简单,有非常多可用的工具可以使用,如:uglifyJS、cssmin 等。

压缩 HTML

压缩 HTML 变得麻烦一些,因为 HTML 里还有模板语法,且内联的 style 标签里的 css 也还有模板语法。针对含有模板语法 HTML 压缩,世面上并没有特别好的办法,只能祭出我之前写的 flkit 了,https://github.com/stcjs/flkit

<style>
  {% if themeConfig.sidebarBackground or themeConfig.sidebarBackgroundColor %}
  #sidebar {
    {% if themeConfig.sidebarBackground %}
    background-image: url('{{themeConfig.sidebarBackground}}');
    background-size:cover;
    {% endif %}
    {% if themeConfig.sidebarBackgroundColor %}
    background-color: {{themeConfig.sidebarBackgroundColor}};
    {% endif %}
  }
  {% endif %}
  {% if themeConfig.sidebarColor %}
  #sidebar .profile span,
  #sidebar .buttons li a,
  #sidebar .buttons li a:hover {
    color: {{themeConfig.sidebarColor}};
  }
  {% endif %}
  {% if themeConfig.customCSS %}
    {{themeConfig.customCSS | safe}}
  {% endif %}
</style>

实现方案

有了对应的解决工具后,实现起来就比较简单了,整体使用之前开发的 stc 工作流系统,https://github.com/stcjs/stc 。为了不直接覆盖原有的主题文件,将编译后的文件放在一个新的文件夹里。如:默认主题为 firekylin,编译后的文件夹可以为 firekylin.build

在博客系统的根目录下建立 theme 目录,并建立下面三个文件:

build.sh

用来编译的 shell 文件

#!/bin/sh
rm -rf output;
rm -rf firekylin;
cp -r ../www/theme/firekylin .;
node stc.config.js;

sed -i 's/firekylin/firekylin.build/' output/firekylin/package.json;
rm -rf mkdir ../www/theme/firekylin.build;
mkdir ../www/theme/firekylin.build;
cp -r output/firekylin/* ../www/theme/firekylin.build;

stc.config.js

const stc = require("stc");
const htmlCompress = require("stc-html-compress");
const cssCombine = require("stc-css-combine");
const cssCompress = require("stc-css-combine");
const uglify = require("stc-uglify");

stc.config({
  include: ["firekylin"],
  product: "speech",
  tpl: {
    engine: "nunjucks",
    ld: ["{{", "{%", "{="],
    rd: ["}}", "%}", "=}"],
  },
});

stc.workflow({
  uglify: { plugin: uglify, include: /\.js$/, options: {} },
  cssCombine: { plugin: cssCombine, include: /\.css$/, options: {} },
  cssCompress: { plugin: cssCompress, include: /\.css$/, options: {} },
  htmlCompress: { plugin: htmlCompress, include: /\.html$/, options: {} },
});

stc.start(); // 启动工作流程

package.json

{
  "name": "firekylin-build",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "stc": "^2.0.14",
    "stc-css-combine": "^1.0.4",
    "stc-css-compress": "^1.0.1",
    "stc-html-compress": "^1.0.2",
    "stc-uglify": "^1.0.8"
  }
}

先通过 npm i 安装下依赖,然后执行 sh build.sh 命令,会生成 www/theme/firekylin.build 文件夹,该文件夹下存放了编译后的主题文件。然后在后台【外观设置】里启用 firekylin.build 主题就可以了。

如果在后台对主题 firekylin 进行了修改,则重新执行下 sh build.sh 即可。如果是其他的主题需要编译,则把上面的脚本里相关路径替换下就行。

本文链接:http://www.welefen.com/post/how-to-optimize-firekylin-theme.html

-- EOF --