本教程是对 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
中的 :root
和 dark-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
列,之前写的说说的用户名自行手动填写一下,保证都正常显示。
最终效果
弄完上述操作,差不多就是下面这个效果,更多可以参考我的说说页面,看着舒服多了……