Skip to content
WalineWaline
快速上手
  • 指南

    • 快速上手
      • 客户端介绍
        • 服务端介绍
        • 更多

          • 介绍
            • 设计目标
              • 生态系统
                • FAQ
                • 迁移

                  • Waline 客户端 V2 迁移指南
                    • 从 Valine 迁移
                      • 数据迁移助手
                      • 参考

                        • 组件属性
                          • serverURL
                            • path
                              • lang
                                • emoji
                                  • dark
                                    • meta
                                      • requiredMeta
                                        • login
                                          • wordLimit
                                            • pageSize
                                              • imageUploader
                                                • highlighter
                                                  • texRenderer
                                                    • copyright
                                                    • 客户端 API
                                                      • 服务端配置
                                                        • API
                                                          • 贡献指南

                                                          组件属性

                                                          大约 5 分钟...

                                                          此页内容
                                                          • serverURL
                                                          • path
                                                          • lang
                                                          • emoji
                                                          • dark
                                                          • meta
                                                          • requiredMeta
                                                          • login
                                                          • wordLimit
                                                          • pageSize
                                                          • imageUploader
                                                          • highlighter
                                                          • texRenderer
                                                          • copyright

                                                          # 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.0.1/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\TeXTE​X 渲染,默认行为是提示预览模式不支持 TeX\TeXTE​X。函数提供两个参数,第一个参数表示渲染模式是否为块级,第二个参数是 TeX\TeXTE​X 的字符串,并返回一段 HTML 字符串作为渲染结果。

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

                                                          案例

                                                          # copyright

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

                                                          是否显示页脚版权信息。

                                                          提示

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

                                                          编辑此页open in new window
                                                          上次编辑于: 2022/5/21 16:44:08
                                                          下一页
                                                          客户端 API
                                                          友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。

                                                          预览:

                                                          0  字
                                                          评论
                                                          Powered by Waline v2.5.1
                                                          GPL-2.0 协议 | Copyright © 2020-present lizheming