Contents

使用Hugo自搭博客系列二:评论等一些配置

使用valine

1
2
3
4
5
6
[params.valine]
    enable = true
    appId = '填下'
    appKey = '填下'
    placeholder = '说点什么吧...'
    visitor = true # 浏览人数

使用Disqus

1
disqusShortname = "your disqus_shortname"
  • 注:若要本地也可以显示评论,需要修改themes\even\layouts\partials\comments.html
1
// if (window.location.hostname === 'localhost') return;

使用Waline

其他配置

配置下作者

1
2
[author]                  # essential                     # 必需
  name = "来个名字"

卜算子 (统计pv|uv)

  • 自带的有bug,我是关闭了
1
2
3
4
5
  [params.busuanzi]         # count web traffic by busuanzi # 是否使用不蒜子统计站点访问量
    enable = false
    siteUV = true
    sitePV = true
    pagePV = true
1
cp themes/loveit/layouts/partials/footer.html layouts/partials/footer.html

layouts/partials/footer.html<div class="footer-container"> 中添加:

1
2
3
4
<div class="footer-line">
    <i class='fas fa-chalkboard'></i>PV:<span id="busuanzi_value_site_pv"></span> | <i class='fas fa-chalkboard-teacher'></i>UV:<span id="busuanzi_value_site_uv"></span>
    <script async src="https://cdn.dusays.com/bsz.js"></script>
</div>

底部的社交链接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  [params.social]                                         # 社交链接
    a-email = "mailto:dsdsa123@gmail.com"
    # b-stack-overflow = "http://localhost:1313"
    # c-twitter = "http://localhost:1313"
    # d-facebook = "http://localhost:1313"
    # e-linkedin = "http://localhost:1313"
    # f-google = "http://localhost:1313"
    g-github = "https://github.com/dsada123"
    # h-weibo = "http://localhost:1313"
    # i-zhihu = "http://localhost:1313"
    # j-douban = "http://localhost:1313"
    # k-pocket = "http://localhost:1313"
    # l-tumblr = "http://localhost:1313"
    # m-instagram = "http://localhost:1313"
    # n-gitlab = "http://localhost:1313"
    # o-bilibili = "http://localhost:1313"

网站favicon.ico

  • 替换themes\even\static\favicon.ico,还有其他几个icon

  • 执行hugo

  • 懒人可以使用 Logo神器

引入音乐播放器(LoveIt主题)

  • 配置文件修改(本地查看效果需要,线上不需要)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    [params.page.library]
      [params.page.library.css]
        # someCSS = "some.css"
        # located in "assets/" 位于 "assets/"
        # Or 或者
        # someCSS = "https://cdn.example.com/some.css"
        "APlayerCSS" = "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
      [params.page.library.js]
        # someJavascript = "some.js"
        # located in "assets/" 位于 "assets/"
        # Or 或者
        # someJavascript = "https://cdn.example.com/some.js"
        "APlayerJS" = "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"
        "MetingJS" = "https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"
  • 在需要的地方引入短标签
1
{{< music url="/music/Wavelength.mp3" name="Wavelength" artist="oldmanyoung" cover="/images/Wavelength.jpg" fixed="false" >}}

效果:

  • 也可以自定义一个layout,放在footer里,全局引用,不过这不是单页面的,所以切换页面会暂停播放
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<meting-js
    name="rainymood"
    artist="rainymood"
    url="/music/Wavelength.mp3"
    cover="/images/Wavelength.jpg"
    mini="true"
    fixed="true">
    <pre hidden>
        [00:00.00]This
        [00:04.01]is
        [00:08.02]lyric
    </pre>
</meting-js>

加密,这里以 posts 下面的文章加密为例(LoveIt主题)

  • 可防JS禁用 ,可cookie暂储密码

  • 新建 layouts/posts/single.html

1
mkdir layouts/posts/ && cp themes/LoveIt/layouts/posts/single.html layouts/posts/single.html
  • 创建文件 static/js/pwd.js ,代码如下
 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
26
27
28
29
30
31
32
33
34
35
36
37
38
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie(cname, cvvalue) {
    var cvalue = getCookie(cname);
    if (cvalue != "" && cvalue === cvvalue) {
        return true;
    } else {
        return false;
    }
}

function setCookie(cname, cvalue, exhours) {
    var d = new Date();
    var h = 60 * 60 * 1000
    d.setTime(d.getTime() + (exhours * h));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
}

function errorPwd() {
    alert('密码错误!');
    if (history.length === 1) {
        window.opener = null;
        window.open('', '_self');
        window.close();
    } else {
        history.back();
    }
    return false;
}
  • layouts/posts/single.html 中的 {{- $params := .Scratch.Get "params" -}} 之后添加如下代码
 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
    {{- $password := $params.password | default "" -}}
    {{- $encryptedKey := $params.encryptedKey | default "" -}}
    {{- if ne $password "" -}}
        <noscript><meta http-equiv="refresh" content="0; url=/404.html" /></noscript>
        <script type="text/javascript" src="/js/pwd.js"></script>
        <script>
            (function(){
                document.body.style.display="none"
                if({{ $password }}){
                    if({{ $encryptedKey }}){
                        if (!checkCookie({{ $encryptedKey }},{{ $password }})) {
                            if (prompt('请输入文章密码') != {{ $password }}){
                                return errorPwd();
                            } else {
                                setCookie({{ $encryptedKey }},{{ $password }},1);
                            }
                        }
                    } else if (prompt('请输入文章密码') != {{ $password }}){
                        return errorPwd();
                    }
                }
                document.body.style.display="inherit"
            })();
        </script>
    {{- end -}}
  • posts下面 的文章中使用 : encryptedKey => cookie中的键;password => 密码
1
2
3
4
5
---
encryptedKey: "gsgds"
password: "dsada"

---
coffee