Gloriy's little home
Welcome, my friend.
换主题记
记录一下,怎么为不自带valine评论系统的加上valine评论系统。

突然间,我发现了一个问题

在2019年的12月31日的某一个时刻,我突然发现了一个令人震惊的事情——2019年都快过完了,我的博客才写了2篇!别找了,现在只有这一篇和上一篇了。

这实在是一个很尴尬的问题。那么为了消灭证据可以水一篇出来,以至于不要博客就真的只是搭完了就啥都没了。我当即下定决心,换主题了!

然后,该解决问题啦

换主题这事不必多说,主要靠得就是google和hugo的官方的主题站抬我一手。那么找来找去,我找到的是hermit这一款主题。

那么一番常规操作之后,我们就愉快的换上了这款主题。

全文完。

你以为我会这么说吗?

问题,不是,为什么又有问题?

加上valine

其实正儿八经的说,这次的换主题其实没啥好写的。就是常规的,git clone然后就改改config.toml就完事了。但是,请注意: 我是一个那么没有追求的人吗? 换完就了事绝对不是我的风格。这次的换上的hermit虽然在各方面都很好,但是其似乎是并不自带valine这一款评论系统的。而我又比较喜欢,这还能咋办呢?

不就是个评论系统吗,看我给它加上去!

但是,这么一搞问题就来了:往哪里加,加点啥,怎么加,我是一问三不知。不过还好,我们有万能的google呢。经过对于valine官网文档的一番研究,以及同为使用hermit主题的SteveHawk同学的这篇博客的参考学习以后,我已经完全明白啦!

以下是我总结的步骤

  1. Valine官网参考上面的快速启动,把

    <head>
        ..
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
        ...
    </head>
    <body>
        ...
        <div id="vcomments"></div>
        <script>
            new Valine({
                el: '#vcomments',
                appId: '<API_ID>',
                appKey: '<API_Key>'
            })
        </script>
    </body>
    

    这一部分HTML代码复制入layouts/partials/ 下的 valine.html。(如果没有请自己新建一个。)

  2. layouts/partials/文件里面的comments.html代码改为

  3. 最后,记得在config.toml里面加上

    [params.valine]
      enable = true
      appId = "APP_Id"
      appKey = "APP_Key"
    
  4. OK,搞定完工!


理论上来说,是这样的。

但是,为什么会变成这样呢……第一次靠自己搞定了装上评论系统,又没有在其中遇到什么bug。这两份快乐重叠在一起,明明该是更加快乐的时光……为啥它这个字体颜色刚好和我的背景这么相近啊啊啊!

可是,没有办法。又经过一番google以后,我找到了这个临时修复暗色模式中的 Valine里面说的很清楚了,Valine目前对于暗色主题的支持并不好。但是可以通过修改css文件的方式来改变其的字体颜色。那还有啥好说的,都到这一步了,干吧。

修改Valinecss文件使其支持暗色背景

  1. 如果你和我一样,用的是hermit主题的话,就会发现一个问题:这TM根本没有css文件啊!

  2. 别急,打开你的/static文件夹,在下面新建一个名为css文件夹,再在里面新建一个Valine.css文件。把代码放进去

    .v *,
            .v .vwrap input,
            .v .vwrap input::placeholder,
            .v .veditor,
            .v .veditor::placeholder,
            .v a,
            .v a:hover {
                color: hsla(0,0%,100%,.75);
                opacity: 1;
            }
            .v .vbtn {
                color: hsla(0,0%,100%,.75);
                background: #333;
                border: none;
            }
            .v .vbtn:hover {
                color: #3090e4;
                border-color: #3090e4;
            }
            .v .vlist .vcard .vhead .vsys {
                background: #333;
            }
    
  3. 还记得我们在上一步的Valine.html文件吗?插入<link rel="stylesheet" href="{{ "/css/valine.css" | absURL }}"/>,使文件变为这个样子:

    <head>
        ..
        <link rel="stylesheet" href="{{ "/css/valine.css" | absURL }}"/>
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
        ...
    </head>
    <body>
        ...
        <div id="vcomments"></div>
        <script>
            new Valine({
                el: '#vcomments',
                appId: '<API_ID>',
                appKey: '<API_Key>'
            })
        </script>
    </body>
    
  4. OK完工!

最后的一点碎碎念

其实吧,这次换主题本来是没有想过会搞这么久的。主要是Valine不支持暗色的背景确实是让我吃了一惊,没有想到本来感觉挺好的东西换了一个地方就有点水土不服了。

但是事实上,真正花了我特别长时间的还是寻找解决方案。没有第一时间想到去修改css说明我大概还是不够成熟?

总之,这次换主题算是比较成功的。至于像是让主题支持iframe这种东西……还是等我有时间了再去搞吧。

最后的最后一句话

谁又想得到呢,事后我得意的google一下以后,第一个就讲了如何在hermit上面加Valine

hugo博客添加评论系统Valine

啥也不说了,大家晚安。

来个人,帮我把棺材板盖好!


Last modified on 2020-01-01