diff --git a/.env.example b/.env.example index 15d7730..a0c29dc 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,2 @@ -GITHUB_TOKEN= -GISCUS_REPO_OWNER= -GISCUS_REPO_NAME= -GISCUS_CATEGORY_ID= -GISCUS_DATA_REPO_ID= -PUBLIC_COMMENT_SERVER_URL= \ No newline at end of file +PUBLIC_REMARK42_HOST= +PUBLIC_REMARK42_SITE_ID= \ No newline at end of file diff --git a/README-en.md b/README-en.md index 16b5dee..98b5c83 100644 --- a/README-en.md +++ b/README-en.md @@ -68,6 +68,18 @@ For details, see: [GithubActions-en.md](docs/GithubActions-en.md). Upload the generated `dist/` directory to your server, and configure `NGINX` to point to `index.html`. +### 4. Comments + +This project uses self-hosted [Remark42](https://remark42.com/) as its comment system. + +For installation and deployment details, please refer to the official documentation: [Installation | Remark42](https://remark42.com/docs/getting-started/installation/) + +
+ +### 5. Changelog + +For details, see: [ChangeLog-en.md](./docs/ChangeLog-en.md) +
## ⚖️ License diff --git a/README.md b/README.md index df3addf..711196f 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,18 @@ 将生成的`dist/`目录上传至你的服务器,使用`NGINX`指向index.html。 +### 4. 评论区 + +项目使用自托管 [Remark42](https://remark42.com/) 作为评论区系统。 + +安装部署详情请查看官方文档:[Installation | Remark42](https://remark42.com/docs/getting-started/installation/) + +
+ +### 5. 更新日志 + +详情请看:[ChangeLog.md](./docs/ChangeLog.md) +
## ⚖️ 许可 diff --git a/docs/ChangeLog-en.md b/docs/ChangeLog-en.md new file mode 100644 index 0000000..1079711 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docs/ChangeLog.md b/docs/ChangeLog.md new file mode 100644 index 0000000..4af7d47 --- /dev/null +++ b/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`相关组件 \ No newline at end of file diff --git a/docs/EnvVariables-en.md b/docs/EnvVariables-en.md index c8c427d..eefc47c 100644 --- a/docs/EnvVariables-en.md +++ b/docs/EnvVariables-en.md @@ -4,42 +4,17 @@ The following environment variables are listed in the project's `.env.example` file: -| Variable Name | Description | -| --------------------- | ----------- | -| `GITHUB_TOKEN` | Enter your [Personal access token](https://github.com/settings/personal-access-tokens) | -| `GISCUS_REPO_OWNER` | Your GitHub username, for example `ClovertaTheTrilobita` | -| `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 | +| Variable Name | Description | +| ------------------------- | ---------------------------------------- | +| `PUBLIC_REMARK42_HOST` | The domain of the server hosting `Remark42` | +| `PUBLIC_REMARK42_SITE_ID` | Your custom `Remark42` site ID | -### 1. `GITHUB_TOKEN` +### 1. `PUBLIC_REMARK42_HOST` -It can greatly increase your GitHub API rate limit. Open this link: [Personal access tokens](https://github.com/settings/personal-access-tokens) +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 `Generate new token`. +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 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 `Settings > General > Features` in your repository and check `Discussions` to enable it. - -Then go to the `Discussions` page, click the pencil icon next to `Categories` on the left side of the page, and then click `New category` to create a new category named `Comments`. - -#### ② Install the Giscus GitHub App - -Open this link: [GitHub App - giscus](https://github.com/apps/giscus) - -Install it into the blog code repository you forked. - -Then go to: [giscus.app](https://giscus.app) - -In the `Repository` field, enter your repository address, and in `Page ↔️ Discussions Mapping`, choose `Discussion title contains a specific term`. - -In `Discussion Category`, select the `Comments` category you just created. - -Finally, in the generated code below, find `data-category-id` and `data-repo-id`, and fill them into the environment variables. \ No newline at end of file +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. \ No newline at end of file diff --git a/docs/EnvVariables.md b/docs/EnvVariables.md index bccacb8..48f6f10 100644 --- a/docs/EnvVariables.md +++ b/docs/EnvVariables.md @@ -4,43 +4,17 @@ 在项目的`.env.example`中,列举了如下环境变量 -| 变量名 | 内容 | -| --------------------- | ------------------------------------------------------------ | -| `GITHUB_TOKEN` | 填写你的 [Personal access tokens](https://github.com/settings/personal-access-tokens) | -| `GISCUS_REPO_OWNER` | 你的Github账号名,如`ClovertaTheTrilobita` | -| `GISCUS_REPO_NAME` | 你的代码仓库,如`SanYeCao-blog` | -| `GISCUS_CATEGORY_ID` | `GISCUS`的栏目ID,详见下方说明 | -| `GISCUS_DATA_REPO_ID` | `GISCUS`的仓库ID,详见下方说明 | +| 变量名 | 内容 | +| ------------------------- | -------------------------- | +| `PUBLIC_REMARK42_HOST` | 托管`Remark42`的服务器域名 | +| `PUBLIC_REMARK42_SITE_ID` | 你的自定义`Remark42`站点ID | -### 1. `GITHUB_TOKEN` +### 1. `PUBLIC_REMARK42_HOST` -它可以大幅增加你的Github API访问限度,打开此链接:[Personal access tokens](https://github.com/settings/personal-access-tokens) +例如你在`192.168.1.1`这台服务器上部署了`Remark42`的docker容器,并将DNS解析指向他。将解析的域名(如`https://comments.example.com`)填写在这个字段 -选择 `Generate new token`。 +注意URL末尾不要添加反斜杠`/`。 -并将生成的Token复制到.env相应位置。 - -### 2. `GISCUS` - -博客使用基于`GISCUS API`的评论区,它可以将github仓库的Discussion区域部分映射到网页中以作为评论区使用。 - -#### ①启用你仓库的Discussion - -在仓库的`Settings > General > Features`中找到`Discussions`勾选以启用它。 - -之后进入`Discussion`页面,点击页面左边`Categories`旁边的铅笔按钮,随后点击`New category`,新建一个名为`Comments`的栏目。 - -#### ②安装Giscus的Github App - -点击此链接:[Github App - giscus](https://github.com/apps/giscus) - -将其安装到你Fork的博客代码仓库中。 - -随后进入:[giscus.app](https://giscus.app) - -在`Repository`栏中填写你的仓库地址,并在`Page ↔️ Discussions Mapping`中选择`Discussion title contains a specific term` - -在`Discussion Category`处选择我们刚刚新建的`Comments`。 - -最后在下面生成的代码中找到`data-category-id``data-repo-id`,将其填写到环境变量中。 +### 2. `PUBLIC_REMARK42_SITE_ID` +你自定义的一个站点ID, 例如在你的`Remark42`的`docker-compose.yaml`中定义了`SITE=sanyecao-blog`,那请在这个字段中也填写`sanyecao-blog` diff --git a/docs/GithubActions-en.md b/docs/GithubActions-en.md index ee317eb..67b9348 100644 --- a/docs/GithubActions-en.md +++ b/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= -GISCUS_REPO_OWNER= -GISCUS_REPO_NAME= -GISCUS_CATEGORY_ID= -GISCUS_DATA_REPO_ID= +PUBLIC_REMARK42_HOST= +PUBLIC_REMARK42_SITE_ID= ``` If you have not configured these yet or do not know what they mean, please see: [EnvVariables-en.md](EnvVariables-en.md) diff --git a/docs/GithubActions.md b/docs/GithubActions.md index e5ed4db..35690a7 100644 --- a/docs/GithubActions.md +++ b/docs/GithubActions.md @@ -76,11 +76,8 @@ cat ~/.ssh/github_actions_deploy 如果你已经设置好`.env`,它里面应该有如下内容 ```env -GITHUB_TOKEN= -GISCUS_REPO_OWNER= -GISCUS_REPO_NAME= -GISCUS_CATEGORY_ID= -GISCUS_DATA_REPO_ID= +PUBLIC_REMARK42_HOST= +PUBLIC_REMARK42_SITE_ID= ``` 如果你还没配置好或不知道这些是干什么的,请详见:[EnvVariables.md](EnvVariables.md) diff --git a/src/components/remark42-counter.svelte b/src/components/remark42-counter.svelte index 4a91f01..55f69e9 100644 --- a/src/components/remark42-counter.svelte +++ b/src/components/remark42-counter.svelte @@ -1,30 +1,38 @@ + import { onMount } from "svelte"; - - - + + script.defer = true; + script.src = `${remark_config.host}/web/${name}${ext}`; + document.head.appendChild(script); + } + }); + diff --git a/src/components/remark42-embed.svelte b/src/components/remark42-embed.svelte index aef0982..e833a48 100644 --- a/src/components/remark42-embed.svelte +++ b/src/components/remark42-embed.svelte @@ -23,8 +23,8 @@ const scriptId = "remark42-script"; window.remark_config = { - host: "https://comments.cloverta.top", - site_id: "cloverta-blog", + host: import.meta.env.PUBLIC_REMARK42_HOST, + site_id: import.meta.env.PUBLIC_REMARK42_SITE_ID, components: ["embed"], show_rss_subscription: false, theme: getTheme(), diff --git a/src/components/remark42-latest-comments.svelte b/src/components/remark42-latest-comments.svelte index 83060f8..87b8e35 100644 --- a/src/components/remark42-latest-comments.svelte +++ b/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", - site_id: "cloverta-blog", + host: import.meta.env.PUBLIC_REMARK42_HOST, + site_id: import.meta.env.PUBLIC_REMARK42_SITE_ID, components: ["last-comments"], theme: localStorage.getItem("color-theme") ?? "light", max_last_comments: 10,