hexo主题教程-添加Waline评论系统

XiaoTang2022-07-082024-03-02

前言

之前有文提及为hexo添加畅言云评，但是畅言云评需要登陆才能评论，而本教程将为你的Hexo添加waline评论系统

必读

本教程适用于使用ejs作为魔板的hexo主题。
涉及对源文件的修改，请注意备份。
需要一定HTML基础
本教程适用于主题不支持waline的同学

一、搭建Waline后端

本部分内容参见waline文档-搭建服务端

你只需要看到这里

二、引入主题

1.修改head.ejs

修改主题定义head标签的模板文件，大部分主题位于==_partial文件夹，名为head.ejs==，在head标签内加入：

  <script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />
<%- css('css/waline') %>

2.创建waline.ejs

在yourtheme/layout/_partial下新建文件waline。ejs，内容如下：

<div id="waline"></div>
 <script>
   new Waline({
       el: '#waline',
       serverURL: '<%- theme.waline.serverURL %>',
       avatar: '<%- theme.valine.avatar %>'    
   });
 </script>

3. 创建waline.css

在yourtheme/source/css下创建waline.css,内容如下
代码较长，已启用折叠功能。

点击展开/折叠

.waline-card {
    margin: 1.5rem auto;
}
.waline-card .card-content {
    padding: 20px 20px 5px 20px;
}

#waline p {
    margin: 2px 2px 10px;
    font-size: 1.05rem;
    line-height: 1.78rem;
}
#waline blockquote p {
    text-indent: 0.2rem;
}
#waline a {
    padding: 0 2px;
    color: #4cbf30;
    font-weight: 500;
    text-decoration: none;
}
#waline img {
    max-width: 100%;
    cursor: pointer;
}
#waline ol li {
    list-style-type: decimal;
}
#waline ol,
ul {
    display: block;
    padding-left: 2em;
    word-spacing: 0.05rem;
}
#waline ul li,
ol li {
    display: list-item;
    line-height: 1.8rem;
    font-size: 1rem;
}
#waline ul li {
    list-style-type: disc;
}
#waline ul ul li {
    list-style-type: circle;
}
#waline table, th, td {
    padding: 12px 13px;
    border: 1px solid #dfe2e5;
}
#waline table, th, td {
    border: 0;
}
table tr:nth-child(2n), thead {
    background-color: #fafafa;
}
#waline table th {
    background-color: #f2f2f2;
    min-width: 80px;
}
#waline table td {
    min-width: 80px;
}
#waline h1 {
    font-size: 1.85rem;
    font-weight: bold;
    line-height: 2.2rem;
}
#waline h2 {
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.9rem;
}
#waline h3 {
    font-size: 1.45rem;
    font-weight: bold;
    line-height: 1.7rem;
}
#waline h4 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5rem;
}
#waline h5 {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4rem;
}
#waline h6 {
    font-size: 1rem;
    line-height: 1.3rem;
}
#waline p {
    font-size: 1rem;
    line-height: 1.5rem;
}
#waline hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #ccc;
}
#waline blockquote {
    margin: 15px 0;
    border-left: 5px solid #42b983;
    padding: 1rem 0.8rem 0.3rem 0.8rem;
    color: #666;
    background-color: rgba(66, 185, 131, .1);
}
#waline pre {
    font-family: monospace, monospace;
    padding: 1.2em;
    margin: .5em 0;
    background: #272822;
    overflow: auto;
    border-radius: 0.3em;
    tab-size: 4;
}
#waline code {
    font-family: monospace, monospace;
    padding: 1px 3px;
    font-size: 0.92rem;
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}
#waline pre code {
    font-family: monospace, monospace;
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}
#waline pre[class*="language-"] {
    padding: 1.2em;
    margin: .5em 0;
}
#waline code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
}
#waline [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: inherit;
    margin-left: -1.3rem;
    margin-right: 0.4rem;
    margin-top: -1px;
    vertical-align: middle;
    left: unset;
    visibility: visible;
}
#waline b,
strong {
    font-weight: bold;
}
#waline dfn {
    font-style: italic;
}
#waline small {
    font-size: 85%;
}
#waline cite {
    font-style: normal;
}
#waline mark {
    background-color: #fcf8e3;
    padding: .2em;
}
#waline table, th, td {
    padding: 12px 13px;
    border: 1px solid #dfe2e5;
}
table tr:nth-child(2n), thead {
    background-color: #fafafa;
}
#waline table th {
    background-color: #f2f2f2;
    min-width: 80px;
}
#waline table td {
    min-width: 80px;
}
#waline [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: inherit;
    margin-left: -1.3rem;
    margin-right: 0.4rem;
    margin-top: -1px;
    vertical-align: middle;
    left: unset;
    visibility: visible;
}

4.修改config.yml

在主题配置文件中加入以下内容：

waline:
  enable: true
  # Waline 服务端部署参考 https://waline.js.org/guide/server/intro.html 客户端和服务端版本需一致
  # 下面是一个例子，请替换成自己的服务端
  serverURL: 'https://sxcomments.vercel.app' # 填写你部署的waline服务端地址
  avatar: 'mp' # Gravatar style : ''/mp/identicon/monsterid/wavatar/retro/hide

5.修改文章布局文件

提示
该步骤对于不同主题略有差别，需要一定理解能力

首先，你需要找到主题定义评论功能的ejs。

提示
你可以在 post.ejs、comments.ejs 等文件中查看。
如果你的主题已经支持某些评论系统，不妨在上述ejs文件中使用ctrl+f检索这些关键字。<>
另外，hexo s后浏览器的f12或许是个好帮手

若你成功定位到相应div，请加入以下内容

1
2
3

<% if (theme.waline && theme.waline.enable) { %>
    <%- partial('_partial/waline') %>
<% } %>

提示
你应当注意ejs的逻辑关系和html的嵌套关系

这是一个例子：

例如
对于matery主题，在layout/_partial/post-detail.ejs中有如下内容

<% if (theme.gitalk && theme.gitalk.enable) { %>
    <%- partial('_partial/gitalk') %>
<% } %>

<% if (theme.gitment.enable) { %>
    <%- partial('_partial/gitment') %>
<% } %>

<% if (theme.disqus.enable) { %>
    <%- partial('_partial/disqus') %>
<% } %>

<% if (theme.livere && theme.livere.enable) { %>
<%- partial('_partial/livere') %>
<% } %>

<% if (theme.valine && theme.valine.enable) { %>
    <%- partial('_partial/valine') %>
<% } %>

<% if (theme.minivaline && theme.minivaline.enable) { %>
    <%- partial('_partial/minivaline') %>
<% } %>