宝塔面板 Nginx 启用 pagespeed 模块
- 转到软件商店 - 运行环境,安装 Nginx,方式选择编译安装,点击添加自定义模块。
- 填写模块名称和模块描述;模块参数:
1
| --add-module=/www/server/ngx_pagespeed
|
- 填写前置脚本:
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})
|
- 勾选模块,点击提交。安装好之后可以执行
nginx -V
,检查是否有 --add-module=/www/server/ngx_pagespeed
,如果有,说明安装成功。
之后,我可能会写一篇关于配置 ngx_pagespeed 的文章,敬请期待。
HTML 启用赫蹏
赫蹏是一款中文排版工具。
全局
- 在页面的
</head>
标签前引入 heti.css 样式文件:
1
| <link rel="stylesheet" href="//cdn.casecori.top/npm/heti/umd/heti.min.css">
|
- 在要作用的容器元素上增加
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>
|