• 基于 Fluid 主题的 Artitalk 说说美化


    欢迎移步我的网站

    本教程是对 Artitalk 魔改后写出来的,我博客使用的 Fluid 主题并没有说说页面功能,很早之前我便想将 Artitalk 用到博客里,但是 Artitalk 的默认样式实在和 Fluid 不配,也想不到能改成什么样比较合适。后面无意间看见了 HexoPlusPlus/HTALK 插件,意外发现样式和 Fluid 很配,然后想着将 HTALK 的样式套用到 Artitalk 上,说干就干,然后就有了这个。

    项目地址

    新建页面与模板

    首先在 Blog 的根目录下使用下面命令新建 talking 页面:

    hexo new page talking
    

    打开 source alkingindex.md , 在 metadata 中加上一行 layout:

    ---
    ...
    layout: talking
    ---
    

    然后在 themesfluidlayout 下新建 talking.ejs 文件,并加入如下内容(仿照留言板模板页面):

    <%
    page.layout = "talking"
    page.title = theme.talking.title || __('talking.title')
    page.subtitle = theme.talking.subtitle || __('talking.subtitle')
    page.banner_img = theme.talking.banner_img
    page.banner_img_height = theme.talking.banner_img_height
    page.banner_mask_alpha = theme.talking.banner_mask_alpha
    page.comments = false
    %>
    
    <article class="markdown-body">
      <%- page.content %>
      <hr>
      <%- js_ex(theme.static_prefix.artitalk, 'artitalk.min.js') %>
        <div id="artitalk_main"></div>
        <script>
            new Artitalk({
                appId: '<%- theme.talking.artitalk.appId %>',
                appKey: '<%- theme.talking.artitalk.appKey %>',
                serverURL: '<%- theme.talking.artitalk.serverURL %>',
                atComment: <% if(theme.talking.artitalk.atComment) {%>1<%} else {%>0<% } %>,
    <% if(theme.talking.artitalk.cssurl) {%>cssUrl: '<%- theme.talking.artitalk.cssurl %>',<% } %>
            })
        </script>
    </article>
    
    <% if(page.comments && theme.post.comments.enable) { %>
        <hr>
        <!-- Comments -->
        <article class="comments" id="comments">
          <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; padding-bottom: 10px;">
            <i class="iconfont icon-comments" aria-hidden="true"></i>
            <span><%= __('comment') %></span>
          </div>
          <hr>
          <% var type = '_partial/comments/' + theme.post.comments.type %>
          <%- partial(type) %>
        </article>
    <% } %>
    

    修改主题配置

    在 Fluid 的主题配置 yml 文件中,将 talking 页面的配置放到合适的地方,比如留言板页面配置的后面,方便之后维护,artitalk 的配置参见官方文档

    #---------------------------
    # 随口胡说页
    # Talking Page
    #---------------------------
    talking:
      enable: true
      banner_img: 
      banner_img_height: 60
      banner_mask_alpha: 0.3
      subtitle:  # 打字机内容
      artitalk:
        appId: # 你的 leancloud appId
        appKey: # 你的 leancloud appKey
        serverURL: # 你的 leancloud serverURL
        atComment: true # 是否开启说说评论
        cssurl: https://cdn.staticaly.com/gh/spaceskynet/Artitalk/master/dist/css/artitalk.min.css # 魔改版本的 css
    

    static_prefix 的下面加上 artitalk 的 cdn 地址,这里是我魔改过的版本。

    static_prefix:
      ...
      artitalk: https://cdn.staticaly.com/gh/spaceskynet/Artitalk/master/dist/js/
    

    接下来可以在 navbar 下一级的 menu 下加上 talking 的按钮,可以按照 Fluid 的官方文档添加 iconfont 图标。

    css 中有部分 fluid 的颜色变量,如要使用到其他主题,请自行修改 css 的颜色变量后使用自己修改的版本。

    添加全局的颜色变量

    themesfluidsourcecss\_variablesase.styl 中添加如下变量:

    // talking
    $talking-bg-color = theme-config("color.talking_bg_color", "rgba(249, 250, 251, 1)")
    $talking-bg-color-dark = theme-config("color.talking_bg_color_dark", "rgba(55, 65, 81, 1)")
    

    themesfluidsourcecss\_pages\_basecolor-schema.styl 中的 :rootdark-colors()下一级分别加上 --talking-bg-color

    :root
      ...
      --talking-bg-color $talking-bg-color
      ...
    
    dark-colors()
      ...
      --talking-bg-color $talking-bg-color-dark
      ...
    

    最后在主题配置文件中 color 下一级加上:

    color:
      ...
      # 随口胡说背景色
      # Color of main board
      talking_bg_color: "rgba(249, 250, 251, 1)"
      talking_bg_color_dark: "rgba(55, 65, 81, 1)"
    

    其它主题的颜色变量添加基本同理,参考各自的代码逻辑结构修改。

    在 leancloud 添加列

    主要是为了显示说说的用户名,似乎并不是那么好从说说获取用户名(可能我太cai了),所以我们通过在每次写作说说保存时记录上用户名,在说说的信息中多加一列用户名。

    在 LeanCloud 你创建应用下的数据存储的结构化数据下,点击 class 下的 shuoshuo,点击添加列,增加一个 userName 列,之前写的说说的用户名自行手动填写一下,保证都正常显示。

    最终效果

    弄完上述操作,差不多就是下面这个效果,更多可以参考我的说说页面,看着舒服多了……

    ex.png

  • 相关阅读:
    A linked list is given such that each node contains an additional random pointer which could point to any node in the list or null. Return a deep copy of the list.
    leetcode算法
    leetcode
    UVA 11076 Add Again
    UVA 10892 LCM Cardinality
    HDU 5961 传递
    UVALive 7040 Color
    2014ACM/ICPC亚洲区广州站题解
    HDU 5136 Yue Fei's Battle
    HDU 5129 Yong Zheng's Death
  • 原文地址:https://www.cnblogs.com/spaceskynet/p/15232881.html
Copyright © 2020-2023  润新知