Support Noto Serif SC font

_posts/original/2019-02-13-只识深闺绣花鸟.md

@@ -53,7 +53,7 @@ tags: 碎碎念 笑傲江湖 羁绊
 《玉簪记·琴挑》里有一句：
 
 > 一度春来，一番花褪，怎生上我眉痕。
-{: class="handwritten" }
+{: class="font-handwritten" }
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20190213/shanwen_yuzanji_2018_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="单雯 玉簪记 琴挑" }
 

_posts/original/2019-05-18-槐安国内春生酒.md

@@ -13,7 +13,7 @@ pin: true
 ---
 
 > 槐安国内春生酒，花烛堂里夜合欢
-{: class="handwritten pre" }
+{: class="font-handwritten pre" }
 
 三年前，从昆曲《南柯梦》的「入梦」一折看到这句词，莫名亲切，又隐约有些伤感，由此便记住了。`汤显祖`的《南柯记》原著长达四十四出，单独翻阅晦涩难懂，所以我真正了解“南柯一梦”还是通过省昆在台北首演时发行的那张DVD。上下两本五个小时，真的就像歌剧一样，惊艳于刺绣戏服上尽是的花花草草，新生代昆曲名角们对舞和曲的演绎也已然炉火纯青。
 

index.html

@@ -12,7 +12,7 @@
     <img src="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/index_original_thumb.jpg" loading="lazy"
         class="index-top-cover height-animation" alt="杭州" />
     <div class="index-top-card-container">
-        <p class="index-top-card-text handwritten-index">久在樊笼里，复得返自然</p>
+        <p class="index-top-card-text font-handwritten-index">久在樊笼里，复得返自然</p>
     </div>
 </section>
 {%- assign index-category = "original" %}

npm/dist/blog-564-v2.0.0.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([[564],{4564:(e,s,b)=>{b.r(s)}}]);

npm/src/component/dialog/PreferenceDialog.tsx

@@ -8,6 +8,7 @@ import { SettingsToggle } from "./SettingsToggle"
 interface DialogContentState {
     fixedTopbarOn: boolean
     handwrittenFontOn: boolean
+    notoSerifSCFontOn: boolean
     autoThemeOn: boolean
 }
 
@@ -20,10 +21,12 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
         this.presenter = new PreferenceDialogPresenter(this)
         this.onClickFixedTopbarSwitch = this.onClickFixedTopbarSwitch.bind(this)
         this.onClickHandwritingFontSwitch = this.onClickHandwritingFontSwitch.bind(this)
+        this.onClickNotoSerifSCFontSwitch = this.onClickNotoSerifSCFontSwitch.bind(this)
         this.onClickAutoThemeSwitch = this.onClickAutoThemeSwitch.bind(this)
         this.state = {
             fixedTopbarOn: false,
             handwrittenFontOn: false,
+            notoSerifSCFontOn: false,
             autoThemeOn: false
         }
     }
@@ -48,6 +51,16 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
         })
     }
 
+    onClickNotoSerifSCFontSwitch() {
+        consoleDebug("PreferenceDialogContent onClickNotoSerifSwitch")
+        const newState = !this.state.notoSerifSCFontOn
+        this.presenter.onClickNotoSerifSCFontSwitch(newState)
+        // 更新state，刷新UI
+        this.setState({
+            notoSerifSCFontOn: newState
+        })
+    }
+
     onClickAutoThemeSwitch() {
         consoleDebug("PreferenceDialogContent onClickAutoThemeSwitch")
         const newState = !this.state.autoThemeOn
@@ -91,6 +104,7 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
     }
 
     handwrittenFontTitle = "使用<a href=\"https://www.17font.com/font/detail/960a115089a711ee98da67ad58e0ec00.html\" target=\"_blank\">兰亭国风行楷</a>字体"
+    notoSerifSCFontTitle = "使用<a href=\"https://source.typekit.com/source-han-serif/cn/\" target=\"_blank\">思源宋体</a>字体"
     autoThemeTitle = "跟随系统自动切换<a href=\"/post/original/2021/08/03/为博客添加站内搜索和暗黑模式.html\">主题配色</a>"
 
     dialogContent(): JSX.Element {
@@ -112,6 +126,9 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
                     <SettingsToggle titleHtml={this.handwrittenFontTitle}
                         on={this.state.handwrittenFontOn}
                         onClickToggle={this.onClickHandwritingFontSwitch} />
+                     {/* <SettingsToggle titleHtml={this.notoSerifSCFontTitle}
+                        on={this.state.notoSerifSCFontOn}
+                        onClickToggle={this.onClickNotoSerifSCFontSwitch} /> */}
                     <SettingsToggle titleHtml={this.autoThemeTitle}
                         on={this.state.autoThemeOn}
                         onClickToggle={this.onClickAutoThemeSwitch} />

npm/src/component/dialog/PreferenceDialogPresenter.ts

@@ -2,7 +2,7 @@ import { PreferenceDialog } from "./PreferenceDialog"
 import { LocalRepository } from "../../repository/LocalRepository"
 import { saveTheme, toggleTheme } from "../theme"
 import { refreshTopbar, setFixedTopbar } from "../topbar"
-import { setHandwrittenFont } from "../font/font"
+import { setHandwrittenFont, setNotoSerifSCFont } from "../font/font"
 
 export class PreferenceDialogPresenter {
 
@@ -18,10 +18,10 @@ export class PreferenceDialogPresenter {
         this.component.setState({
             fixedTopbarOn: this.localFixedTopbarOn(),
             handwrittenFontOn: this.localHandWritingFontOn(),
+            notoSerifSCFontOn: this.localNotoSerifSCFontOn(),
             autoThemeOn: this.localAutoThemeOn()
         })
     }
-
     onClickFixedTopbarSwitch(on: boolean) {
         this.localRepository.saveFixedTopbarOn(on)
         setFixedTopbar(on)
@@ -35,6 +35,11 @@ export class PreferenceDialogPresenter {
         setHandwrittenFont(on)
     }
 
+    onClickNotoSerifSCFontSwitch(on: boolean) {
+        this.localRepository.saveNotoSerifSCFontOn(on)
+        setNotoSerifSCFont(on)
+    }
+
     onClickAutoThemeSwitch(on: boolean) {
         const bodyE = document.getElementsByTagName("body")[0]
         if (on) {
@@ -65,6 +70,10 @@ export class PreferenceDialogPresenter {
         return this.localRepository.getHandWritingFontOn()
     }
 
+    localNotoSerifSCFontOn(): boolean {
+        return this.localRepository.getNotoSerifSCFontOn()
+    }
+
     localAutoThemeOn(): boolean {
         return this.localRepository.getAutoThemeOn()
     }

npm/src/component/dialog/TagDialog.scss

@@ -48,7 +48,7 @@
     background: var(--list-chip-2-bg);
 }
 
-.handwritten {
+.font-handwritten {
     .tag-list-item__post-type,
     .tag-list-item__post-block1,
     .tag-list-item__post-block2 {