【博客】3-hexo主题博客魔改日志

参考资料

• 我的butterfly主题博客
• Waline文档

安装插件

安装 Waline 的依赖。可以通过 npm 安装：

npm install --save @waline/client

代码(作废)

在3-hexo主题博客[BlogRoot]\themes\3-hexo\layout_partial\comments目录中新建waline.ejs文件，，并添加如下代码：

<div id="waline"></div>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css">
<script src="https://unpkg.com/@waline/client"></script>
<script>
  Waline.init({
    el: '#waline',
    serverURL: '服务端绑定的域名,比如：https://waline.example.com',
    path: location.pathname,
    requiredMeta: ['nick', 'mail'], // 选定昵称和邮箱为必填项
    reaction: [
      'https://bu.dusays.com/2021/01/15/bc6a873446058.png',
      'https://bu.dusays.com/2021/01/15/fa9a45159649a.png',
      'https://bu.dusays.com/2021/01/15/733a99aac6f7e.png',
      'https://bu.dusays.com/2021/01/15/15fa98a4d6410.png',
      'https://bu.dusays.com/2021/01/15/4e19b17418bf0.png',
      'https://bu.dusays.com/2021/01/15/8e54f6361e3ce.png',
      'https://bu.dusays.com/2021/01/15/654a51ee35e02.png',
      'https://bu.dusays.com/2021/01/15/2b85a8620ac84.png',
    ],
    locale: {
      reactionTitle: '感谢您浏览此文，您认为这篇文章怎么样？',
      placeholder: `
昵称和邮箱为必填项，为了您能及时收到相关回复的邮件通知，请确保邮箱的正确性
您可以作为登录用户点击头像后在个人资料页中修改自己的专属标签（比如：大佬、靓仔/靓女）
登录后您可以在评论区点击自己头像右上角的“×”退出登录`
    }
  });
</script>

代码(更新)

由于开启了主题自带的快捷键shortcutKey，上面的代码渲染的评论区不能适配快捷键功能，导致评论框中输入文字时会触发快捷键，将代码修改为以下内容。
在3-hexo主题博客[BlogRoot]\themes\3-hexo\layout_partial\comments目录中新建waline.ejs文件，，并添加如下代码：

<section id="comments" class="waline">
    <style>
        aside.comment-bar {
            margin: auto 30px;
        }
        aside.comment-bar a {
            font-size: 25px;
            color: #309e85;
        }
    </style>
    <div id="waline"></div>
    <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css">
    <script src="https://unpkg.com/@waline/client"></script>
    <script>
        var loadComment = function() {
            Waline.init({
                el: '#waline',
                serverURL: 'https://waline.aligu.top',
                path: location.pathname,
                requiredMeta: ['nick', 'mail'],
                reaction: [
                    'https://bu.dusays.com/2021/01/15/bc6a873446058.png',
                    'https://bu.dusays.com/2021/01/15/733a99aac6f7e.png',
                    'https://bu.dusays.com/2021/01/15/15fa98a4d6410.png',
                    'https://bu.dusays.com/2021/01/15/4e19b17418bf0.png',
                    'https://bu.dusays.com/2021/01/15/8e54f6361e3ce.png',
                    'https://bu.dusays.com/2021/01/15/654a51ee35e02.png',
                    'https://bu.dusays.com/2021/01/15/2b85a8620ac84.png',
                ],
                locale: {
                    reactionTitle: '感谢浏览，您认为这篇文章怎么样？',
                    placeholder: `
昵称和邮箱为必填项，为了您能及时收到相关回复的邮件通知，请确保邮箱的正确性
您可以作为登录用户点击头像后在个人资料页中修改自己的专属标签（比如：大佬、靓仔/靓女）
登录后您可以在评论区点击自己头像右上角的“×”退出登录`
                }
            });

            // 添加 alt 属性
            document.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll('.wl-reaction-img img').forEach(img => {
                    if (!img.hasAttribute('alt')) {
                        img.setAttribute('alt', 'Reaction image');
                    }
                });
            });
        };

        // 直接调用 loadComment 在页面加载时自动显示评论区
        loadComment();
    </script>
</section>

修改样式，在[BlogRoot]\themes\3-hexo\source\css\style.styl文件中添加如下代码：

.wl-panel {
  margin: 0 !important;
}

#post .pjax::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

后记

能力有限，Waline评论区昵称、邮箱和网址输入框中输入字母会和部分shortcutKey快捷键冲突，该问题目前还未解决。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 3415226167@qq.com