Next主题优化:添加DaoVoice在线聊天、文章结束标记、自定义底部版权信息

之前博客都在使用Yilia主题,可是心里一直对页面简洁、美观,并且功能配置多、社区强大的Next主题念念不忘,所以用了几天时间把博客更换成了Next主题。因为好多配置已经集成在了最新版本中,我们只需要在主题文件夹下的_config.yml文件中设置即可。本文主要介绍如何添加DaoVoice在线聊天、文章结束标记、自定义底部版权信息。

1.添加DaoVoice在线聊天

  • 效果是下面的样子。

1.1 注册

1.2 修改head.swig

  • 我们选择安装到网站,编程语言选择为JavaScript,并选择仅和匿名用户沟通。复制这里的代码。

    • 修改/themes/next/layout/_partials/head.swig文件,在google_site_verificationbing_site_verification之间添加如下内容。
    1
    2
    3
    4
    5
    {% if theme.daovoice %}
    <!--粘贴刚刚复制的代码-->
    <!--代码-->
    <!--粘贴结束-->
    {% endif %}

1.3 修改主题配置文件

  • 复制下面的app_id,并在主题文件夹下的_config.yml文件中添加下面的内容。

    1
    2
    3
    # Online contact
    daovoice: true
    daovoice_app_id: # 这里填你刚才获得的 app_id

1.4 欢迎词和样式更改

  • 接下来可以在聊天设置里做一些外观上的个性化配置。

2.添加文章结束标记

  • 效果如下。

  • \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容。

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    <div style="text-align:center;color: #FFB1B0;font-size:20px;">------------- 本文结束 <i class="fa fa-paw"></i> 感谢您的阅读 -------------</div>
    {% endif %}
    </div>
  • 接着打开\themes\next\layout\_macro\post.swig文件,在post-body 之后, post-footer 之前添加如下画红色部分代码.

    代码内容如下:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
    </div>
  • 接着在主题配置文件中添加下面的代码。

    1
    2
    3
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
    enabled: true

3. 添加自定义版权信息

  • 效果如下。

  • 在目录 next/layout/_macro/下新建 my-copyright.swig文件,并添加下面的代码。

    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
    {% if page.copyright %}
    <div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

    <!-- JS库 sweetalert 可修改路径 -->
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
    </p>
    <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <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> 转载请保留原文链接及作者。</p>
    </div>
    <script>
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
    clipboard.on('success', function(){
    swal({
    title: "",
    text: '复制成功',
    icon: "success",
    showConfirmButton: true
    });
    });
    });
    </script>
    {% endif %}
  • 在目录next/source/css/_common/components/post/下新建my-post-copyright.styl文件,并添加下面的内容。

    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
    39
    40
    41
    42
    43
    44
    .my_post_copyright {
    margin: $post-copyright.margin;
    padding: $post-copyright.padding;
    border: 1.5px solid #d3d3d3;
    border-left: $post-copyright.border.width $post-copyright.border.style $post-copyright.border.color;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.6);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #696969;
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #a3d2a3;
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }
  • 接下来修改next/layout/_macro/post.swig文件,将配置theme.post_copyright的两行注释掉,做下面的修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--{% if theme.post_copyright.enable and not is_index %}
    <div>
    {% include 'post-copyright.swig' with { post: post } %}
    </div>
    {% endif %}
    -->
    <div>
    {% if not is_index %}
    {% include 'my-copyright.swig' %}
    {% endif %}
    </div>
  • 最后修改next/source/css/_common/components/post/post.styl文件,在最后一行增加代码。

    1
    @import "my-post-copyright"
  • 当我们需要让某篇文章在最后可以显示版权信息时,只需要在MarkDown文件中写上 copyright: true 即可。如果觉得这样麻烦的话,可以在/scaffolds/post.md文件中添加刚刚的语句。

4. 参考链接

------------- 本文结束 感谢您的阅读 -------------

本文标题:Next主题优化:添加DaoVoice在线聊天、文章结束标记、自定义底部版权信息

文章作者:Perry

发布时间:2019年09月23日 - 10:07

最后更新:2019年09月24日 - 12:46

原始链接:https://perry96.com/archives/a3a69e9b.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%