本博客采用Hugo+GitHub搭建，生命在于折腾，记录学习和生活。
先在此记录下我自己踩过的坑
搭建方法自行移步：http://www.gohugo.org/doc/ 不在此赘述。
主题选用
选择恐惧症，感觉哪个主题都好看，最后选用了maupassant。这个主题还算比较符合我的要求。贴上我修改完主题之后的Github，欢迎issue、pr、star。
换主题了，用的even，还算好看。
更换字体
主题自带的字体太费眼了，改了下style.css
添加灯箱
采用lightgallery
hugo采用的是markdown来渲染文章，而图片在前端渲染出来的都是img标签，这没办法去控制他渲染的标签class，但是经过我不懈百度，各种看文档，发现hugo支持模板中采用正则表达式查找替换。那么就很简单了。我直接贴上我写的代码。
在主题的layouts/_default/single.html中默认是
1<div class="post-content">
2{{ .Content }}
3</div>
我通过正则去查找替换了渲染之后的img标签和结构，而且顺手就给图片加上了class="lazyload"来实现我们的懒加载效果
1<div class="post-content">
2 {{ $reAltIn := "<img src=\"([^\"]+)\" alt=\"([^\"]+)?\" />" }}
3 {{ $reAltOut := "<figure><img src=\"/images/ring.svg\" data-sizes=\"auto\" data-src=\"$1\" alt=\"$2\" class=\"lazyload\"><figcaption class=\"image-caption\">$2</figcaption></figure>" }}
4 {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
5 {{ $reAltTitleIn := "<img src=\"([^\"]+)\" alt=\"([^\"]+)?\" title=\"([^\"]+)?\" />" }}
6 {{ $reAltTitleOut := "<figure><img src=\"/images/ring.svg\" data-src=\"$1\" data-sizes=\"auto\" alt=\"$2\" title=\"$3\" class=\"lazyload\"><figcaption class=\"image-caption\">$2</figcaption></figure>" }}
7 {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
8 {{ $finalContent }}
9 </div>
添加懒加载
https://github.com/aFarkas/lazysizes 贴上文档
添加文章版权
修改layouts/partials/related.html
1 <blockquote>
2 <div class="post-copyright">
3 {{ with .Site.Params.author }}
4 <p class="copyright-item">
5 <span>本文作者:</span>
6 <span>{{ . }} </span>
7 </p>
8 {{ end }}
9
10 {{ with .Permalink }}
11 <p class="copyright-item">
12 <span>本文链接:</span>
13 <a href={{ . }}>{{ . }}</a>
14 </p>
15 {{ end }}
16
17 <p class="copyright-item lincese">
18 <span>许可协议:</span>
19 <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a>
20 </p>
21
22 <p>
23 <b>转载请保留原文链接及作者。</b>
24 </p>
25 </div>
26 </blockquote>
添加GoogleAnalytics
hugo本身就支持GoogleAnalytics，直接在config.toml中配置
1GoogleAnalytics = "UA-555555555-1"
这个配置最好放在配置文件的上方，要不然不会生效。坑
修改摘要方式
原主题不支持<!--more-->的方式显示摘要，发现是因为他在模板中写死了
1{{ .Content | markdownify | truncate 100 }}
显示内容的前100个字符。
我们需要改成
1{{ .Summary | markdownify | safeHTML }}
这样就支持<!--more-->的方式显示摘要了，当然如果不加，会自动截取前70个字符作为摘要。
添加shortcode
bilibili
1{{ if .IsNamedParams }}
2<div class="bilibili" style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
3 <iframe src="//player.bilibili.com/player.html?aid={{ .Get "av"}}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
4 </iframe>
5</div>
6
7{{ else }}
8
9<div class="bilibili" style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
10 <iframe src="//player.bilibili.com/player.html?aid={{ .Get 0}}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
11 </iframe>
12</div>
13
14{{ end }}
网易云音乐
1{{/* DEFAULTS */}}
2{{ $auto := "0" }}
3
4{{ if .IsNamedParams }}
5
6 <iframe
7 class="music163"
8 frameborder="no"
9 border="0"
10 marginwidth="0"
11 marginheight="0"
12 width="330"
13 height="86"
14 src="//music.163.com/outchain/player?type=2&id={{ .Get "id" }}&auto={{ or (.Get "auto") $auto }}&height=66">
15 </iframe>
16
17{{ else }}
18
19 <iframe
20 class="music163"
21 frameborder="no"
22 border="0"
23 marginwidth="0"
24 marginheight="0"
25 width="330"
26 height="86"
27 src="//music.163.com/outchain/player?type=2&id={{ .Get 0 }}&auto={{ if isset .Params 1 }}{{ .Get 1 }}{{ else }}{{ $auto }}{{ end }}&height=66">
28 </iframe>
29
30{{ end }}
腾讯视频
1{{ if .IsNamedParams }}
2<div class="qqvideo" style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
3 <iframe frameborder="0" src="//v.qq.com/txp/iframe/player.html?vid={{ .Get "vid"}}" allowFullScreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
4</div>
5
6{{ else }}
7
8<div class="qqvideo" style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
9 <iframe frameborder="0" src="//v.qq.com/txp/iframe/player.html?vid={{ .Get 0 }}" allowFullScreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
10</div>
11
12{{ end }}
踩坑结束。
评论