Merge pull request #11 from isunjn/dev

v1.0.0

README-cn.md

@@ -136,11 +136,11 @@ lang = 'en'
 
 #### 图标
 
-- 创建 `myblog/static/icon` 目录，links 中的 icon 值为其中的 svg 文件的文件名，不包含 `.svg` 后缀
+- 将 `myblog/themes/serene/static/icon` 复制到 `myblog/static/icon`，links 中的 icon 值为其中的 svg 文件的文件名，不包含 `.svg` 后缀
 
 - 找到你想要的 icon 的 svg 文件，修改其宽高为 24，颜色为 currentColor: `... width="24" height="24" ... fill="currentColor" ...`
 
-- 默认 icon（来自 [Remix Icon](https://remixicon.com/)）位于 `myblog/themes/serene/static/icon`，你可以用 `myblog/static/icon` 当中的同名文件对其进行覆盖
+- 默认图标来自 [Remix Icon](https://remixicon.com/)
 
 #### RSS
 
@@ -186,7 +186,7 @@ lang = 'en'
 
 - Serene 支持使用 [Giscus](https://giscus.app) 作为文章评论系统
 
-- 开启此功能需要新建 `myblog/templates/_giscus_script.html` 并将在 Giscus 网站上配置好的 script 放入其中
+- 开启此功能需要新建 `myblog/templates/_giscus_script.html` 并将在 Giscus 网站上配置好的 script 放入其中，然后将其中 `data-theme` 的值改为 `https://<your-domain-name>/giscus_light.css`, 将 `<your-domain-name>` 改为你自己的域名，和 `config.toml` 中的 `base_url` 一致
 
 - `config.toml` 中的 `comment = true` 设置所有文章开启评论，可以在文章的 front matter 中 `[extra]` 下设置 `comment = false` 控制单篇文章是否显示评论
 
@@ -310,5 +310,5 @@ zola build
 更新主题前请在 GitHub 上查看 CHANGELOG 以确认是否有 breaking changes
 
 ```sh
-git submodule update --remote
+git submodule update --remote themes/serene
 ```

README.md

@@ -136,13 +136,13 @@ Copy the contents of `myblog/themes/serene/config.example.toml` to `myblog/confi
 
 #### Icon
 
-- Create `myblog/static/icon` directory, the icon value in `links` is the file name of the svg file in it, without the `.svg` suffix
+- Copy `myblog/themes/serene/static/icon` directory to `myblog/static/icon`, the icon value in `links` is the file name of the svg file in it, without the `.svg` suffix
 
 - Find the svg file of the icon you want, modify its width and height to 24, and the color to currentColor:
 
   `... width="24" height="24" ... fill="currentColor" ...`
 
-- The default icons (from [Remix Icon](https://remixicon.com/)) is located in `myblog/themes/serene/static/icon`, the file of the same name in `myblog/static/icon` will replace it
+- The default icons came from [Remix Icon](https://remixicon.com/)
 
 #### RSS
 
@@ -188,7 +188,7 @@ Copy the contents of `myblog/themes/serene/config.example.toml` to `myblog/confi
 
 - Serene supports using [giscus](https://giscus.app) as the comment system
 
-- To enable it, you need to create `myblog/templates/_giscus_script.html` and put the script configured on the giscus website into it
+- To enable it, you need to create `myblog/templates/_giscus_script.html` and put the script configured on the giscus website into it, then change the value of `data-theme` to `https://<your-domain-name>/giscus_light.css`, replace `<your-domain-name>` with you domain name, same as `base_url` in `config.toml`
 
 - `comment = true` in `config.toml` sets all posts to enable comments, you can set `comment = false` under `[extra]` in the front matter of the post to control whether a specific post displays comments
 
@@ -312,5 +312,5 @@ To deploy a static site, please refer to zola's [documentation about deployment]
 Please check the CHANGELOG on github for breaking changes before updating the theme
 
 ```sh
-git submodule update --remote
+git submodule update --remote themes/serene
 ```

config.example.toml

@@ -14,7 +14,7 @@ taxonomies = [{ name = "tags" }, { name = "categories" }]
 [markdown]
 highlight_code = true
 extra_syntaxes = []
-highlight_theme = "gray-matter-dark"  # Code highlight theme, choose one at https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting
+highlight_theme = "one-dark"          # Code highlight theme, choose one at https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting
 render_emoji = false
 external_links_target_blank = false
 external_links_no_follow = true

sass/main.scss

@@ -621,7 +621,7 @@ body.post {
       gap: 10px;
 
       .icon {
-        height: 1.5em;
+        height: 1.75em;
         display: flex;
         align-items: center;
       }
@@ -668,6 +668,10 @@ body.post {
     }
   }
 
+  .mermaid {
+    background: #fff;
+  }
+
   .giscus {
     padding: 0 15px;
   }

static/js/main.js

@@ -38,7 +38,7 @@ if (document.body.classList.contains('post')) {
     const warnDays = parseInt(alert.dataset.days);
     if (intervalDays >= warnDays) {
       const msg = alert.dataset.alertTextBefore + intervalDays + alert.dataset.alertTextAfter;
-      alert.lastChild.textContent = msg;
+      alert.querySelector('.content').textContent = msg;
       alert.classList.remove('hidden');
     }
   }