08 May 2018

更改博客主题

字数:186 Topic:misc Tag:2018-05

0x01 起因

这几天在尝试Jarvis OJ的题目,但是自己菜的不行，各种谷歌、百度搜索wp。所以就看到了n多大佬们的blog，然后就突然感觉自己的博客好丑啊QAQ，就想着换个主题，说干就干~~

0x02 挑选主题

在hugo的主题分类中看完所有的包含blog标签的主题后，觉得Sublime和PacMan都蛮适合我的，就都clone下来了。但是PacMan在测试的过程中，配置完config后直接404什么鬼，，然后就选择了Sublime。

0x03 配置及修缮

吐槽一下这个主题吧，与之前的主题相比，少了topic、tag、about、contact只提供了一个、无图标、还有一个严重的bug就是左上角的home(姑且这样称呼)一直固定在左上角，然后就出现了小窗看blog以用手机的时候会挡住部分文章主体。。相比之前多了一个头像位，然后就是更符合我的审美了？吐槽完就开始说配置过程，先说说成果。

添加文章分类
字数统计(有BUG)
添加本地图片
首行缩进
更改部分CSS
添加JS
...

文章分类

config.toml添加如下代码

[taxonomies]
	tag = "tags"
	topic = "topics"

然后在sublime\layouts\_default目录下建立terms.html文件，主要内容如下

{{ $data := .Data }}
{{ range .Data.Terms.ByCount }}
{{ $termLink := printf "/%s/%s/" $data.Plural .Term | urlize }}
<h2>
    <a href="{{ $termLink }}">{{ .Term }}</a>
    有{{ .Count }}篇
</h2>
<ul>
    {{ range .Pages | first 5 }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
    {{ if gt (len .Pages) 5 }}
    <li><a href="{{ $termLink }}">……</a></li>
    {{ end }}
</ul>
{{ end }}

此时就可以在url后输入tags或topics访问标签页，然后在主页的扉页添加接入口，选择合适的地方布局就行了，代码如下

<h6>归档</h6>
<a class="link"  href="{{ .Site.BaseURL }}topics">Topics</a>
<a class="link"  href="{{ .Site.BaseURL }}tags">Tags</a>

在文章内容页显示所属标签，修改_default目录下的single.html,添加

{{ $baseUrl := .Site.BaseURL }}
<h6>Topic:<a href="{{ $baseUrl }}topics/{{ .Params.topics }}">{{ .Params.topics }}</a>
Tag:<a href="{{ $baseUrl }}tags/{{ .Params.tags }}">{{ .Params.tags }}</a></h6>

然后就需要写两个html来渲染没个tag和topic了，这个首先在sublime\layouts\_default目录下建立文件夹taxonomy，然后在里面分别建立tag.html和topic.html，主要内容如下

<h1 class="page-title" itemprop="name headline">{{ .Title }}</h1>
<div itemprop="articleBody">

	{{ range .Pages }}
	    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
	    {{ end }}					
		
</div>

并没有去设计两个不一样的标签页，在tag和topic页面我用了相同的布局，由于接收的参数不同并不会产生相同的内容。

字数统计

这个功能使用的是HUGO提供的函数 .WordCount ,但总感觉有BUG，当然也可能是我操作不当，但是确实没完美实现，在single.html里添加下面代码就行了

<h6>字数:{{ .WordCount }} </h6>

添加本地图片

HUGO使用的是MarkDown，MarkDown添加图片采用 ![]() 方式，这就需要一个图片存放的地方，但是目前我并没有找到一个合适的平台，所以这个功能还是需要加上。这里采用的是上一个主题的作者提供的方式，由于代码较多，在这里就不贴代码，给出作者的github,下载layouts目录下的shortcodes即可，使用在之前的搭建过程中已经说过就不再赘述

其他一些改动都受主观影响较重，而且也不难做到，在此并不做描述。

0x04 总结

说一下在这次更换主题的过程中的感受，我的英语并不好，看官方文档特别吃力，中文文档基本上就停留在搭建没有后续了，而且相关的博客教程特别少，只能自己一点点尝试，感觉踩了很多坑，前后大概弄了1天半才弄好，写下这篇博客算是对这次的一个总结，~~如果下次再有更换主题的想法，也好有个可以参考的内容。~~不，不存在的。这篇博客只是总结了一下该怎样操作，并没有说任何原理，因为涉及到的比较多，实在是懒得再去翻官方文档再翻译再贴过来了，~~当然，主要是我也不懂。~~ 最后说一个小Tip，就是在使用

hugo --baseurl="https://blank233.github.io/"

时，url后面的 / 一定要带上，虽然说有的主题在设计的时候是

{{ .BaseUrl }}/balabala

这样的话，//浏览器在解析的时候会去掉一个，但并不是所有的都是这样，如果遇到

{{ .BaseUrl }}balabala

的，url后不加/的话，你可以试试~

0x05 参考

最后，十分感谢匿蟒大佬的博客，在此次的更改的过程中给予了很大的帮助！(๑•̀_•́๑)

BlankのBlog