Fluid -8- 升级 Waline 到1.3.4

为为为什么

发布于 2022-08-06 09:40:01

82700

代码可运行

文章被收录于专栏：又见苍岚又见苍岚

运行总次数：0

代码可运行

Fluid 1.8.11 原装的 Waline 版本为 0.16.2，当前最新版本为 1.3.4 有了诸多更新，本文记录升级方法。

简介

@waline/client 已经发布了很多新版本

新版调整了前端配置
增加了新功能
对我来说最实用的是暗色模式和评论数统计

升级方法

fluid 已经把waline相关配置做得很好了，只需要稍加调整即可升级版本

修改主题配置文件：

waline: https://cdn.jsdelivr.net/npm/@waline/client@0.16.2/dist/
 # 改为：
waline: https://cdn.jsdelivr.net/npm/@waline/client@1.3.4/dist/

此时我们的配置已经不再合适，需要略微调整：

# Waline
# 从 Valine 衍生而来，额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: https://waline.js.org/
waline:
  serverURL: 'your-servelURL'
  placeholder: 遗憾莫过于难忘你的背影，却找不到你来过的痕迹 ...
  highlight: true
  avatarForce: false
  dark: 'html[data-user-color-scheme="dark"]'
  visitor: true
  avatarCDN: 'https://seccdn.libravatar.org/avatar/'

参数说明：

参数	描述
serverURL	Waline 配置得到的服务端链接
placeholder	评论板默认文字
highlight	代码高亮
avatarForce	是否强制重新加载头像，官方不建议True
dark	适用于 fluid 主题的黑暗模式设置方式
visitor	开启访问统计
avatarCDN	头像地址来源

具体最新更多配置参考 waline官网

配置信息

前端配置

el

类型: string | HTMLElement
必填: 否

Waline 的初始化挂载器。必须是一个有效的 CSS 选择器 或 HTMLELement 对象。

提示: 如果你只想使用浏览量统计功能，请不要设置该项。

serverURL

类型: string
必填: 是

Waline 的服务端地址。

path

类型: string
默认值: window.location.pathname
必填: 否

当前 文章页 路径，用于区分不同的 文章页，以保证正确读取该 文章页 下的评论列表。

可选值:

window.location.pathname (默认值，推荐)
window.location.href
自定义

I. 请保证每个 文章页 路径的唯一性，否则可能会出现不同 文章页 下加载相同评论列表的情况。 II. 如果值为 window.location.href，可能会出现随便加 不同参数 进入该页面，而被判断成新页面的情况。

lang

类型: string
默认值: 'zh-CN'
必填: 否

多语言支持。

可选值:

'zh'
'zh-CN'
'zh-TW'
'en'
'en-US'
'jp'
'jp-JP'

如需 自定义语言，请参考 i18n。

visitor

类型: boolean
默认值: false
必填: 否

文章访问量统计。

emoji

类型: (string | EmojiInfo)[]
默认值: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']

表情设置，详见自定义表情

dark

类型: string
必填: 否

暗黑模式适配。

设置 'auto' 会根据设备暗黑模式自适应。
填入 CSS 选择器会在对应选择器生效时启用夜间模式。

针对不同主题的例子

Docusaurus: 它会在 <html> 上通过设置 data-theme="dark" 开启暗黑模式，那么你需要将 dark 选项设置为 'html[data-theme="dark"]'。
hexo-theme-fluid: 它会在 <html> 上通过设置 data-user-color-scheme="dark" 开启暗黑模式。那么你需要将 dark 选项设置为 'html[data-user-color-scheme="dark"]'。
vuepress-theme-hope: 它会在 <body> 上添加theme-dark class 来开启暗黑模式。那么你需要将 dark 选项设置为 body.theme-dark。

自定义样式与暗黑模式详见自定义样式。

requiredMeta

类型: string[]
默认值: []
必填: 否

设置必填项，默认匿名，可选值:

[]
['nick']
['nick', 'mail']

login

类型: string
默认值: 'enable'
必填: 否

登录模式状态，可选值:

'enable': 启用登录 (默认)
'disable': 禁用登录，用户只能填写信息评论
'force': 强制登录，用户必须注册并登录才可发布评论

avatar

类型: string
默认值: mp
必填: 否

Gravatar 头像展示方式。

可选值:

''
'mp'
'identicon'
'monsterid'
'wavatar'
'retro'
'robohash'
'hide'

更多信息，请查看头像配置。

wordLimit

类型: number | [number, number]
默认值: 0
必要性: false

评论字数限制。填入单个数字时为最大字数限制。设置为 0 时无限制。

pageSize

类型: number
默认值: 10
必填: 否

评论列表分页，每页条数。

avatarCDN

类型: string
默认值: https://seccdn.libravatar.org/avatar/
必填: 否

设置头像 CDN 地址。可使用任何与 Gravatar API 兼容的服务。

avatarForce

类型: boolean
默认值: false
必填: 否

每次访问是否强制拉取最新的评论列表头像

不推荐设置为 true，目前的评论列表头像会自动带上 Waline 的版本号

uploadImage

类型: Function | false
必填: 否

自定义图片上传方法，方便更好的存储图片。方法执行时会将图片对象传入。

你可以设置为 false 以禁用图片上传功能。

highlight

类型: boolean
默认值: true
必填: 否

代码高亮，默认开启，若不需要，请手动关闭

mathTagSupport

类型: boolean
默认值: false
必填: 否

是否注入核外样式以兼容 <math> 显示。

copyright

类型: boolean
默认值: true
必填: 否

是否显示页脚版权信息。

提示

我们希望你保持打开以支持 Waline

废弃的 API

以下 API 仍然有效，但它们会在 V2 版本中移除

langMode

已过时

请使用 locale

类型: Locale
必填: 否

自定义语言。

placeholder

已过时

请使用 locale.placeholder

类型: string
默认值: 'Just Go GO'
必填: 否

评论框 占位提示符。

emojiCDN

已过时

请使用 emoji

类型: string
默认值: https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/
必填: 否

设置表情包 CDN，参考自定义表情

emojiMaps

已过时

请使用 emoji

类型: Object
默认值: 微博表情包
必填: 否

设置表情包映射，参考自定义表情

requiredFields

已过时

请使用 requiredMeta

anonymous

已过时

请使用 login

类型: boolean
必填: 否

是否允许登录评论。默认情况是两者都支持，设置为 true 表示仅支持匿名评论，false 表示仅支持登录评论。

copyRight

已废弃

请使用 copyright

升级效果

版本升级

协调的黑暗模式

新头像

访问统计（该功能当前只是后台开始计数，当前配置完成不会显示评论数，需要后续修改）

参考资料

https://waline.js.org/
https://cdn.jsdelivr.net/npm/@waline/client@1.3.4/dist/
https://waline.js.org/reference/client.html#前端配置

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年9月2日，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度