Hello World

Share on:

本博客采用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 }}

踩坑结束。