组件属性

大约 6 分钟...

serverURL

  • 类型: string
  • 必填: 是

Waline 的服务端地址。

path

  • 类型: string
  • 默认值: window.location.pathname

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

注意

请保证每个 文章页 路径的唯一性,否则可能会出现不同 文章页 下加载相同评论列表的情况。

例子: 如果你站点的 /example/path//example/path 对应同一个页面,你最好将其设置为 window.location.pathname.replace(/\/$/,'')

lang

  • 类型: string
  • 默认值: 'zh-CN'

多语言支持。

可选值:

  • 'zh'
  • 'zh-CN'
  • 'zh-TW'
  • 'en'
  • 'en-US'
  • 'jp'
  • 'jp-JP'
  • 'pt-BR'
  • 'ru'
  • 'ru-RU'

如需 自定义语言,请参考 i18n

emoji

  • 类型: (string | WalineEmojiInfo)[] | false
  • 默认值: ['//unpkg.com/@waline/emojis@1.1.0/weibo']

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

dark

  • 类型: string | boolean
  • 默认值: false

暗黑模式适配。

  • 设置布尔值会根据其值来设置暗黑模式。
  • 设置 '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': 强制登录,用户必须注册并登录才可发布评论

wordLimit

  • 类型: number | [number, number]
  • 默认值: 0

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

pageSize

  • 类型: number
  • 默认值: 10

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

imageUploader

  • 类型: WalineImageUploader | false

  • 必填: 否

  • 详情:

    type WalineImageUploader = (image: File) => Promise<string>;
    

自定义图片上传方法。默认行为是将图片 Base 64 编码嵌入,你可以设置为 false 以禁用图片上传功能。

函数应该接收图片对象,返回一个提供图片地址的 Promise。

案例

一个使用lsky - pro图床的案例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Waline imageUploader 案例</title>
    <script src="https://unpkg.com/@waline/client@v1/dist/waline.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@waline/client@v1/dist/waline.css"
    />
  </head>
  <body>
    <div id="waline" style="max-width: 800px; margin: 0 auto"></div>
    <script>
      const waline = Waline.init({
        el: '#waline',
        serverURL: 'https://waline.vercel.app',
        path: '/',
        lang: 'en-US',
        imageUploader: function (file) {
          let formData = new FormData();
          let headers = new Headers();

          formData.append('file', file);
          headers.append('Authorization', '!{API TOKEN}');
          headers.append('Accept', 'application/json');

          return fetch('!{API URL}', {
            method: 'POST',
            headers: headers,
            body: formData,
          })
            .then((resp) => resp.json())
            .then((resp) => resp.data.links.url);
        },
      });
    </script>
  </body>
</html>

highlighter

  • 类型: WalineHighlighter | false

  • 必填: 否

  • 详情:

    type WalineHighlighter = (code: string, lang: string) => string;
    

代码高亮,默认使用一个 < 1kb 的简单高亮器。函数传入代码块的原始字符和代码块的语言。你应该触发回调函数或者直接返回一个字符串。

你可以传入一个自己的代码高亮器,也可以设置为 false 以禁用代码高亮功能。

案例

一个使用 PrismJS 高亮代码块的案例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Waline highlighter 案例</title>
    <script src="https://unpkg.com/@waline/client@v1/dist/waline.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@waline/client@v1/dist/waline.css"
    />
    <script src="https://unpkg.com/prismjs@v1" data-manual></script>
    <script src="https://unpkg.com/prismjs@v1/plugins/autoloader/prism-autoloader.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/prismjs@v1/themes/prism-tomorrow.min.css"
    />
  </head>
  <body>
    <div id="waline" style="max-width: 800px; margin: 0 auto"></div>
    <script>
      const waline = Waline.init({
        el: '#waline',
        serverURL: 'https://waline.vercel.app',
        path: '/',
        highlighter: (code, lang) => {
          if (!window.Prism.languages[lang]) {
            window.Prism.plugins.autoloader.loadLanguages(lang);
          }

          return window.Prism.highlight(
            code,
            window.Prism.languages[lang] || window.Prism.languages.text,
            lang
          );
        },
      });
    </script>
  </body>
</html>

texRenderer

  • 类型: WalineTexRenderer | false

  • 必填: 否

  • 详情:

    type WalineTexRenderer = (blockMode: boolean, tex: string) => string;
    

自定义 TeX\TeX 渲染,默认行为是提示预览模式不支持 TeX\TeX。函数提供两个参数,第一个参数表示渲染模式是否为块级,第二个参数是 TeX\TeX 的字符串,并返回一段 HTML 字符串作为渲染结果。

你可以自行引入 TeX\TeX 渲染器并提供预览渲染,建议使用 Katex 或 MathJax,也可以设置为 false 以禁止渲染 TeX\TeX。更多请参考 KaTeX APIopen in new windowMathJax APIopen in new window

案例
  • 类型: WalineSearchOptions | false

  • 必填: 否

  • 详情:

    interface WalineSearchImageData extends Record<string, unknown> {
      /**
       * 图片链接
       */
      src: string;
    
      /**
       * 图片标题
       *
       * @description 用于图片的 alt 属性
       */
      title?: string;
    
      /**
       * 图片缩略图
       *
       * @description 为了更好的加载性能,我们会优先在列表中使用此缩略图
       *
       * @default src
       */
      preview?: string;
    }
    
    type WalineSearchResult = WalineSearchImageData[];
    
    interface WalineSearchOptions {
      /**
       * 搜索操作
       */
      search: (word: string) => Promise<WalineSearchResult>;
    
      /**
       * 打开列表时展示的默认结果
       *
       * @default () => search('')
       */
      default?: () => Promise<WalineSearchResult>;
    
      /**
       * 获取更多的操作
       *
       * @description 会在列表滚动到底部时触发,如果你的搜索服务支持分页功能,你应该设置此项实现无限滚动
       *
       * @default (word) => search(word)
       */
      more?: (word: string, currectCount: number) => Promise<WalineSearchResult>;
    }
    

自定义搜索功能,设置 false 可禁用搜索。

  • 类型: boolean
  • 默认值: true

是否显示页脚版权信息。

提示

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

recaptchaV3Key

  • 类型: string
  • 必填: 否

reCAPTCHA V3 是 Google 提供的验证码服务,配置 reCAPTCHA V3 网站密钥即可开启该功能。服务端需要同步配置 RECAPTCHA_V3_SECRET 环境变量。

reaction

  • 类型: boolean | string[]
  • 默认值: false

为文章增加表情互动功能,设置为 true 提供默认表情,也可以通过设置表情地址数组来自定义表情图片,最大支持 8 个表情。

友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。

你认为这篇文章怎么样?

  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.12.0