waline评论功能代码解析_waline魔改-CSDN博客

本文链接：https://blog.csdn.net/m0_57236802/article/details/130286840

代码

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

解读

这段代码是一个HTML文件的一部分，其中包含了一些头部（<head>）和主体（<body>）元素。主要功能是引入和初始化Waline评论系统。Waline是一个基于Node.js的简单、轻量级、无后端评论系统。

让我们逐步解读代码：

<head>部分：

<link
  rel="stylesheet"
  href="https://unpkg.com/@waline/client@v2/dist/waline.css"
/>

这段代码是一个<link>标签，它将Waline评论系统的CSS样式表链接到HTML文档。rel="stylesheet"表示这个链接引用了一个样式表，href属性指定了样式表的URL。这将从unpkg.com加载Waline评论系统的官方样式表。

<body>部分：

<div id="waline"></div>

这是一个<div>标签，它具有ID “waline”。这个<div>元素将作为Waline评论系统在页面上的容器。

<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

  init({
    el: '#waline',
    serverURL: 'https://your-domain.vercel.app',
  });
</script>

这段代码是一个<script>标签，它的type属性设置为"module"，表示这个脚本是一个JavaScript模块。模块允许我们使用import语句从其他文件导入函数和变量。

import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';：这行代码从Waline评论系统的JavaScript模块（从unpkg.com加载）导入名为init的函数。
接下来，调用init函数并传递一个配置对象：
- el: '#waline'：这个属性指定了Waline评论系统应该附加到的HTML元素。使用CSS选择器的形式（#表示ID），这里表示ID为"waline"的元素。
- serverURL: 'https://your-domain.vercel.app'：这个属性设置了Waline评论系统的后端服务器URL。你需要将your-domain.vercel.app替换为部署Waline后端服务的实际域名。