Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

新增对Valine评论系统的支持 #646

Open
wants to merge 4 commits into
base: master
from
Open

新增对Valine评论系统的支持 #646

wants to merge 4 commits into from

Conversation

@xCss
Copy link

@xCss xCss commented Oct 29, 2017

新增对Valine评论系统的支持

_config.yml

#6、Valine https://valine.js.org
valine: 
 appid:  #Leancloud应用的appId
 appkey:  #Leancloud应用的appKey
 verify: false #验证码
 notify: false #评论回复提醒
 avatar: mm #评论列表头像样式:''/mm/identicon/monsterid/wavatar/retro/hide
 placeholder: Just go go #评论框占位符

layout/_partial/article.ejs

  <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" style="margin:10px;padding:10px;background:#fff;">
      <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
    </section>
  <% } %>

layout/_partial/post/valine.ejs

<div id="vcomment" class="comment"></div> 
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
   var notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }
</script>

yilia

@donk3yzz
Copy link

@donk3yzz donk3yzz commented Dec 6, 2017

你好,我在博客中开启了valine,但是有一篇文章下评论块出现在了文章中间使我不得不关闭了评论块,对此毫无办法...

@xCss
Copy link
Author

@xCss xCss commented Dec 6, 2017

@donk3yzz 你好,你可以尝试性的将layout/_partial/post/valine.ejs文件中的

        new Valine({
            el: '.comment',
            ...
        });

修改成:

        new Valine({
            el: '#vcomment',
            ...
        });

以上,祝好~

@donk3yzz
Copy link

@donk3yzz donk3yzz commented Dec 6, 2017

@xCss 起作用了!感谢!
不过我还有一个问题,为什么我在本地hexo server的页面上加载评论就很快,而在域名上评论块就加载的很慢甚至经常加载不出来...

@xCss
Copy link
Author

@xCss xCss commented Dec 6, 2017

@donk3yzz 我看你貌似是某些图片加载比较慢。你可以尝试性的将layout/_partial/post/valine.ejs中的

    window.onload = function() {
        new Valine({
            el: '#vcomment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }

改成

        new Valine({
            el: '#vcomment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });

只是尝试,不确定是否有用~~

@donk3yzz
Copy link

@donk3yzz donk3yzz commented Dec 6, 2017

@xCss 也解决了~虽然浏览器小图标还是一直在转...不过还是非常感谢你

@deepred5
Copy link

@deepred5 deepred5 commented Apr 5, 2018

支持,配置问题可以参考我的文章

@MonoLogueChi
Copy link

@MonoLogueChi MonoLogueChi commented Apr 9, 2018

改成了响应式布局,宽度应该能够自动和上面的文章部分对齐

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" class="comments">
      <style>
        .comments{margin:30px;padding:10px;background:#fff}
        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
      </style>
      <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
  </section>
<% } %>

电脑(宽屏)
image

手机(窄屏)
image

具体样式可以看https://www.xxwhite.com/2017/Valine.html

@shangzekai
Copy link

@shangzekai shangzekai commented May 2, 2018

@xCss 您好,按照您上面的步骤操作了一下,但是网站没有任何反应 ,也没有报错,不知道啥原因。www.shangzekai.xyz这个是我的网站

@xCss
Copy link
Author

@xCss xCss commented May 2, 2018

@shangzekai ,我这看到的是显示了的。有可能是你的网络问题。
screencapture-shangzekai-xyz-2018-03-06-yaf-e6-a8-a1-e5-9e-8b-2018-05-02-17_00_30

@shangzekai
Copy link

@shangzekai shangzekai commented May 2, 2018

@xCss 谢谢您 还有就是https://shangzekai.leanapp.cn/ 这个怎么登录呢 _User表中的数据为空

@xCss
Copy link
Author

@xCss xCss commented May 2, 2018

@shangzekai
参考 https://panjunwen.com/diy-a-comment-system/

LeanCloud控制面板:存储-你的数据库-user表-添加行-输入email、用户名、密码等必要信息-完成。这样就能访问评论管理了。

-by @panjunwen

Copy link

@liuchunming033 liuchunming033 left a comment

只有部署到网上,才能看到评论系统吗。。本地调试时是否可以看到呢?我现在本地调试看不到评论框

@liuchunming033
Copy link

@liuchunming033 liuchunming033 commented May 8, 2018

_config.yml这里说的_config.yml是主题目录下的文件还是博客根目录下的文件

@ghost
Copy link

@ghost ghost commented May 15, 2018

为什么我的评论系统不仅在进入博文后显示,还在主页的每一篇博文下面显示?怎么修改?
我的博客:www.startowerblog.com

@xCss
Copy link
Author

@xCss xCss commented May 15, 2018

@startower 这很明显是你改错了模板。

没有源码,暂不确定是你改错了哪里~

@ghost
Copy link

@ghost ghost commented May 15, 2018

@xCss 尴尬,代码放错位置了

@HuipengXu
Copy link

@HuipengXu HuipengXu commented Aug 27, 2018

请问各位,我的评论系统也在主页出现了,确定代码位置什么的都没放错,实在不知道问题出在哪里

@saranfeishuang
Copy link

@saranfeishuang saranfeishuang commented Aug 27, 2018

@Brycexxx 把article.ejs里的Valine评论系统代码往上移动一些,移到<% if (!index && post.comments){ %>下面试试

@HuipengXu
Copy link

@HuipengXu HuipengXu commented Aug 27, 2018

@saranfeishuang
多谢啦,还是我太菜了,你这么一说感觉恍然大悟

@saranfeishuang
Copy link

@saranfeishuang saranfeishuang commented Aug 27, 2018

@Brycexxx “关于我”那里,请问您是怎么换行的,我输入换行符后会自动把
的<>转义掉

@HuipengXu
Copy link

@HuipengXu HuipengXu commented Aug 27, 2018

@saranfeishuang
我就是用了<br>,没其他的了

@saranfeishuang
Copy link

@saranfeishuang saranfeishuang commented Aug 27, 2018

@Brycexxx 好吧,谢谢

@HuipengXu
Copy link

@HuipengXu HuipengXu commented Aug 27, 2018

@saranfeishuang
客气了

@caozhengbo
Copy link

@caozhengbo caozhengbo commented Oct 9, 2018

问题1:Code -1: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
问题2:在哪里调试这个对话框的大小布局

@dondurma
Copy link

@dondurma dondurma commented Nov 26, 2018

这个配置能同样适用于yelee主题吗?

@sweetysweets
Copy link

@sweetysweets sweetysweets commented Jan 4, 2019

image
请问我的博客为什么只显示一个横框……

@sweetysweets
Copy link

@sweetysweets sweetysweets commented Jan 4, 2019

我的博客地址是sweets.ml 求大佬们救救孩子emmm

@MonoLogueChi
Copy link

@MonoLogueChi MonoLogueChi commented Jan 4, 2019

我的博客地址是sweets.ml 求大佬们救救孩子emmm
请设置正确的安全域名

@mxy493
Copy link

@mxy493 mxy493 commented Jan 19, 2019

按着上面代码来的,这是什么问题吖?

WARN  Partial _partial/article does not exist. (in post.ejs)                     
WARN  Partial _partial/article does not exist. (in post.ejs)                     
WARN  Partial _partial/article does not exist. (in post.ejs)                     
WARN  Partial article does not exist. (in _partial\archive.ejs)                  
WARN  Partial article does not exist. (in _partial\archive.ejs)                  
WARN  Partial article does not exist. (in _partial\archive.ejs)

用了 @MonoLogueChi 这位同学的代码没问题了,Nice

@ohMyJason
Copy link

@ohMyJason ohMyJason commented Mar 13, 2019

谢谢您,通过您的博客 我解决了问题

@IronMan1024
Copy link

@IronMan1024 IronMan1024 commented May 19, 2019

你好,我的配置好了之后,评论不了是什么情况,模板什么的都能显示,但就是写不了评论,点击回复按钮没反应

<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;

This comment has been minimized.

@Coande

Coande Oct 8, 2019

这样写会导致 notify、verify 永远为 false,应改为:

  var notify = '<%= theme.valine.notify %>' == 'true' ? true : false;
  var verify = '<%= theme.valine.verify %>' == 'true' ? true : false;
@xiaqunfeng
Copy link

@xiaqunfeng xiaqunfeng commented Nov 6, 2019

配置成功了,非常感谢这个PR。顺便详细记录了一下配置过程,给有需要的人:http://xiaqunfeng.cc/2019/11/06/hexo-valine/

@Fiuck
Copy link

@Fiuck Fiuck commented Dec 23, 2019

你好,我的已经配置了,但是评论完之后一刷新页面评论就消失了。麻烦谁能帮忙看一下,https://lemcoo.top

@yansheng836
Copy link

@yansheng836 yansheng836 commented Dec 23, 2019

你好,我的已经配置了,但是评论完之后一刷新页面评论就消失了。麻烦谁能帮忙看一下,https://lemcoo.top

好像没有问题啊

@Fiuck
Copy link

@Fiuck Fiuck commented Dec 23, 2019

@yansheng836
Copy link

@yansheng836 yansheng836 commented Dec 23, 2019

@Fiuck 猜测是配置问题,你这个是next主题的,可能会有点区别,而且next主题好像集成了Valine评论系统:https://github.com/iissnan/hexo-theme-next/search?q=Valine&unscoped_q=Valine,只需要注册账号,然后配置即可。

@Fiuck
Copy link

@Fiuck Fiuck commented Dec 24, 2019

@Fiuck
Copy link

@Fiuck Fiuck commented Dec 24, 2019

@yansheng836
Copy link

@yansheng836 yansheng836 commented Dec 24, 2019

valine下的enable不设置为true吗?

------------------ 原始邮件 ------------------ 发件人: "荷塘月色"<notifications@github.com>; 发送时间: 2019年12月24日(星期二) 下午4:21 收件人: "litten/hexo-theme-yilia"<hexo-theme-yilia@noreply.github.com>; 抄送: "十二礼"<643948989@qq.com>; "Mention"<mention@noreply.github.com>; 主题: Re: [litten/hexo-theme-yilia] 新增对Valine评论系统的支持 (#646) @Fiuck https://github.com/theme-next/hexo-theme-next/blob/master/_config.yml#L617-L634 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

valine下的enable是需要设置为true,我只是想提醒你:1.next主题已集成valine,只需要进行对应的配置即可。2.如果配置后有问题,应该是配置不当的问题(配置错误、valine账号问题?),要提问也应该到next主题项目提问(因为也有可能是bug)。

@Fiuck
Copy link

@Fiuck Fiuck commented Dec 25, 2019

@nick-zhy
Copy link

@nick-zhy nick-zhy commented Jun 26, 2020

您好,我提示Code 403: 访问被API域名白名单拒绝,请检查你的安全域名设置.
但是我在leancloud上已经添加了所有域名,一直都无法使用

@yansheng836
Copy link

@yansheng836 yansheng836 commented Jun 30, 2020

您好,我提示Code 403: 访问被API域名白名单拒绝,请检查你的安全域名设置.
但是我在leancloud上已经添加了所有域名,一直都无法使用

我记得我之前在leancloud上添加域名后,立即就生效了,你可以先清下浏览器缓存试一下。

@nick-zhy
Copy link

@nick-zhy nick-zhy commented Jun 30, 2020

您好,我提示Code 403: 访问被API域名白名单拒绝,请检查你的安全域名设置.
但是我在leancloud上已经添加了所有域名,一直都无法使用

我记得我之前在leancloud上添加域名后,立即就生效了,你可以先清下浏览器缓存试一下。

恩是的,我成功了,谢谢您的教程

@LiuQixuan
Copy link

@LiuQixuan LiuQixuan commented Jul 14, 2020

app_id 和 app_key 会被以script的形式渲染到页面里,有点危险啊.

@helloworld-dlx
Copy link

@helloworld-dlx helloworld-dlx commented Aug 9, 2020

我的配置好了,但没有显示。哪位大佬帮忙看看:https://yitee.github.io

@helloworld-dlx
Copy link

@helloworld-dlx helloworld-dlx commented Aug 9, 2020

_config.yml

valine_appid: jGcu64m7fjMl5KdSrGFjtJrc-MdYXbMMI
valine_appkey: rOwoqUYW7ASwOGYRN6kG65SG

article.ejs

<% if (theme.valine_appid && theme.valine_appkey){ %>
    <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
      }) %>
    <% } %>

valine.ejs

<script>
new Valine({
    el: '#comment' ,
    notify:false, 
    verify:false, 
    appId: '<%=theme.valine_appid%>',
    appKey: '<%=theme.valine_appkey%>',
    placeholder: 'ヾノ≧∀≦)o欢迎评论!',
    path:window.location.pathname, 
    avatar:'mm' 
});

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">请填写正确的昵称和邮箱!</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            e.stopPropagation();

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
    }, true);
</script>

但没有显示

@helloworld-dlx
Copy link

@helloworld-dlx helloworld-dlx commented Aug 9, 2020

已解决,谢谢

@WisleyWang
Copy link

@WisleyWang WisleyWang commented Apr 6, 2021

您好 ,我发现我的layout下的_partial下并没有article.ejs 只有archive.ejs 是一样的吗? 这个是怎么回事呢

@WisleyWang
Copy link

@WisleyWang WisleyWang commented Apr 7, 2021

_config.yml

valine_appid: jGcu64m7fjMl5KdSrGFjtJrc-MdYXbMMI
valine_appkey: rOwoqUYW7ASwOGYRN6kG65SG

article.ejs

<% if (theme.valine_appid && theme.valine_appkey){ %>
    <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
      }) %>
    <% } %>

valine.ejs

<script>
new Valine({
    el: '#comment' ,
    notify:false, 
    verify:false, 
    appId: '<%=theme.valine_appid%>',
    appKey: '<%=theme.valine_appkey%>',
    placeholder: 'ヾノ≧∀≦)o欢迎评论!',
    path:window.location.pathname, 
    avatar:'mm' 
});

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">请填写正确的昵称和邮箱!</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            e.stopPropagation();

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
    }, true);
</script>

但没有显示
没有article.ejs 怎么办

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet