写在前面

总之最终效果请看网站最下方——要解决的还挺多的，比如我还是没弄明白怎么给每个部分前加个小图标，想改掉页尾部分的宽度让居中更美观，还想加一点其他的东西…… 现在解决小图标是用的特殊字符，其实我觉得效果也不错。

以及真的好羡慕隔壁 Next 主题啊，隔壁开这些功能就没 Maupassant 这么麻烦…… 搜教程的时候经常就是 “今天想看看怎么统计全站字数我们来搜搜教程吧！”“全世界都是 Next 教程一看原来他们已经集成过了！”

况且 Next 用的是 Swig，Maupassant 用的是 jade（这也是我这次研究才搞明白的，而且 jade 和 pug 居然是一个东西），两者不通用，抄代码就更难了，除了表演现场跳楼我也没什么可做的了……

总之不管怎么样其实还挺简单的

说起来为了抄代码，我 Google 了大概也就两个小时吧，抛去各种试错补救错上加错网站崩溃拖备份重置的过程，最后跟着这么做你就能有一个长得很丑的字数统计了，真是完全不期待。

先讲一下思路吧，虽然是抄的代码但是还是学到了点东西。

就，昨天就在想，Next 主题和 Maupassant 统计单篇字数和全站用的都是同一个 WordCount 插件，也就是说其实功能已经有了，只是 Maupassant 没有在代码里写出来而已。而这个时候我已经知道了页尾文件是 E:\hexo\themes\maupassant\layout\_partial\footer.pug，这就说明我们倒腾来倒腾去，需要倒腾的就是 footer.pug 这个文件。

那么打开 footer.pug，代码长这样：

#footer= 'Copyright © ' + date(Date.now(), 'YYYY') + ' '
  a(href=url_for('.'), rel='nofollow')= config.title + '.'
  |  Powered by
  a(rel='nofollow', target='_blank', href='https://hexo.io')  Hexo.
  a(rel='nofollow', target='_blank', href='https://github.com/tufu9441/maupassant-hexo')  Theme
  |  by
  a(rel='nofollow', target='_blank', href='https://github.com/pagecho')  Cho.

研究一下和原来页尾的对应：

CCopyright © 2019 懒云休憩室. Powered by Hexo. Theme by Cho.

很明显是一段一对应的状态，既然插件已经装上去了，那用一段代码来描述一下（是这个词儿吗）让它显示全站字数不就完了。于是大刀阔斧地备份后先把所有的代码都删掉，打开了 google，搜索 Next 主题，决定先抄一下它的代码。

……Next 主题文档做得真好看，Next 主题的配置文件做得真详细，我好嫉妒。

虽然直接抄没有用（崩溃地搜了搜发现用的语言不一样而且没有转换器只有 html 转 jade），但是大概知道了这一段长成什么样，应该找什么新的关键词，再一顿 Google，发现了一个直接 po 了代码的好人 Hexo 集成 WordCount 插件

文章中写出了完整的 WordCount 插件使用的 jade 代码：

// 文章字数，阅读用时 
div(style='margin-top:10px;')
    span.post-time
        span.post-meta-item-icon
            i.far.fa-keyboard
            span.post-meta-item-text  字数统计: 
            span.post-count= wordcount(item.content)
            span.post-meta-item-text 字 & amp;nbsp;  |   
    span.post-time
        span.post-meta-item-icon
            i.far.fa-clock
            span.post-meta-item-text  阅读时长: 
            span.post-count= min2read(item.content)
            span.post-meta-item-text 分 
// 博客文章总字数 
div(style='margin-top:10px;')
    span.post-time
        span.post-meta-item-icon
            i.far.fa-keyboard
            span.post-meta-item-text  字数统计: 
            span.post-count= totalcount(site)
            span.post-meta-item-text 字

把最后一段抄下来贴到 footer.pug 文件里，发现字数统计有了，但是委屈巴巴地窝在左下角，字号也小了，但是不管怎么样字数统计有了，耶！

解决字数统计样式问题

东西有了就得解决不够美观的问题，一是 字数统计 位置问题，二是 字号大小 问题。

字数统计 问题解决得特别神奇，Google 了半天无果，只通过对各种代码以及 CSS 文件的试错确认了样式应该就在这几行代码里，不用去其他地方改，然后突然脑子不知道搭错了哪根弦，抬手把代码里的 div 改成了 span，改完这样：

span(style='margin-top:10px;')
  span.post-time
      span.post-meta-item-icon
          i.far.fa-keyboard
          span.post-meta-item-text  ♕ 她絮叨了: 
          span.post-count= totalcount(site)
          span.post-meta-item-text

hexo s -debug 一试，发现位置问题解决了，目瞪口呆。

最后在 footer.pug 上写的完整代码为：

#footer= '♛ 在这里的是：' + date(Date.now(), ' 懒云 | ') + ' '
  span(style='margin-top:10px;')
    span.post-time
        span.post-meta-item-icon
            i.far.fa-keyboard
            span.post-meta-item-text  ♕ 她絮叨了: 
            span.post-count= totalcount(site)
            span.post-meta-item-text

字号大小 问题用到了 F12 审查元素，翻了半天 F12 发现在 css 文件的这儿：

#footer {
    padding: .8em 0 3.6em;
    margin-top: 1em;
    line-height: 2.5;
    color: #6E7173;
    text-align: center;
    span {
        font-size: .9em;
    }
}

把所有看起来像字号的地方都试了一遍发现我可能眼瞎，明显是 font-size: .9em; 这一行嘛…… 改成 14px 就搞定了

为了简化 font-size 的换算，可以在 css 中的 body 中先全局声明 font-size=62.5%，也就是定义了默认字体大小为 16px*0.625=10px, 子元素会继承父级元素的字体大小，于是 1em=10px，所以 12px=1.2em ——by Google

遗留问题：

发现这一行没居中——准确的是，居的是整个页面左侧大栏的中，这样歪的就很难受，通过 F12 找到了应该改什么，但是就是没找到在哪儿改

我学会了：

Next 用的是 Swig，Maupassant 用的是 jade，这两个不太一样但是可以用 html 转 jade。

熟练使用 F12 审查元素找应该改什么 CSS 项，为什么表述得这么奇怪呢因为我也不知道怎么说比较对。

em 和 px 之间的关系，学到了一个新参数。

一个备用的 CSS text-align 属性解释，并且看完了才发现这就是旋岚给我的自学网站。

就算看不懂，不管三七二十一，先把能替换的替换一下看看哪个变了。

我还想折腾：

给 blog 开个留言板，不要每篇文章底下的评论只开留言板，其实我已经设置好了 valine，但是好懒哦等晚点我再研究能不能关掉评论。

等我学会了前端技术我还要在页尾加一个全站总篇数。

说来惭愧，我还是不会在文章中插入图片………………