美化 Blog && 加入评论功能

Posted by XTXTMTXTX on 2019-01-12
#HEXO #Javascript #Valine #博客 #评论
Web
字数：2.3k
阅读时间：9 分钟
本文总阅读量 次

快到考试周了，虽然没怎么复习，但依旧忙里偷闲，先是为原先的 VPS 发工单续了个费，再是昨天买了一年10元月付的腾讯云学生主机，初始化又搞了半天。昨天将近凌晨还打了把 CF[1] ，十分不幸，我居然被 div2 C 题给杀了，完了之后跟同学一讲，原来是读错题了🤔🤔🤔。然后这几天还折腾了几下优化博客的体验，期末考怕是要凉了。
　　好了，言归正传，讲一下怎么给博客加上一些效果，让博客看起来更好看，和加上评论功能。

添加 js 效果

首先是给博客加上一些小动画，像这里的点击爱心效果和背景的效果，其实引入一个js就可以做到。问题就是怎么引入了。
　　我先按网上的教程做，找 HEXO\themes\[theme name]\layout\ 下的文件，教程里说是 "_layout.swig" 文件。我一看，全是 .ejs 文件。好吧不影响，这个其实是因为主题不一样的原因。我用的是 clean-blog ，而好像大部分人用的都是 Next 。接下来 notepad++ 打开 layout.ejs 先，仔细观察格式，其实还是比较好理解的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html <% if(config.language) { %>lang="<%= config.language %>"<% } else { %>lang="en"<% }%>>

<!-- Head tag -->
<%- partial('_partial/head') %>


<body>

    <!-- Menu -->
    <%- partial('_partial/menu') %>

    <!-- Main Content -->
    <%- body %>

    <!-- Footer -->
    <%- partial('_partial/footer') %>

    <!-- After footer scripts -->
    <%- partial('_partial/after-footer') %>
    <script type="text/javascript" src="/js/love.js"></script>
    <script type="text/javascript" color="255,0,0" opacity='0.5' src="/js/canvas-nest.min.js"></script>
</body>

</html>

  注意到，在 </body> 前加入了两行 script ，这两个就是这些小动画的 js 啦。如果你要引用的话，直接打开这个 love.js 和这个 canvas-nest.min.js ，保存到本地，再复制到 HEXO\themes\[theme name]\source\js\ 下，最后在上文目录中类似 *layout* 的文件下找个合适的地方粘贴：

1
2
<script type="text/javascript" src="/js/love.js"></script>
<script type="text/javascript" color="255,0,0" opacity='0.5' src="/js/canvas-nest.min.js"></script>

  其中第二行的 color 和 opacity 可以自己设置，分别是背景线条的颜色RGB和不透明度。
　　实在找不到怎么办？
　　CMD: hexo s。对就是生成预览网站，然后直接修改 theme 文件并保存，刷新一下 localhost:4000 就可以直接预览效果，善用 F12 可以定位你做的修改在网页里的哪个位置（虽然可能需要一些网页调试基本知识了 ，推荐使用更为方便的Typecho ）。
　　接下来就是给文本框框加上一个半透明的背景和阴影了。

修改博客 CSS

Clean-Blog 原本的背景是白色，所以文本是没有背景色的。现在一加上背景效果，就比较干扰阅读，所以这里就需要修改CSS文件。
　　打开 HEXO\themes\[theme name]\source\css\ ，发现有许多 .styl 文件，其一般的结构是一个 style.styl 中又引用了许多别的 styl 文件，主要在 base.styl 里，那么首先就修改 base.styl 。
　　观察文件结构，发现还是比较规则的，与 css 文件很类似。需要注意的是作为缩进字符必须统一，例如原本是两个空格就用两个空格缩进，原本是 Tab 就用 Tab ，不然生成网页会报错（这点和 python 蛮像的）。主要是 Notepad++ 可能在换行的时候会自动把几个空格变成一个 Tab ，最好还是手动删了再输比较好。
　　首先 hexo s 打开本地服务器方便实时查看修改状态，先来给主页的 post 预览加上一个白色底框。在浏览器中打开网页按下 F12 定位到文章预览框 class="post-preview" ，接下来只要定位 post-preview 就行了。
　　在 base.styl 中找到

1
2
3
.post-preview
  ...
  ...

  找不到就直接手打，注意缩进
　　在 .post-preview 后加一行代码，变成

1
2
3
4
.post-preview
  background-color:rgba(250, 250, 250, 0.6);
  ...
  ...

  其中四个数字分别是颜色 RGB 和不透明度，按自己喜好调整，保存 styl 文件刷新预览服务器页面即可看到效果。（还想再方便点？直接 F12 修改 css 。）
　　如果需要加上阴影，那么就：

1
2
3
4
5
6
.post-preview
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  background-color:rgba(250, 250, 250, 0.6);
  ...
  ...

  rgba 参数意义同上， 5px 表示阴影厚度。
　　另外，如果需要调整框的大小，则需要：

1
2
3
4
5
6
7
8
9
.post-preview
  margin-top: 65px;
  margin-bottom: 65px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  background-color:rgba(250, 250, 250, 0.6);
  ...
  ...

  具体意义参考 css 教程。
　　好了，现在文章预览有底框了，可是文章还没有底框，怎么办呢。
　　先进 F12 看看在哪个 css 里加框框，感觉在 container div 里的 row div 里加比较好看，于是在 base.styl 里找，不太找得到，找 article.styl ，有了，开头前几行就是，于是编辑为：

1
2
3
4
5
6
7
8
9
10
11
article
  .container
    .row
      margin-top: 65px;
      margin-bottom: 65px;
      padding: 25px;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
      background-color:rgba(250, 250, 250, 0.6);
      ...
      ...

  这样，效果就有了。
　　接下来觉得标题和底栏也需要一个半透明背景。先找标题，通过 F12 定位，发现有两种 class ，一个叫 site-heading ，一个叫 post-heading ，其实好办，打开 base.styl ，加入：

1
2
3
4
.site-heading
  background-color:rgba(0, 0, 0, 0.6);
.post-heading
  background-color:rgba(0, 0, 0, 0.6);

  这样就有了个黑色的底板，能看得清字了。
　　同理，找 footer ，发现是在一个 container 的 div 里套着的一个 row 的 div 再套一个 div ，直接在里加入：

1
2
3
4
5
.row
  div
    background-color:rgba(250, 250, 250, 0.6);
    ...
    ...

  刷新，结果不尽人意。平白多了一堆灰框，不太好看。原因是所有 class 为 row 的全都加上了这个属性。那么怎么办呢？
html 中的相应代码是

1
2
3
4
5
6
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            ...
            ...

  所以需要修改为：

1
2
3
4
5
6
7
footer
  .container
    .row
      div
        background-color:rgba(250, 250, 250, 0.6);
        ...
        ...

  保存，即可。
　　到这里博客就好看多了，最后来讲讲怎么加上评论功能。

加入评论功能

之前用 Pacman 主题时用的评论功能在我转到 Clean-Blog 主题的时候就给去掉了，现在这个主题能用的只有 disqus 和 facebook 的评论系统，然而都需要科学上网才能使用。尽管现在我的博客是挂在外国（毕竟便宜，8块多一个月），但我还是懒得实现类似反代之类的操作。毕竟都选择静态博客了，再嵌入个 php 就有点懒得麻烦。
　　这里就用到了 Valine ，具体怎么配置可以点进去看一下，这里讲一下我的配置过程。
　　首先需要一个 Leancloud 账号，作为处理评论的后台。注册完之后验证好邮箱就可以用了。首先创建一个应用，名字随意，接着到应用 设置 ，应用 Key 里把 App ID 和 App Key 复制下来，再到 安全中心 修改 Web 安全域名 ，改成这样：

1
2
3
4
http://your.site
https://your.site #如果有SSL的话
http://127.0.0.1:4000 #方便本地测试
http://localhost:4000 #同上

  当然了，不要把注释也打进去。
　　接着就是在 HEXO 里配置了。关键代码比较少，如果不弄什么方便控制的功能的话在特定的地方粘贴一下就可以了，许多主题现在已经可以直接安装 Valine 了，然而 Clean-Blog 没有。这里讲一下怎么把评论直接放到网页里。
　　先打开 HEXO\themes\[theme name]\layout\ ，找到头部的配置文件，我的是 _partial\head.ejs 。
　　在 </head> 之前加入

1
2
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

  接下来找文章放评论模块的地方，一般都是有独立的文件的，实在找不到就在文章布局文件的结尾放。
　　打开 _partial\comments.ejs ，在结尾加入：

1
2
3
4
5
6
7
8
9
10
11
12
<hr />
<div id="vcomments"></div>
<script>
	new Valine({
		av: AV, 
		el: '#vcomments', // 
		app_id: '<APP_ID>',
		app_key: '<APP_KEY>',
		placeholder: '输入你想说的话。',
		verify: true
	});
</script>

  其中 <APP_ID> 与 <APP_KEY> 填之前保存下来的， placeholder 填在留言框中出现的占位符， verify 是验证码，其实就是一个简单的四则运算求答案，可以改成 false 关掉。
　　到这里就差不多了，但如果你还想改下评论框的 css 样式的话，打开 HEXO\themes\[theme name]\source\css\ 里的 base.styl ，添加并编辑：

1
2
3
#vcomments
  ...
  ...

  即可。

  1. CF： Codeforces，才不是某 TX 游戏。 ↩


当你在凝视深渊的时候　深渊也正在凝视着你