只需几个步骤，给网站增加评论和文章浏览量功能!

已于 2023-07-30 15:23:26 修改
阅读量389 收藏 1
点赞数
分类专栏： 个人博客文章 文章标签： vue
于 2023-07-30 15:17:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011208987/article/details/132007359
版权

只需几个步骤，给网站增加评论和文章浏览量功能!

只需几个步骤，我就成功的在自己的网站中启用 Waline 提供评论与文章浏览量服务。

LeanCloud 设置 (数据库)

  1. 登录 或 注册 LeanCloud 国际版 并进入 控制台

  2. 点击左上角 创建应用 并起一个自己喜欢的名字 (注意这里一定选择免费的开发版，如果你特别有钱当我没说…):

    创建应用

  3. 进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

    ID 和 Key

::: warning 国内版需要完成备案接入

如果之前正在使用 Leancloud 国内版 (leancloud.cn)，推荐直接切换到国际版 (leancloud.app)。否则，我们需要为应用额外绑定已备案的域名，同时购买独立 IP 并完成备案接入:

  • 登录国内版并进入需要使用的应用
  • 选择 设置 > 域名绑定 > API 访问域名 > 绑定新域名 > 输入域名 > 确定。
  • 按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
  • 购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为 ￥ 50/个/月)

域名设置

:::

Vercel 部署 (服务端)

部署入口

  1. 点击上方部署入口，跳转至 Vercel 进行 Server 端部署。

    如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。

  2. 输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

    创建项目

  3. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名(我这里示例是waline-test)。

    deploy

    一两分钟后，满屏的烟花会庆祝你部署成功。此时点击屏幕中的 Go to Dashboard 可以跳转到应用的控制台。

    deploy

  4. 点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

    设置环境变量

如果你使用 LeanCloud 国内版，由于国内网络限制原因，请额外配置 LEAN_SERVER 环境变量，值为你在leancloud网站上设置模块绑定好的域名。

  1. 环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

    redeploy

  2. 此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

    redeploy success

绑定域名 (可选)

我遇到的问题：
如果是使用LeanCloud国际版数据库，并直接使用Vercel搭建的waline评论系统，由于xxx.vercel.app域名在国内遭到污染无法访问。

解决方案：
按本章节的操作步骤，用已备案的博客域名去免费申请一个子域名来代替vercel.app那个被污染的域名。

本演示是单独申请博客主域名下的子域名：test.gydblog.com ， 需要在域名供应商处新增CNAME类型的域名映射，将子域名映射到Vercel的dns服务器

  1. 点击顶部的 Settings - Domains 进入域名配置页

  2. 输入需要绑定的域名并点击 Add

    Add domain

  3. 在域名服务器商处添加新的 CNAME 解析记录
    解析记录配置

注意这里容易踩坑，如果填写vercel域名配置页生成的dns服务器地址"cname.vercel-dns.com"，会发现自定义域名访问不通，其实这里由于 国内网络原因要填写的value是"cname-china.vercel-dns.com"！！！

TypeNameValue
CNAMEtestcname-china.vercel-dns.com
  1. 等待生效，你可以通过自己的域名来访问了🎉

我这里自定义域名是"test.gydblog.com"

  • 评论系统：test.gydblog.com
  • 评论管理：test.gydblog.com/ui

success

评论管理 (管理端)

  1. 部署完成后，需要先访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
    success

  2. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
    success

  3. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

vuepress客户端接入

这是接入的最后一步啦！！！

插件配置

打开项目的主题配置文件theme.ts（或者config.ts），在插件选项中设置 provider: "Waline"，同时设置服务端地址 serverURL 为上一步获取到的值。
success

然后重启项目，可以看到在每个文章页面底部都有相关的评论功能了！

success

开启文章浏览量展示功能

只需要增加配置项pageview=true即可，效果如下：

success

开启文章反应功能

只需要增加配置项reaction=true即可，效果如下：

success

大功告成，是不是很简单呢？

Waline 支持的选项配置还有很多。

详情请见 Waline 配置

代码小郭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何给自己的网站添加 gitalk 评论系统
04-04 472
自己写评论系统会比较复杂，需要管理用户信息等。不如直接使用 github 的用户信息。gitalk 就是实现这种评论的插件。
【1024实战一下】手把手教你打造自己的个人网站，并支持自动发布，添加评论
余光的博客
10-24 1223
打造自己的静态网站 ???? 上手难度低、扩展性强、0成本 ???? 手把手教你托管自己的个人网站，包含评论+自动化构建推送+GithubPages在线地址预览 ???? 收藏不走丢啊～ 一、VuePress VuePress —— 一个极简静态网站生成器，它包含由Vue驱动的主题系统和插件API。 门槛低、上手快，扩展性强 与Vue紧密贴合，支持自定义Vue组件 推荐使用v1.x版本 主要使用场景、个人网站、开源项目文档等 官方文档地址 二、基本文件介绍介绍 细节展
vue如何实现点击一篇文章后，文章的访问量增加1个
weixin_39818813的博客
04-09 3713
实现的逻辑是：前端每调用成功一次页面数据接口，就相当于阅读了一次文章，前端获取到数据成功后，将访问量字段的值自增1个，然后将增加后访问量字段再传给后端，保存在数据库中 代码实现： getArticle(index, types, idIndex) { this.axios .get("articles/get") .then(res =&gt...
Hexo博客进阶：为 Next 主题添加 Waline 评论系统
千帆过烬的博客小站
01-21 4425
根据读者反馈，Valine 评论系统在 Next 主题高版本 (7.+) 以上已没有支持，且 Valine 已经很久没有更新维护了。 不过，有大佬在 Valine 的基础之上开发了 Waline。 这次，我们就来描述如何快速上手安装配置更加人性化且带后端的 Waline 评论系统。
个人网站制作 Part 10 添加用户评论功能 | Web开发项目
浪里个狼游记
03-17 528
在前十一篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证、数据库集成、电子邮件通知、社交媒体集成和博客功能。在本篇中，我们将学习如何添加用户评论功能，使你的博客更加互动。通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加用户评论功能使你的博客更加生动。祝你编码愉快，不断创新！在下一篇文章中，我们将学习如何添加用户权限管理，使你的网站更加安全。确保保存所有文件并在浏览器中预览你的网站。
实用的代码轮子分享
代码小郭的技术博客
07-22 83
分享好用的代码工具类
vue项目引入腾讯移动分析平台统计页面浏览量和功能按钮点击量的具体方法步骤
zhangkegu的博客
12-30 2380
步骤如下: 1. 打开网址, 使用自己的QQ登陆 http://mta.qq.com/ 2. 点击"我的应用" 0-> "HTML5应用" -> "新建应用", 此处已经新建好了一个, 如果要给按钮添加监听事件, 查看按钮的点击次数, 记得勾选"自定义事件". 新建应用 2.点击自己应用的右上角管理，复制如下代码, 添加到index.html页面中去, 放在title下面...
ERY超实用免费工具箱，内含几十种小功能.rar
09-09
下载并安装ERY超实用免费工具箱的APK文件（ERY超实用免费工具箱，内含几十种小功能.apk），按照提示步骤完成安装。启动应用后，用户会看到一个简洁的界面，各个功能分类清晰，便于查找和使用。只需点击相应的图标，...
swift-CXPhotoBrower是一个图片浏览工具类似微博微信浏览方式
08-15
通常，这涉及到以下几个步骤： 1. **导入库**：在项目中添加CXPhotoBrower库，可以使用CocoaPods或Carthage等依赖管理工具进行安装。 2. **配置数据源**：实现CXPhotoBrowserDataSource协议，提供需要展示的图片...
图片浏览响应式网页模板
01-22
在设计响应式图片浏览网页时，有几个关键知识点需要掌握： 1. **媒体查询**：媒体查询是CSS3中的一个重要特性，用于检测设备的物理特性，如宽度、高度、颜色等。通过媒体查询，设计师可以定义不同屏幕尺寸下的样式...
古董典当类网站源码 古玩拍卖展会类pbootcms网站模板(PC+WAP)
05-16
网站可能包括以下几个模块： 1. **首页展示**：展示最新的古董、艺术品信息，包括图片、简介、价格等，同时可能有热门拍卖、推荐典当等特色板块。 2. **商品分类**：按照古董类型、年代、材质等进行分类，便于用户...
Python_Pinry是一个平铺图像板系统，为那些想要保存标签和分享图像、视频和网页的人提供一个易于浏览的格式.zip
05-24
6. **安装与部署**：Python_Pinry的部署相对简单，通常只需几个步骤即可完成。在提供的"pinry_master.zip"文件中，包含了项目的源码和其他必要的资源，用户可以通过解压并按照说明.txt文件中的指示进行安装和配置。 ...
Waline网站评论系统配置教程
qq_52475653的博客
11-30 1383
Waline评论系统提供了丰富的自定义设置选项，用户可以根据自己的需求对评论系统进行个性化定制。例如，用户可以自定义评论列表的显示样式、排序方式等，满足不同网站的个性化需求。
关于waline国内无法使用的解决方案 （vercel.app国内无法使用问题）
Panzer_Jack的博客
10-20 6962
总结一下，如果直接使用Vercel搭建的waline评论系统，评论系统出现问题，多半是vercel.app域名在国内遭到污染无法访问。这里提供一个实用的解决方案：用你已有的博客域名去免费申请一个子域名来代替vercel.app那个被污染的域名。
VUE项目中添加cnzz统计访问量
zhuzhucaicai的博客
12-18 1029
vue项目中添加cnzz统计访问量 1.创建一个js文件，内容如下： var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1279539509'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D12
Sakura主题添加waline评论系统
fxt1017748664的博客
03-29 121
四个环境变量是用来自定义回复邮件标题和内容的。不过一般而言，邮件回复的时候，标题和内容都不是固定的。比如说 A 回复了某条评论，系统发送邮件通知评论作者 B 的时候，标题最好含有 B 的名字。内容也应该含有 A 对 B 的什么评论作出了什么评论。这些内容会随着评论作者和评论内容的不同进行改变，所以不能直接简单的设置成固定的内容，需要设定一个回复模板。**找到 GitHub 上自动创建的和Vercel项目同名的私人仓库，仓库中有一个名为 **的文件，修改代码为以下。才代表是当前生产环境。
vue中的浏览量_vue中访问数据接口的配置
weixin_36087674的博客
12-31 113
业务API接口地址：http://localhost:3816/api/前端UI浏览地址：http://127.0.0.1:8080/#/home由于同源策略的问题：　需要配置代理：在开发环境下配置如下：config/index.jsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': { //将www.e...
vue中的浏览量_vue项目中统计页面访问量PV UV
weixin_39933082的博客
12-22 7339
PV：page view 页面的访问量、浏览量。UV：Unique Visitor 一天24小时内，你的网站访问的IP数量。我们以vue项目来举例，每访问一个页面，都会经过main.js文件，所以我们在main.js中调用接口，将页面链接，名称等参数传递给后端即可。router.afterEach((to, from, next) => {comFun.hasToken().then(() ...
MongoDB的Linux安装、基本操作、可视化、实验源码与报告文档
最新发布
07-10
MongoDB的Linux安装 在Linux上安装MongoDB，通常可以通过包管理器（如apt-get、yum等）或从MongoDB官网下载压缩包进行手动安装。以下是通过包管理器安装MongoDB的简要步骤（以Ubuntu为例）： 更新系统： 打开终端，使用sudo apt-get update命令更新系统包列表。 安装MongoDB： 使用sudo apt-get install -y mongodb命令安装MongoDB。这将自动处理依赖关系，并安装MongoDB服务器。 启动MongoDB服务： 安装完成后，可以使用sudo systemctl start mongod命令启动MongoDB服务。 验证安装： 使用mongo命令连接到MongoDB shell，如果能够成功连接并显示MongoDB的shell提示符，则表示MongoDB已成功安装并正在运行。 注意：以上步骤是基于Ubuntu系统的示例。对于其他Linux发行版，安装命令可能有所不同。此外，也可以从MongoDB官网下载.tgz压缩包进行手动安装，具体步骤包括下载、解压、配置环境变量、创建数据存储目录等。 M
wpf paging
10-12
WPF分页是一种在WPF应用程序中实现分页功能的技术。分页是一种将数据集分成小块进行展示的方法，使用户可以按需浏览和导航数据。 WPF分页可以用于在WPF应用程序中显示大量数据，并提供用户友好的交互体验。它可以有效地减少数据加载时间和内存占用，因为它只加载当前页面的数据而不是整个数据集。 WPF分页的实现通常涉及到以下几个步骤：首先，确定数据集的总大小和每页展示的数据量。接下来，创建一个分页控件，用于显示分页的导航和信息。然后，定义一个数据源，并将数据集按照指定的每页数据量进行划分。最后，根据用户的导航操作，更新分页控件中显示的数据。 WPF分页控件通常包含页码导航按钮，以及显示当前页和总页数的文本框。用户可以通过点击导航按钮或手动输入页码来切换页面。当用户导航到新的页面时，分页控件会更新展示的数据，并更新当前页和总页数的显示。 除了基本的导航功能，WPF分页通常还提供其他功能，如翻页动画、页面跳转输入框、每页数据量设置等。这些功能可以根据实际需求进行扩展和定制。 总之，WPF分页是一种在WPF应用程序中实现分页功能的技术，可以提供高效的数据展示和导航方式。它可以应用于需要展示大量数据的界面，并提供用户友好的交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值