LeanCloud保姆级配置教程

教程 专栏收录该内容
23 篇文章 0 订阅

前言

之前写了一篇LeanCloud+Yilia的文章👉 https://blog.lete114.top/article/addee0b6.html

我觉得还不够详细,而且之前写的没有Qmsg酱(QQ评论提醒)、Server酱(微信评论提醒)

特此写了这篇更详细的,堪称保姆级别的教程了

废话不多说教程开始

创建LeanCloud应用

注册我就不多说了,有手有脑都会

注意:一定要选择国际版,如果你选择的是华北或者华东的话,Valine后台评论管理是需要备案才能绑定的

打开LeanCloud

官网:https://console.leancloud.app/#/app
注册登陆后长这样
image.png
点击下边的创建应用填写应用昵称点击创建即可

image.png

打开创建的应用

选择云引擎–>设置–>云引擎域名(输入自己喜欢的一个的前缀)
image.png
当然如果你有自己的域名也可以选择绑定自己的域名,选择设置–>域名绑定–>云引擎域名
image.png

自定义环境变量

选择云引擎–>设置–>添加自定义环境变量

变量名示例说明
SITE_NAMELete乐特个人博客[必填]网站名称
SITE_URLhttps://blog.lete114.top[必填]网站地址
SMTP_USERadmin@lete114.top[必填]邮箱地址
SMTP_PASS123456789[必填]邮箱授权码
(部分邮箱服务商默认开启SMTP)
(如果没有授权码可直接填写邮箱密码)
SMTP_SERVICEQQ[必填]邮箱服务商查询相关详细
SENDER_NAMELete乐特[必填]寄件人名称
TEMPLATE_NAMErainbow[必填] 设置提醒邮件的主题
看下方有主题模板
ADMIN_URLhttps://letetest.leanapp.cn[可选] 后台管理地址
SCKEYSCU100890xxxxxx293e1xxx9dbfe82axxxx2dc[可选] server 酱的 SCKEY(微信提醒)
QMSG_KEYfdexxxx42a1xxx28f16d5xxxxa00[可选] Qmsg 酱的密钥
QQ123456789[可选]Qmsg 酱发送的 qq,不填为全部
支持多个,用英文逗号分隔即可
QQ_SHAKEtrue[可选]填写代表发送 QQ 戳一戳
INFO<p style='color:red'>test<p>[可选] 自定义信息输出,支持 HTML 代码
LeanCloud控制台日志信息输出
faviconhttps://cdn.jsdelivr.net/gh/lete114/lete114.github.io/img/favicon.ico[可选] 网页 favicon 图标
TO_EMAILadmin@lete114.top[可选]博主通知收件地址,默认使用SMTP_USER
SPAM_WORDS检测的内容,如:单号,物流[可选] 需要对屏蔽的关键词,关键词用半角逗号分隔
MAIN_COLOR#ff9191[可选] 仅针对 custom2 模板主题的主要颜色
MAIN_IMGhttps://cdn.jsdelivr.net/gh/lete114/CDN/BoBoPic/22.jpg[可选] 仅针对 custom2 模板主题的头图

邮箱主题模板

主题说明
default默认主题
rainbow原版的 rainbow
custom1基于🎉梨花町の肾兄さん🎉的模板
custom2对 custom1 的改进版

参考我博客的自定义环境变量

部署

选择云引擎–>部署–>部署项目–>Git部署–>配置Git–>填写下方任意一个地址–>保存–>生产环境–>部署
Lete乐特个人定制:https://github.com/lete114/Valine-Admin-Server.git
小康:https://github.com/sviptzk/Valine-Admin-Server.git

创建定时任务

  1. 定时检查24小时内漏发的邮件通知
    生产环境选择resend_mails
    选择Cron表达式时间自己调整0 0 1 * * *

  2. 自动唤醒
    生产环境选择self_wake
    选择Cron表达式时间自己调整0 0/60 0 * * ?

image.png

设置安全域名

这里设置的是你博客的地址,你博客有多少个地址就填多少个地址,不然评论显示403
image.png

申请Qmsg酱

  1. 打开官网
    官网:https://qmsg.zendee.cn/
    点击登陆(我选择的是QQ登陆)
    image.png

  2. 添加QQ
    可填写多个
    image.png

  3. 点击右上角文档
    send后面的key复制到LeanCloudQMSG_KEY环境变量后保存即可
    image.png

申请Server酱

和Qmsg类似
官网:http://sc.ftqq.com/3.version

Valine 配置

  1. 打开C:\Hexo-Blog\themes\Butterfly\_config.yml

注意:下方步骤由Butterfly主题独有,如果你是其他主题请自行查看主题源码

找到# comments修改valine的js地址一下人选其一
Lete乐特个人定制:https://cdn.jsdelivr.net/gh/lete114/CDN/Valine/Valine-Lete3.2-min.js
HCLonely魔改版:https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

  # comments
  blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
  valine: https://cdn.jsdelivr.net/gh/lete114/CDN/Valine/Valine-Lete3.2-min.js
  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
  utterances: https://utteranc.es/client.js
  1. 再次找到valine添加masterfriends
# valine
# https://valine.js.org
valine:
  enable: true # if you want use valine,please set this value is true
  master: 2a77xxx15437xxxd7f4442e2 # 你邮箱的md5加密(百度md5加密)
  friends: ed5xxxcfe547babab7xxx6893b # 你朋友的邮箱md5加密
  appId: qvkfTxxxxxACiF4lscUxxxYXbMMI # leancloud application app id
  appKey: WOUxxx5Pmtwxxxrog # leancloud application app key
  notify: true # valine mail notify (true/false) Deprecated in v1.4.0+
  verify: false # valine verify code (true/false) Deprecated in v1.4.0+
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 建议使用QQ邮箱,评论头像采用QQ头像 #评论框占位符
  guest_info: nick,mail,link #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  emojiCDN:  # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields nick/mail/link
  bg: # valine background
  count: true # dispaly comment count in top_img
  1. 随后到C:\Hexo-Blog\themes\Butterfly\layout\includes\comments\valine.pug添加
  window.valine = new Valine({
    el:'#vcomment',
    master:'#{theme.valine.master}',
    friends:'#{theme.valine.friends}',
    appId: '#{theme.valine.appId}',
    appKey: '#{theme.valine.appKey}',
    #省略....
  1. 添加自定义表情包[可选]
    打开C:\Hexo-Blog\themes\Butterfly\layout\includes\comments\valine.pug
  window.valine = new Valine({
    el:'#vcomment',
    master:'#{theme.valine.master}',
    friends:'#{theme.valine.friends}',
    #省略....
    enableQQ: #{theme.valine.enableQQ},
    requiredFields: requiredFields,
    emojiMaps: {
              "1":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/1.gif",
              "001":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/001.png",
              "002":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/002.png",
              "003":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/003.png",
              #省略....
              "0104":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/104.jpg",
              "0105":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/105.jpg",
              "0106":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/106.gif"
          }
  });
  1. valine.pug文件夹的全部内容展示
- let emojiMaps = '""'
if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)

#vcomment.vcomment
script(src=url_for(theme.CDN.valine))
script.
  var requestSetting = function (from,set) {
    var from = from
    var setting = set.split(',').filter(function(item){
    return from.indexOf(item) > -1
    });
    setting = setting.length == 0 ? from :setting;
    return setting
  }

  var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
  var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')

  window.valine = new Valine({
    el:'#vcomment',
    master:'#{theme.valine.master}',
    friends:'#{theme.valine.friends}',
    appId: '#{theme.valine.appId}',
    appKey: '#{theme.valine.appKey}',
    placeholder: '#{theme.valine.placeholder}',
    avatar: '#{theme.valine.avatar}',
    meta: guestInfo,
    pageSize: '#{theme.valine.pageSize}',
    lang: '#{theme.valine.lang}',
    recordIP: #{theme.valine.recordIP},
    serverURLs: '#{theme.valine.serverURLs}',
    emojiCDN: '#{theme.valine.emojiCDN}',
    emojiMaps: !{emojiMaps},
    enableQQ: #{theme.valine.enableQQ},
    requiredFields: requiredFields,
    emojiMaps: {
              "1":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/1.gif",
              "001":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/001.png",
              "002":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/002.png",
              "003":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/003.png",
              "004":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/004.png",
              "005":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/005.png",
              "006":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/006.png",
              //- 图片过多,我这里就省略了
              "0103":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/103.jpg",
              "0104":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/104.jpg",
              "0105":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/105.jpg",
              "0106":"https://cdn.jsdelivr.net/gh/lete114/CDN/emoji/106.gif"
          }
  });


表情包效果图
image.png

修改Valine评论区样式

  1. 打开C:\Hexo-Blog\themes\Butterfly\_config.yml
    找到theme_color:修改main:颜色即可
theme_color:
   enable: true
   main: "#e58a8a" # 文章颜色
   paginator: "#00c4b6" # 分页器的颜色
   button_hover: "#e58a8a" # 鼠标移动到按钮上的显示的颜色
   text_selection: "#00c4b6" # 选择文字的背景颜色
   link_color: "#99a9bf" # 链接颜色
   meta_color: "#858585"
   hr_color: "#e58a8a" # 小剪刀颜色、小摩托颜色
   code_foreground: "#F47466" # 代码`code`的颜色
   code_background: "rgba(27, 31, 35, .05)" # 代码`code`的背景颜色
   toc_color: "#00c4b6"
   blockquote_padding_color: "#e58a8a" # >  >> >>> 描述颜色
   blockquote_background_color: "#49b1f5"


Valine评论区效果图
image.png

  1. 如果你的主题不是butterfly主题的话
    可以写一个css样式覆盖掉默认样式
/*回复按钮颜色*/
#vcomment .vat {
    color: rgb(0, 0, 0);
    font-size: 0.7125rem;
    padding: 0px 0.8rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    border-image: initial;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
}
/*提交评论按钮颜色*/
#vcomment button {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    border-color: rgb(255, 255, 255);
    transition: all 0.3s ease 0s;
}

/*如果你还想修改鼠标移动到【回复】按钮或者【提交】按钮显示的颜色就修改*/
/*
#vcomment .vat:hover {
    color: rgb(0, 0, 0);
    font-size: 0.7125rem;
    padding: 0px 0.8rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    border-image: initial;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
}
*/

最后在</body>前引用css就可以了

参考:https://www.antmoe.com/posts/2380732b/index.html

【Lete乐特个人博客】:https://blog.lete114.top/

展开阅读全文
  • 0
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> <span style="font-size:14px;color:#337FE5;">【为什么学爬虫?】</span> </p> <p> <span style="font-size:14px;">       1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到!</span> </p> <p> <span style="font-size:14px;">       2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站</span> </p> <p> <br /> </p> <span style="font-size:14px;color:#337FE5;">【课程设计】</span> <p class="ql-long-10663260"> <span> </span> </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 网络请求:模拟浏览器的行为从网上抓取数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 </li> <li class="" style="font-size:11pt;color:#494949;"> Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;background-color:#FFFFFF;color:#337FE5;">【课程服务】</span> </p> <p> <span style="font-size:14px;">专属付费社群+定期答疑</span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"><br /> </span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"></span> </p>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值