【Valine】評論系統魔改美化大全，添加自定義表情

目錄

• 改進1 自定義表情包
• 改進2 自定義語言
• BUG3
• BUG4
• BUG5，非最新版Deserts
• BUG6 定時器策略
• 其餘記錄
  • MAIL_SUBJECT
  • MAIL_TEMPLATE
  • MAIL_SUBJECT_ADMIN
  • MAIL_TEMPLATE_ADMIN
  • 記得寫BLOGGER_EMAIL

全文根據Deserts大佬的版本進行修改，如今評論沒有辦法添加圖片

Deserts大佬的博客：【首選】
https://panjunwen.com/valine-admin-document/

Deserts的GitHub：【次選】
https://github.com/DesertsP/Valine-Admin

可改進：
做者cungudafa
Valine-實現QQ郵箱識別生成頭像地址（完美解決頭像問題）
https://blog.csdn.net/cungudafa/article/details/104638730/

Valine--修復評論者暱稱跳轉外鏈出錯
https://blog.csdn.net/cungudafa/article/details/104652633

改進1 自定義表情包

Valine自定義B站表情包

<script src="https://files.cnblogs.com/files/guoxinyu/av-min.js"></script>
<script src="https://files.cnblogs.com/files/guoxinyu/Valine.min.js"></script>
<script>
var valine = new Valine();
valine.init({
av: AV,
el:'#comment_form_container',
appId:'TbSjOukB6kBSySOsegHDXYQb-xxxxxx', 
appKey:'6lbP3qA1UbWhSixxxxiDxxx', 
emoticon_url: "https://xiamuyourenzhang.cn/alu", 
emoticon_list: ["ic_emoji_baiyan.png","ic_emoji_bishi.png","ic_emoji_bizui.png","ic_emoji_chan.png","ic_emoji_daku.png","ic_emoji_dalao.png","ic_emoji_dalian.png","ic_emoji_dianzan.png","ic_emoji_doge.png","ic_emoji_facai.png","ic_emoji_fadai.png","ic_emoji_fanu.png","ic_emoji_ganga.png","ic_emoji_guilian.png","ic_emoji_guzhang.png","ic_emoji_haixiu.png","ic_emoji_heirenwenhao.png","ic_emoji_huaixiao.png","ic_emoji_jingxia.png","ic_emoji_keai.png","ic_emoji_koubi.png","ic_emoji_kun.png","ic_emoji_lengmo.png","ic_emoji_liubixue.png","ic_emoji_liuhan.png","ic_emoji_liulei.png","ic_emoji_miantian.png","ic_emoji_mudengkoudai.png","ic_emoji_nanguo.png","ic_emoji_outu.png","ic_emoji_qinqin.png","ic_emoji_se.png","ic_emoji_shengbing.png","ic_emoji_shengqi.png","ic_emoji_shuizhao.png","ic_emoji_sikao.png","ic_emoji_test.png","ic_emoji_tiaokan.png","ic_emoji_tiaopi.png","ic_emoji_touxiao.png","ic_emoji_tuxue.png","ic_emoji_weiqu.png","ic_emoji_weixiao.png","ic_emoji_wunai.png","ic_emoji_xiaoku.png","ic_emoji_xieyanxiao.png","ic_emoji_yiwen.png","ic_emoji_yun.png","ic_emoji_zaijian.png","ic_emoji_zhoumei.png","ic_emoji_zhuakuang.png","ic_emoji.png","吐.png","噴血.png","狂汗.png","不說話.png","汗.png","坐等.png","獻花.png","不高興.png","中刀.png","害羞.png","皺眉.png","小眼睛.png","中指.png","尷尬.png","瞅你.png","想想.png","中槍.png","得意.png","腫包.png","扇耳光.png","親親.png","驚喜.png","臉紅.png","無所謂.png","便便.png","憤怒.png","蠟燭.png","獻黃瓜.png","內傷.png","投降.png","觀察.png","看不見.png","擊掌.png","摳鼻.png","邪惡.png","看熱鬧.png","口水.png","抽菸.png","鎖眉.png","裝大款.png","吐舌.png","無奈.png","長草.png","贊一個.png","呲牙.png","無語.png","陰暗.png","不出所料.png","嚥氣.png","期待.png","高興.png","吐血倒地.png","哭泣.png","歡呼.png","黑線.png","喜極而泣.png","噴水.png","深思.png","鼓掌.png","暗地觀察.png"],  
avatar:'monsterid',
placeholder:' \\(≧▽≦)/你想說什麼呢，記得填郵箱哦', 
avatarForce:true, 
visitor:true, 
lang:'zh-cn'
})
</script>

用的夏目友人賬大哥的https://xiamuyourenzhang.cn/

改進2 自定義語言

做者說的，不過如今好像不用改了

<script>
    i18n =  {
        nick: '名字',
        mail: '郵箱',
        link: '網站 (可選)',
        no_comment_yet: '搶沙發了',
        submit: '提交',
        reply: '回覆',
        cancel_reply: '取消回覆',
        comment_count: '已有{}條評論',
        cancel: '取消',
        confirm: '確認',
        continue: '繼續',
        more: '加載更多...',
        preview: '預覽',
        emoji: '表情',
        error99: '初始化失敗，請檢查init中的`el`元素.',
        error100: '初始化失敗，請檢查你的AppId和AppKey.',
        error401: '未經受權的操做，請檢查你的AppId和AppKey.',
        error403: '訪問被api域名白名單拒絕，請檢查你的安全域名設置.',
        seconds: '秒前',
        minutes: '分鐘前',
        hours: '小時前',
        days: '天前',
        now: '剛剛',
        input_tips: '您輸入的網址或郵箱格式不正確，請修正後提交！'

    }
    if ( $("#valine-comments").length > 0 ) {
        new Valine({
            av: AV,
            el: '#valine-comments',
            maxNest: 4,
            pageSize: 10,
            lang: 'zh-cn',
            i18n: i18n,
            emoticon_url: 'https://cloud.panjunwen.com/alu',
            emoticon_list: ["吐.png", "噴血.png", "狂汗.png", "不說話.png", "汗.png", "坐等.png", "獻花.png", "不高興.png", "中刀.png", "害羞.png", "皺眉.png", "小眼睛.png", "中指.png", "尷尬.png", "瞅你.png", "想想.png", "中槍.png", "得意.png", "腫包.png", "扇耳光.png", "親親.png", "驚喜.png", "臉紅.png", "無所謂.png", "便便.png", "憤怒.png", "蠟燭.png", "獻黃瓜.png", "內傷.png", "投降.png", "觀察.png", "看不見.png", "擊掌.png", "摳鼻.png", "邪惡.png", "看熱鬧.png", "口水.png", "抽菸.png", "鎖眉.png", "裝大款.png", "吐舌.png", "無奈.png", "長草.png", "贊一個.png", "呲牙.png", "無語.png", "陰暗.png", "不出所料.png", "嚥氣.png", "期待.png", "高興.png", "吐血倒地.png", "哭泣.png", "歡呼.png", "黑線.png", "喜極而泣.png", "噴水.png", "深思.png", "鼓掌.png", "暗地觀察.png"],
            app_id: '21b4bbmhlLq8MNwsqNie33OY-gzGzoHsz',
            app_key: 'yJIzuFTFbl8b7onVYAkkN3iN',
            placeholder: 'Write a Comment'
        });
    }
</script>

BUG3

這個錯誤我沒犯，記錄一下

BUG4

BUG5，非最新版Deserts

https://deserts.io/assets/js/Valine.min.js

BUG6 定時器策略

其餘記錄

https://www.liaofuzhan.com/posts/2114475547.html

MAIL_SUBJECT

${PARENT_NICK}，您在『${SITE_NAME}』上的評論收到了回覆

MAIL_TEMPLATE

<div style="border-radius: 10px 10px 10px 10px;font-size:13px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微軟雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}">『${SITE_NAME}』</a>上的留言有新回覆啦！！！</p></div><div style="margin:40px auto;width:90%"><p>"<strong>${PARENT_NICK}</strong>" 同窗，您曾發表評論：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>"<strong>${NICK}</strong>" 給您的回覆以下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您能夠點擊：<a style="text-decoration:none; color:#12addb" href="${POST_URL}">[回覆的完整內容] </a>進行查看。歡迎再次光臨<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> 『${SITE_NAME}』</a>！！！</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div><script>     if(window.location.hash){         var checkExist = setInterval(function() {            if ($(window.location.hash).length) {               $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);               clearInterval(checkExist);            }         }, 100);     } </script>

MAIL_SUBJECT_ADMIN

叮咚！『${SITE_NAME}』上有了新評論！

MAIL_TEMPLATE_ADMIN

<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微軟雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> 『${SITE_NAME}』 </a>上有了新的評論 </p></div><div style="margin:40px auto;width:90%"><p><strong>"${NICK}"</strong> 發表評論：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p><a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">[查看詳情]</a></p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div><script>     if(window.location.hash){         var checkExist = setInterval(function() {            if ($(window.location.hash).length) {               $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);               clearInterval(checkExist);            }         }, 100);     } </script>

記得寫BLOGGER_EMAIL