亿些杂活

2021/09/03 字数统计： 2.9k 阅读时间： 5 mins 访问次数： ... 评论统计： ...

　　今日成果：文章封面，字数统计，图片访问优化，新文章模板。
　　昨天早上 10 点我已经画完那个伪 HUD 并且 hexo d 了，结果今天早上 10 点我还根本没有睡醒，直到现在还昏昏沉沉的……论 JS 对硅基生命脑细胞的危害性【不是
　　翻了下毛象我昨晚 9 点半上床的，怎么样 10 点也该睡着了，意思我在床上躺了 12 个小时都没睡够，这是把前几天欠的睡眠时间都补回来了吗……

　　本来这也应该是一篇 #建站指猫 ，但是我今天的精神实在是太差了……可能这几天搓博客搓太累了是时候打游戏放松一下了【你
　　而且我对「0 基础」的定义是完全没接触过任何代码，对 html 框架也没有什么认知，连浏览器右键审查元素的功能都没怎么用过的人。面对这样的群体我也确实没有信心把这些内容讲明白……所以暂时先留个笔记吧。

封面

　　理论上来讲至少在 5.4.0 版本的 hexo 下封面是一个隐藏的默认功能，但是不知道为啥大部分主题都不支持的样子。
　　那么打开冰箱门的部分：在每篇 markdown 文章的前缀里添加上 cover 属性，例：

1
2
3
4
5
6
7
8
9
---
    title: 亿些杂活
    date: 2021-09-03 15:15:23
    categories:
    - 维护日志
    tags:
    - HKT-924
  + cover: '你的图片外链'
---

　　说起来这一段前缀好像还有一个专有名词还是英文并且不叫 header，导致我搜索的时候一头雾水最后靠神秘力量顿悟才知道是加在这，捣鼓成功之后睡了一觉就又忘记这一段叫什么了，甚至我再回去搜 hexo + 封面 也找不到那个 issue 了，连浏览器历史记录里也找不到，这种感觉仿佛喷嚏打到一半突然塞住了一样难受……
　　啊搜到了这串东西是叫 front-matter ，所以这种奇怪的专有名词到底有什么存在的意义【

　　把大象放进去的部分：在你需要的 layout 文件里使用 post.cover 引入你输入的图片 url，以 ejs 为例写法如下：

1
2
3
4
5
<% if (post.cover) { %>
<a class="post-cover" href="<%- url_for(post.path) %>">
  <img src="<%- post.cover %>">
</a>
<% } %>

　　把冰箱门关上的部分：修改 css 文件让封面出现在你希望的地方，这个自由发挥就好了，如果需要抄作业可以查看 本站的 css 源码

字数统计

　　依然是创建元素 → 修改 layout → 修改 css 的流程，详情可以查阅插件仓库地址：https://github.com/theme-next/hexo-symbols-count-time
　　不过本站的实现方式不太标准，但是简单

安装插件

　　在 hexo 根目录下执行 npm install hexo-symbol-count-time --save，然后到主题的根目录下添加如下配置：

1
2
3
4
5
6
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false

　　其实都是默认配置，实际上只写一行 symbols_count_time: true 也能用，我就是这么干的……

修改 layout

　　以 ejs 主题为例，在 layout 文件夹中新建 word-count.ejs ，直接复制如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% if (theme.symbols_count_time){ %>

  <span class="word-count">字数统计：
    <span class="word-count-symbol"><%- symbolsCount(post.content) %></span>
    // 只统计 post.content 即文章正文部分的字数
    // 如果填写错误的话 ex 只填入 post，这里什么都不会出现
  </span>
  <span class="word-count">阅读时间：
    <span class="word-count-time"><%- symbolsTime(post.content, 4, 300, 'mins') %></span>
    // 只计算正文部分的阅读时间
    // 如果填写错误的话这里会出现 NaN:aN
    // 括号中的其它参数含义分别为：
    // 4：按 4 个字符算一个词
    // 300：每分钟阅读速度为 300 词
    // 'mins'：在时间数字后插入 mins 作为单位
  </span>

<% } %>

　　目前出现的问题是汉字会被统计成两个字符，尤其在代码含量高的情况下字数有些吓人……
　　以及阅读时间小于 1 分钟的时候输出的结果会变成 1 mins ，这语法显然不对。虽然直接改成中文的「分」就可以解决问题，但我觉得英文比较好看【你
　　理论上应该有数值 = 1 的时候替换单位的办法，不行就直接写个脚本查找替换【叉腰

　　话说我仔细瞅了一眼这个插件的作者，它好像就是 next 主题的副产品。
　　那 next 主题不是中国人做的吗，它为什么没有中文文档啊？？？
　　那中文 issue 总看得懂吧，改天发个 issue 报一下中英混排字数统计的问题好了……或者我直接换别的字数统计【

CSS 部分

　　本来 css 这个玩意大家各写各的没啥不好，但是我今天真的遇到一个莫名其妙的问题不吐不快。
　　那就是属性为 inline 和 inline-block 的元素如果放在一起中间会自动生成一个空格，你在外面套啥都没用，只要实际输出效果里它们两个相邻那中间就必然会出现一个空格。
　　然后我用 css 伪元素设置的间隔符就永远™的对不齐，血压拉满。最后把 inline-block 改成 inline-flex 终于逃过一劫，希望各大浏览器不要哪天突发奇想给 flex 盒子中间也加上空格，那我只能藏狐打人.gif

图片访问优化

　　昨天睡前问群友有无国内外访问速度都可以的图床，答：github 网盘
　　我：可是我就是为了节约 github 空间才找图床的啊！
　　答：？？github 还能装满的吗
　　我：？？？
　　紧急起床搜了一下发现 github 居然是没有存储上限的……它只说容量到 5G 会给你发邮件申请确认，我挠头了，我当年到底是看了什么盗版教程一直觉得 github 的存储空间只有 2G……

　　于是把图片全部直接转移到了 hexo 库里，新建了文章资源文件夹，发现首页封面无法获取图片 url。
　　所以还是要绝对链接……解决方法：在 source 文件夹新建 img 文件夹把图片全扔进去，先把图片 push 了再用外链插回来。
　　然后不知道是 github 的问题还是我的网出了问题，总之这么整完以后整个网页的加载速度都变得非常感人……不仅图刷不开网页也刷不开了。
　　但是手机的访问速度又还比较正常，起码除了图片以外的加载速度还是能接受的，另外挂了梯子之后也没出现一个网页加载十几秒的情况了。
　　也可能是梯子的问题……说起来我现在在用的这个机场真的很个性，具体体现在我用哪个节点它就给我挂哪个而且只挂这一个，我™

　　仔细看了看似乎是因为主题引用的 jQuery 库是百度静态资源库的域名……我直接去西柚子博客的本地库进行一个偷，next 内置的 jQuery 好像是 2.1.3 的不过问题不大。

图片压缩处理

　　实际上这并不是一个前端层面的优化手段而是图片处理教学。
　　目前本站常规插图尺寸保持在 100kb 以下，最大的彩色画稿为 口為し，1024×1024 的 png 文件，大小为 595kb。目前图片总大小是 1.47M，仓库总占用是 7.95M，我还是保留了一些主题原有但没用到的 css 和 layout 文件，这个大小我个人还是可以接受的。

　　那么具体的操作方式是打开你的 PS，拖入你需要的图片，在左上角选择 文件 → 导出 → 存储为 Web 所用格式，如果 PS 版本较低这个功能应该直接在 文件 选项卡里就能找到。

img-center

　　之后按照如图所示设置图片格式为 PNG-8，仿色算法为 扩散，勾上 透明度 和 杂色透明度仿色，颜色位数选择 256，这个时候图片的大小理论上会被压缩到 1/2 左右，如果是色彩跨度比较少的图片（如网页截图），可以选择更小的颜色位数来达到更好的压缩效果。

修改 hexo 文章模板

　　在 hexo 根目录下有一个 scaffolds 文件夹，里面存放的是页面模板文件，当你 hexo new 的时候会根据模板文件的内容生成对应的 markdown 前缀内容。

自动生成分类

　　在 post.md 中加入 categories 属性，具体写法如下：

1
2
3
4
5
6
7
  ---
  title: {{ title }}
  date: {{ date }}
+ categories:
  tags:
  ---

　　保存后随便 hexo new 一篇新文章，就可以看到默认生成的前缀中出现分类了。

新建模板

　　前文提到我在 layout 中加入了文章封面，并且把图片存放到了 github 库。
　　挨个输入封面链接很麻烦，如果直接修改默认模板使每篇文章都包含 cover 参数又会触发 layout 生成一个空封面。
　　所以我选择新建了一个 cover.md 模板用来专门生成需要封面图的文章，如下：

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
categories:
tags:
cover: https://4o.cx/img/{{ title }}.png
---

　　因为我的图片存在 github 仓库里，所有图片的外链都是比较规律的，所以我直接在模板里把链接也写上了，输入 hexo new cover 就会新建文章并输入与标题名称一致的图片链接作为封面。

　　一看这个字数统计已经过万了……这真的不是直接获取了文件大小作为字数吗，我觉得很可疑啊喂。
　　更神秘的事件来了，我把整个 markdown 复制到 word 里一看才 2700 字，这是怎么统计的啊？？？

© 2024 無色人間。-「e686a7e3828c」 转载本站图文请附上「原始链接」 已收录数据  210k  字，登记访客  ...  人。
  1. 1. 封面
  2. 2. 字数统计
    1. 2.1. 安装插件
    2. 2.2. 修改 layout
    3. 2.3. CSS 部分
  3. 3. 图片访问优化
    1. 3.1. 图片压缩处理
  4. 4. 修改 hexo 文章模板
    1. 4.1. 自动生成分类
    2. 4.2. 新建模板