宝塔面板 Nginx 启用 pagespeed 模块

  1. 转到软件商店 - 运行环境,安装 Nginx,方式选择编译安装,点击添加自定义模块。
  2. 填写模块名称和模块描述;模块参数:
1
--add-module=/www/server/ngx_pagespeed
  1. 填写前置脚本:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
cd /www/server
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.zip
unzip v1.13.35.2-stable.zip
rm v1.13.35.2-stable.zip
NPS_DIR=$(find . -name "*pagespeed-ngx-1.13.35.2-stable" -type d)
mv $NPS_DIR ngx_pagespeed
cd ngx_pagespeed
NPS_RELEASE_NUMBER=${1.13.35.2-stable/stable/}
PSPL_URL=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}x64.tar.gz
[ -e scripts/format_binary_url.sh ]
PSPL_URL=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${PSPL_URL}
tar -xzvf $(basename ${PSPL_URL})
rm $(basename ${PSPL_URL})
  1. 勾选模块,点击提交。安装好之后可以执行 nginx -V,检查是否有 --add-module=/www/server/ngx_pagespeed,如果有,说明安装成功。

之后,我可能会写一篇关于配置 ngx_pagespeed 的文章,敬请期待。

HTML 启用赫蹏

赫蹏是一款中文排版工具。

全局

  1. 在页面的 </head> 标签前引入 heti.css 样式文件:
1
<link rel="stylesheet" href="//cdn.casecori.top/npm/heti/umd/heti.min.css">
  1. 在要作用的容器元素上增加 class="heti" 的类名:
1
2
3
4
5
<article class="entry heti">
<h1>我的世界观</h1>
<p>有钱人的生活就是这么朴实无华,且枯燥。</p>
……
</article>

增强脚本

在页面的 </body> 标签前引入 JavaScript 脚本后初始化即可:

1
2
3
4
5
<script src="//cdn.casecori.top/npm/heti/umd/heti-addon.min.js"></script>
<script>
const heti = new Heti('.heti');
heti.autoSpacing();
</script>

古文

1
<div class="heti heti--ancient">……</div>

诗词

  • 诗词:
1
2
3
4
5
6
7
8
9
<div class="heti heti--poetry">
<h2>九月九日忆山东兄弟<span class="heti-meta heti-small">[唐]<abbr title="号摩诘居士">王维</abbr></span></h2>
<p class="heti-x-large">
独在异乡为异客<span class="heti-hang"></span><br>
每逢佳节倍思亲<span class="heti-hang"></span><br>
遥知兄弟登高处<span class="heti-hang"></span><br>
遍插茱萸少一人<span class="heti-hang"></span>
</p>
</div>
  • 诗节:在古文版式 <div class="heti heti--ancient"> 中,为诗句添加名为 heti-verse 的 class 可以将其居中显示:
1
2
3
4
5
6
7
8
9
<div class="heti heti--ancient">
<h2>一剪梅·红藕香残玉簟秋<span class="heti-meta heti-small">[宋]<abbr title="号易安居士">李清照</abbr></span></h2>
<p class="heti-verse heti-x-large">
红藕香残玉簟秋。轻解罗裳,独上兰舟<span class="heti-hang"></span><br>
云中谁寄锦书来,雁字回时,月满西楼<span class="heti-hang"></span><br>
花自飘零水自流。一种相思,两处闲愁<span class="heti-hang"></span><br>
此情无计可消除,才下眉头,却上心头<span class="heti-hang"></span>
</p>
</div>

行间注

为容器元素 <div class="heti"> 添加名为 heti--annotation 的 class 后,搭配 <ruby> 元素即可实现整齐的行间注效果:

1
<div class="heti heti--annotation">……</div>

多栏排版

为容器元素 <div class="heti"> 添加名为 heti--columns-2 的 class 即可实现双栏排版:

1
<div class="heti heti--columns-2">……</div>
方式 对应类名 可选数值
按栏目数量 heti–columns-3 2,3,4
按每栏行宽 heti–columns-16em 16em,20em,24em,……+4em,……,48em

竖排排版

1
<div class="heti heti--vertical">……</div>