Merge branch 'master' into blog-content

.env.example

@@ -1,6 +1,2 @@
-GITHUB_TOKEN=
+PUBLIC_REMARK42_HOST=
-GISCUS_REPO_OWNER=
+PUBLIC_REMARK42_SITE_ID=
-GISCUS_REPO_NAME=
-GISCUS_CATEGORY_ID=
-GISCUS_DATA_REPO_ID=
-PUBLIC_COMMENT_SERVER_URL=

README-en.md

@@ -68,6 +68,18 @@ For details, see: <b>[GithubActions-en.md](docs/GithubActions-en.md)</b>.
 
 Upload the generated `dist/` directory to your server, and configure `NGINX` to point to `index.html`.
 
+### 4. Comments
+
+This project uses self-hosted <b>[Remark42](https://remark42.com/)</b> as its comment system.
+
+For installation and deployment details, please refer to the official documentation: <b>[Installation | Remark42](https://remark42.com/docs/getting-started/installation/)</b>
+
+<br>
+
+### 5. Changelog
+
+For details, see: <b>[ChangeLog-en.md](./docs/ChangeLog-en.md)</b>
+
 <hr>
 
 ## ⚖️ License 

README.md

@@ -69,6 +69,18 @@
 
 将生成的`dist/`目录上传至你的服务器，使用`NGINX`指向index.html。
 
+### 4. 评论区
+
+项目使用自托管 <b>[Remark42](https://remark42.com/)</b> 作为评论区系统。
+
+安装部署详情请查看官方文档：<b>[Installation | Remark42](https://remark42.com/docs/getting-started/installation/)</b>
+
+<br>
+
+### 5. 更新日志
+
+详情请看：<b>[ChangeLog.md](./docs/ChangeLog.md)</b>
+
 <hr>
 
 ## ⚖️ 许可

docs/ChangeLog-en.md

@@ -0,0 +1,14 @@
+## v1.1.0 Update
+
+Added improved locale support, with support for `zh-CN` and `en-US`. When uploading articles, it is recommended to upload both language versions to `src/blog/zh` and `src/blog/en`.
+
+- Refactored the original `src/blog/posts.md` into `src/blog/zh/posts.md` and `src/blog/en/posts.md`
+- When users click the language switch icon, the article list will automatically switch between Chinese and English
+
+## v1.2.0 Update
+
+Replaced the original `GISCUS`-based comment system with a self-hosted `Remark42`-based comment system.
+
+- Removed `GISCUS`-related components
+- Removed GitHub- and Giscus-related fields from `.env`
+- Added `Remark42`-related components

docs/ChangeLog.md

@@ -0,0 +1,14 @@
+## v1.1.0更新
+
+添加完善的Locale支持，支持 `zh-CN` 和 `en-US`，上传文章时建议同时上传两种语言的文章到 `src/blog/zh` 和 `src/blog/en` 中。
+
+- 将原本的`src/blog/posts.md` 重构为`src/blog/zh/posts.md`和`src/blog/en/posts.md`
+- 在用户点击切换中英文图标时，文章列表会自动切换
+
+## v1.2.0 更新
+
+将原本基于`GISCUS`的评论区更新为基于自托管`Remark42`
+
+- 删去`GISCUS`相关组件
+- 删去`.env`中github和giscus相关字段
+- 新增`Remark42`相关组件

docs/EnvVariables-en.md

@@ -4,42 +4,17 @@
 
 The following environment variables are listed in the project's `.env.example` file:
 
-| Variable Name         | Description |
+| Variable Name             | Description                              |
-| --------------------- | ----------- |
+| ------------------------- | ---------------------------------------- |
-| `GITHUB_TOKEN`        | Enter your <b>[Personal access token](https://github.com/settings/personal-access-tokens)</b> |
+| `PUBLIC_REMARK42_HOST`    | The domain of the server hosting `Remark42` |
-| `GISCUS_REPO_OWNER`   | Your GitHub username, for example `ClovertaTheTrilobita` |
+| `PUBLIC_REMARK42_SITE_ID` | Your custom `Remark42` site ID           |
-| `GISCUS_REPO_NAME`    | Your code repository name, for example `SanYeCao-blog` |
-| `GISCUS_CATEGORY_ID`  | The category ID of `GISCUS`, see the explanation below |
-| `GISCUS_DATA_REPO_ID` | The repository ID of `GISCUS`, see the explanation below |
 
-### 1. `GITHUB_TOKEN`
+### 1. `PUBLIC_REMARK42_HOST`
 
-It can greatly increase your GitHub API rate limit. Open this link: <b>[Personal access tokens](https://github.com/settings/personal-access-tokens)</b>
+For example, if you deployed the `Remark42` Docker container on a server at `192.168.1.1` and pointed your DNS record to it, then fill in the resolved domain name (such as `https://comments.example.com`) in this field.
 
-Choose <b>`Generate new token`</b>.
+Do not add a trailing slash `/` at the end of the URL.
 
-Then copy the generated token into the corresponding place in your `.env` file.
+### 2. `PUBLIC_REMARK42_SITE_ID`
 
-### 2. `GISCUS`
+This is your custom site ID. For example, if you defined `SITE=sanyecao-blog` in your `Remark42` `docker-compose.yaml`, then you should also fill in `sanyecao-blog` in this field.
-
-This blog uses a comment section based on the `GISCUS API`, which can map part of the GitHub repository's Discussions section onto your webpage as a comment area.
-
-#### ① Enable Discussions in your repository
-
-Go to <b>`Settings > General > Features`</b> in your repository and check <b>`Discussions`</b> to enable it.
-
-Then go to the <b>`Discussions`</b> page, click the pencil icon next to <b>`Categories`</b> on the left side of the page, and then click <b>`New category`</b> to create a new category named <b>`Comments`</b>.
-
-#### ② Install the Giscus GitHub App
-
-Open this link: <b>[GitHub App - giscus](https://github.com/apps/giscus)</b>
-
-Install it into the blog code repository you forked.
-
-Then go to: <b>[giscus.app](https://giscus.app)</b>
-
-In the <b>`Repository`</b> field, enter your repository address, and in <b>`Page ↔️ Discussions Mapping`</b>, choose <b>`Discussion title contains a specific term`</b>.
-
-In <b>`Discussion Category`</b>, select the <b>`Comments`</b> category you just created.
-
-Finally, in the generated code below, find <b>`data-category-id`</b> and <b>`data-repo-id`</b>, and fill them into the environment variables.

docs/EnvVariables.md

@@ -4,43 +4,17 @@
 
 在项目的`.env.example`中，列举了如下环境变量
 
-| 变量名                | 内容                                                         |
+| 变量名                    | 内容                       |
-| --------------------- | ------------------------------------------------------------ |
+| ------------------------- | -------------------------- |
-| `GITHUB_TOKEN`        | 填写你的 <b>[Personal access tokens](https://github.com/settings/personal-access-tokens)</b> |
+| `PUBLIC_REMARK42_HOST`    | 托管`Remark42`的服务器域名 |
-| `GISCUS_REPO_OWNER`   | 你的Github账号名，如`ClovertaTheTrilobita`                   |
+| `PUBLIC_REMARK42_SITE_ID` | 你的自定义`Remark42`站点ID |
-| `GISCUS_REPO_NAME`    | 你的代码仓库，如`SanYeCao-blog`                              |
-| `GISCUS_CATEGORY_ID`  | `GISCUS`的栏目ID,详见下方说明                                |
-| `GISCUS_DATA_REPO_ID` | `GISCUS`的仓库ID,详见下方说明                                |
 
-### 1. `GITHUB_TOKEN`
+### 1. `PUBLIC_REMARK42_HOST`
 
-它可以大幅增加你的Github API访问限度，打开此链接：<b>[Personal access tokens](https://github.com/settings/personal-access-tokens)</b>
+例如你在`192.168.1.1`这台服务器上部署了`Remark42`的docker容器，并将DNS解析指向他。将解析的域名（如`https://comments.example.com`）填写在这个字段
 
-选择 <b>`Generate new token`</b>。
+注意URL末尾不要添加反斜杠`/`。
 
-并将生成的Token复制到.env相应位置。
+### 2. `PUBLIC_REMARK42_SITE_ID`
-
-### 2. `GISCUS`
-
-博客使用基于`GISCUS API`的评论区，它可以将github仓库的Discussion区域部分映射到网页中以作为评论区使用。
-
-#### ①启用你仓库的Discussion
-
-在仓库的<b>`Settings > General > Features`</b>中找到<b>`Discussions`</b>勾选以启用它。
-
-之后进入<b>`Discussion`</b>页面，点击页面左边<b>`Categories`</b>旁边的铅笔按钮，随后点击<b>`New category`</b>，新建一个名为<b>`Comments`</b>的栏目。
-
-#### ②安装Giscus的Github App
-
-点击此链接：<b>[Github App - giscus](https://github.com/apps/giscus)</b>
-
-将其安装到你Fork的博客代码仓库中。
-
-随后进入：<b>[giscus.app](https://giscus.app)</b>
-
-在<b>`Repository`</b>栏中填写你的仓库地址，并在<b>`Page ↔️ Discussions Mapping`</b>中选择<b>`Discussion title contains a specific term`</b>
-
-在<b>`Discussion Category`</b>处选择我们刚刚新建的<b>`Comments`</b>。
-
-最后在下面生成的代码中找到<b>`data-category-id`</b>和<b>`data-repo-id`</b>，将其填写到环境变量中。
 
+你自定义的一个站点ID, 例如在你的`Remark42`的`docker-compose.yaml`中定义了`SITE=sanyecao-blog`，那请在这个字段中也填写`sanyecao-blog`

docs/GithubActions-en.md

@@ -76,11 +76,8 @@ This variable is used to generate the `.env` file required for building.
 If you have already configured your `.env`, it should contain the following:
 
 ```env
-GITHUB_TOKEN=
+PUBLIC_REMARK42_HOST=
-GISCUS_REPO_OWNER=
+PUBLIC_REMARK42_SITE_ID=
-GISCUS_REPO_NAME=
-GISCUS_CATEGORY_ID=
-GISCUS_DATA_REPO_ID=
 ```
 
 If you have not configured these yet or do not know what they mean, please see: <b>[EnvVariables-en.md](EnvVariables-en.md)</b>

docs/GithubActions.md

@@ -76,11 +76,8 @@ cat ~/.ssh/github_actions_deploy
 如果你已经设置好`.env`，它里面应该有如下内容
 
 ```env
-GITHUB_TOKEN=
+PUBLIC_REMARK42_HOST=
-GISCUS_REPO_OWNER=
+PUBLIC_REMARK42_SITE_ID=
-GISCUS_REPO_NAME=
-GISCUS_CATEGORY_ID=
-GISCUS_DATA_REPO_ID=
 ```
 
 如果你还没配置好或不知道这些是干什么的，请详见：<b>[EnvVariables.md](EnvVariables.md)</b>

src/components/remark42-counter.svelte

@@ -1,30 +1,38 @@
 <script>
-    export let url;
+    import { onMount } from "svelte";
-</script>
 
-<svelte:head>
+    export let url;
-    <script async lang="javascript">
+
-        var remark_config = {
+    const host = import.meta.env.PUBLIC_REMARK42_HOST;
-            host: "https://comments.cloverta.top",
+    const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
-            site_id: "cloverta-blog",
+
+    onMount(() => {
+        const remark_config = {
+            host,
+            site_id: siteId,
             components: ["counter"],
             show_rss_subscription: false,
             theme: localStorage.getItem("color-theme") ?? "light",
         };
-        !(function (e, n) {
+
-            for (var o = 0; o < e.length; o++) {
+        window.remark_config = remark_config;
-                var r = n.createElement("script"),
+
-                    c = ".js",
+        for (const name of remark_config.components || ["embed"]) {
-                    d = n.head || n.body;
+            const script = document.createElement("script");
-                "noModule" in r
+            let ext = ".js";
-                    ? ((r.type = "module"), (c = ".mjs"))
+
-                    : (r.async = !0),
+            if ("noModule" in script) {
-                    (r.defer = !0),
+                script.type = "module";
-                    (r.src = remark_config.host + "/web/" + e[o] + c),
+                ext = ".mjs";
-                    d.appendChild(r);
+            } else {
+                script.async = true;
             }
-        })(remark_config.components || ["embed"], document);
+
-    </script>
+            script.defer = true;
-</svelte:head>
+            script.src = `${remark_config.host}/web/${name}${ext}`;
+            document.head.appendChild(script);
+        }
+    });
+</script>
 
 <span class="remark42__counter" data-url={url}></span>

src/components/remark42-embed.svelte

@@ -23,8 +23,8 @@
     const scriptId = "remark42-script";
 
     window.remark_config = {
-      host: "https://comments.cloverta.top",
+      host: import.meta.env.PUBLIC_REMARK42_HOST,
-      site_id: "cloverta-blog",
+      site_id: import.meta.env.PUBLIC_REMARK42_SITE_ID,
       components: ["embed"],
       show_rss_subscription: false,
       theme: getTheme(),

src/components/remark42-latest-comments.svelte

@@ -13,7 +13,6 @@
             const href = link.getAttribute("href");
             if (!href) return;
 
-            // 只改 /posts/... 这种相对路径
             if (href.startsWith("/posts/")) {
                 link.setAttribute("href", `/${lang}${href}`);
             }
@@ -22,8 +21,8 @@
 
     onMount(() => {
         window.remark_config = {
-            host: "https://comments.cloverta.top",
+            host: import.meta.env.PUBLIC_REMARK42_HOST,
-            site_id: "cloverta-blog",
+            site_id: import.meta.env.PUBLIC_REMARK42_SITE_ID,
             components: ["last-comments"],
             theme: localStorage.getItem("color-theme") ?? "light",
             max_last_comments: 10,