Fluid -8- 升级 Waline 到1.3.4

2022-08-06 09:40:01 浏览数 (1)

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

简介

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

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

升级方法

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

  • 修改主题配置文件：
代码语言：javascript复制
waline: https://cdn.jsdelivr.net/npm/@waline/client@0.16.2/dist/
 # 改为：
waline: https://cdn.jsdelivr.net/npm/@waline/client@1.3.4/dist/

  • 此时我们的配置已经不再合适，需要略微调整：
代码语言：javascript复制
# 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。

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

meta
  • 类型: string[]
  • 默认值: ['nick', 'mail', 'link']
  • 必填: 否

评论者相关属性。可选值: 'nick', 'mail', 'link'

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#前端配置
编程算法 https 网络安全 数据结构 cdn

0 人点赞