长文 - 持续更新 | Gridea Pure主题魔改小记

切换繁体 · 2022-12-29 · # gridea # notes # github # tech

AI生成的内容仅供参考，不代表文章全部内容及本人立场

Tip

从入门到车门焊死（确信）[更新于2023.02.05]

本文更新于2023.06.16，最初写作于2022.12.29
主题ChangeLog页面已经上线，请前往此处查看，本文将不再更新。
另附：写作本文的目的只是记录，不是教程。本人人菜瘾大，技术十分之有限，写的代码非常之烂，都是本着能用就行写的，所以请大佬手下留情 QwQ

文章目录

要在Gridea中插入自动生成的目录，只需在合适的地方输入@[toc]即可，大小写不敏感

起因

对于Gridea Pure这款主题的魔改，最初是起源于最基础的一个需求——把评论系统换成waline，结果这就像打开了潘多拉的魔盒一般，一发不可收拾。

替换掉valine的目的很简单，因为我不想把自己leancloud的APPID与APPKEY直接暴露在网页的源码中，这样做会有安全隐患，何况valine目前作者并不打算重新开源，也遗留有一些安全问题，使得我总是不放心评论系统的安全，再加上waline在官方文档中说明：

由于 Waline 在存储上完全复用了 Valine 的数据结构，所以从 Valine 迁移至 Waline 非常简单。

这就很令人心动了，一不做，二不休，在阅读完Gridea官网的简要说明之后，直接点开主题目录的templates下的includes文件夹，看到valine.ejs，点进去直接开干！

⚠️ 注意：我的魔改方式多为硬编码，好处是修改起来十分方便，思维量小，代价也很明显，相当于是直接放弃了未来升级主题的可能性，这需要你来做出取舍再决定要不要“抄我的作业”。

折腾之路

valine to waline

waline的后端部署请参考官方文档

这里的替换是十分简单的，只需要注释掉原有valine的引入代码和div组件，替换成waline对应的内容，然后修改style区域内的内容，确保其能正确映射到waline的div上，最后在head.ejs中引入脚本与css文件就完事了，配置我就直接把之前用hexo的时候写的直接拿过来了，下面是参考代码。

Tip：别忘了在head.ejs或post.ejs中引入需要的文件哦。

<style>
	div#waline{
		width:<%=site.customConfig['vPercentWidth']%>%;
		max-width: <%=site.customConfig['vMaxWidth']%>px;
		padding: <%=site.customConfig['vPadding']%>
	}
	:root {
        --waline-font-size: 18px;
    }
	span.katex { font-size: 18px; }
	.wl-emoji-popup { font-size: 16px !important; }
	.wl-emoji-popup button { height: 2em; }
</style>

<% if(site.customConfig['valine']) { %>
	<div id="waline"></div>
<% } %>
<script type="module">
	import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
	init({
      el: '#waline',
      serverURL: 'https://waline.ydlk.cc',
	  avatar: '<%=site.customConfig['avatar']%>',
	  recordIp: <%=site.customConfig['recordIp']%>,
	  reaction: true,
	  pageview: true,
	  comment: true,
	  emoji: [
      '//unpkg.com/@waline/emojis@1.1.0/bmoji',
      '//unpkg.com/@waline/emojis@1.1.0/bilibili',
	  '//cdn.jsdelivr.net/npm/sticker-heo@2022.7.5/Sticker-100/',
    ],
	reaction: [
    'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_sunglasses.png',
    'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_thumbsup.png',
    'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_doge.png',	
	'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_confused.png',
	'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_sweat.png',
    'https://unpkg.com/@waline/emojis@1.1.0/bilibili/bb_sleepy.png',
  ],
	  dark: false,
      recaptchaV3Key: "写成你的，我自己开了的",
    });
</script>

我个人建议你把waline需要额外引入的内容放在post.ejs中的head部分。

waline的js引入也可以更换为https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/waline/1.5.4/Waline.min.js，字节跳动的cdn源，大陆友好

我站开启的评论登录提示的代码如下，插入在任意位置即可：

<script>
    var versionNo = '1.1.1';
    if(!window.localStorage.getItem('update-version') || window.localStorage.getItem('update-version') !=versionNo){
        window.localStorage.setItem('update-version',versionNo)
        alert('友情提示：我站已强制开启评论验证，请先在评论区点击登录，再进行评论，否则无法使用评论')
    }
</script>