最近心血来潮花了好久给自己的博客添加了一个粒子时钟，最后想要使它在sidebar中居中显示废了我好大功夫，为了以后不在这上面浪费时间，我决定浪费现在的时间把这个问题记下来。

References：

电子文献：
https://www.jianshu.com/p/f0bffc42c1ce
https://blog.csdn.net/chwshuang/article/details/52350559

swig

由于我要将我的时钟显示在侧边栏，需要插入到header.swig文件中。hexo博客的源码中有大量这个格式的文件，然而具体的使用方法我也不是很清楚。在查阅了一些文章之后，我对swig有了一个初步的认知。
swig是一个JS前端模板引擎，它有如下特点：

支持大多数主流浏览器。
表达式兼容性好。
面向对象的模板继承。
将过滤器和转换应用到模板中的输出。
可根据路劲渲染页面。
支持页面复用。
支持动态页面。
可扩展、可定制。

可以通过VSchart将swig与其它前端模板框架进行对比，这个网站由维基支持，可以在里面进行各种对比，非常有意思，在这里推荐一下。
关于swig的基本用法，可以在我文首的第一个参考链接中找到，个人认为不搞前端的话大概率是用不到的。

原本的方法

当我添加完时钟本地测验时，我发现添加的时钟在侧边栏的位置没有居中。
未居中
根据之前学习html的记忆，我尝试了使用<p align=center></p>标签包裹我的插入语句，然而并没有达到想要的效果。

使用div实现居中

为了达到上述的目的，我使用<div>标签来分割出块，并使用div的属性来实现居中显示的效果。

1
2
3

<div style="Text-align:center;width:100%;">
    {% include '../_custom/clock.swig' %}
</div>

使用nav实现隐藏

本以为大功告成，结果在移动端查看时，发现竖屏显示效果非常煞风景。
不好看
其实在电脑端浏览器也可以预览移动端的效果，方法很简单，就是直接将浏览器窗口小化，减小两边间距，网页就会自动变成竖屏显示的状态（除非没有）。此外，当我们F12检查元素或者查看源时，网页也会被挤到一侧从而变成竖屏显示的状态。

注：这里补充一下检查元素和查看源之间的区别，一般的浏览器右键都会有这两个功能，表面上看起来似乎也差不多，但是它们还是有区别的。
检查元素看的是渲染过的最终代码，可以做到定位网页元素、实时监控网页元素属性变化的功能，可以及时调试、修改、定位、追踪检查、查看嵌套，修改样式和查看js动态输出信息。这让我想起了自己当初就是这样直接修改四级成绩，然后骗朋友的，不知道的人还真的想不出这原因，就以为的确是真的啦哈哈。
另一方面，查看源只是把网页输出的源代码，即就是别人服务器发送到浏览器的原封不动的代码直接打开，既不能动态变化，也不能修改。

为了解决这个问题，追求美观，我就想到可以把时钟和标签、分类等菜单中的索引一起，在竖屏状态下不点击时就不显示。在分析了header.swig中菜单部分的源码之后，我注意到一个标签<nav>，它是是HTML5的新标签，可以标注一个导航链接的区域。于是，我将插入时钟的语句移入nav所包裹的块中，就完美达到了我的需求。
solution

意外的问题

在我写这篇博文的时候，出现了一个奇怪的问题。每当我想要本地预览（部署应该也会出现这个问题），都会报错：“Nunjucks Error: [Line 17, Column 239] unexpected token: }”，这就让我非常的苦恼。
根据错误信息，我开始一个一个寻找我文中的花括号。在反复删减和搜索相关问题之后，我发现是我插入在行间的一个include的swig语句惹的祸（我要是写出来又报错，插入在段间就没问题，可以到上文找）。
这类异常一般是文章中使用了大括号{}这个特殊字符，且没有转义导致编译不通过，解决的办法是使用{ }对大的花括号进行转换。

补充：小的圆括号可用( )进行转换。

没有这类问题当然再好不过啦，如果出现了，可以试试上面的方法。这类涉及转义的符号还是得熟悉其规则，避免老是出错。