Support dynamic change topbar title

_includes/footer.html

@@ -2,7 +2,7 @@
   <div class="foot-header"></div>
   <div class="foot-container">
     <div class="copyright" style="display: flex; flex-direction: column; align-items: start;">
-      <p class="no-justify font-english-baskerville">Based on
+      <p class="no-justify">Based on
         <a target="_blank" href="https://material.io/">Material Design</a>
         and
         <a target="_blank" href="https://jekyllrb.com/">Jekyll</a>, open source in
@@ -15,6 +15,6 @@
 <!-- Floating Action Button -->
 <div class="mdc-touch-target-wrapper">
   <a class="mdc-fab app-fab--absolute" aria-label="Up" id="fabUp">
-    <i class="mdc-fab__icon material-symbols-rounded-fill">arrow_upward</i>
+    <i class="mdc-fab__icon material-symbols-rounded-thin">arrow_upward</i>
   </a>
 </div>

_includes/header.html

@@ -1,27 +1,27 @@
 <!-- top app bar -->
-<header class="mdc-top-app-bar mdc-top-app-bar--fixed" id="top_app_bar">
+<header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-top-app-bar--no-sticky" id="top_app_bar">
     <div class="mdc-top-app-bar__row">
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
             <!-- 用span不同button是因为button会在其触发的dialog消失后重新获得焦点 -->
             <!-- 但是用span会导致js更换icon明显变慢 -->
             <button class="mdc-top-app-bar__navigation-icon mdc-icon-button" id="topbar_btn_menu">
-                <i class="material-symbols-rounded mdc-icon-button__icon">menu</i>
+                <i class="material-symbols-rounded-thin mdc-icon-button__icon">menu</i>
             </button>
             {% comment %}
             {% if page.topbar-title != null -%}
             <span class="mdc-top-app-bar__title" style="font-family: LibreBaskerville; font-style: normal;">{{ page.topbar-title }}</span>
             {% endif -%}
             {% endcomment %}
-            <span class="mdc-top-app-bar__title font-english-baskerville font-no-change"><a href=""></a></span>
+            <span class="mdc-top-app-bar__title"><a href=""></a></span>
         </section>
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
             <button class="mdc-top-app-bar__action-item mdc-icon-button" aria-label="Theme" id="topbar_btn_theme"
                 aria-pressed="false">
-                <i class="material-symbols-rounded mdc-icon-button__icon mdc-icon-button__icon--on">light_mode</i>
-                <i class="material-symbols-rounded mdc-icon-button__icon">dark_mode</i>
+                <i class="material-symbols-rounded-thin mdc-icon-button__icon mdc-icon-button__icon--on">light_mode</i>
+                <i class="material-symbols-rounded-thin mdc-icon-button__icon">dark_mode</i>
             </button>
             <button class="mdc-top-app-bar__action-item mdc-icon-button" aria-label="About me" id="topbar_btn_about_me">
-                <i class="material-symbols-rounded mdc-icon-button__icon">face</i>
+                <i class="material-symbols-rounded-thin mdc-icon-button__icon">face</i>
             </button>
         </section>
     </div>

_posts/opera/2023-05-28-昆曲「西厢记·佳期」折子.md

@@ -7,7 +7,7 @@ actor: 施洋 方莛玉 罗轩
 mention: 
 date: 2023-05-28 +0800
 location: 杭州大剧院·可变剧场
-description: 又一场“小姐小姐多丰采，君瑞君瑞济川才”的「佳期」，我看过的戏越多，就越觉得直观好看的油彩戏妆永远是最吸引人的，然后才是细腻的表演和独属于雅部昆曲的词，唱腔反而排在最后面，是因为虽然每个人的音色不同，但按谱子唱下来总是大同小异，实难有高下之分。所以呢，新人如果准备入坑昆曲，请从“好看”开始，从她和他们开始🦄。
+description: 又一场“小姐小姐多丰采，君瑞君瑞济川才”的「佳期」，我看过的戏越多，就越觉得直观好看的油彩戏妆永远是最吸引人的，然后才是细腻的表演和独属于雅部昆曲的词，唱腔反而排在最后面，是因为虽然每个人的音色不同，但按谱子唱下来总是大同小异，实难有高下之分。所以呢，新人如果准备入坑昆曲，可从“好看”开始，从她和他们开始🦄。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20230528/xixiangji_jiaqi/DSC00664_thumb.jpg
 index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20230528/xixiangji_jiaqi/DSC00727_index_cover_thumb.jpg
 cover-alt: 昆曲 西厢记 佳期 方莛玉 施洋
@@ -29,7 +29,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 西厢记 佳期 施洋 方莛
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20230528/xixiangji_jiaqi/DSC00666_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="西厢记 佳期 施洋" }
 
-所以呢，新人如果准备入坑昆曲，请从“好看”开始，从她/他们仨开始🦄。
+所以呢，新人如果准备入坑昆曲，可从“好看”开始，从她/他们仨开始🦄。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20230528/xixiangji_jiaqi/DSC00687_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="西厢记 佳期 罗轩" }
 

_posts/opera/2023-08-26-昆曲「玉簪记·琴挑」折子.md

@@ -21,7 +21,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 玉簪记 琴挑 方莛玉 罗
 {: class="surface-block"}  
 「琴挑」是《玉簪记》常演的「琴挑」「问病」「偷诗」「秋江」第一折，书生`潘必正`寄居在姑母的女贞观中，得遇道姑`陈妙常`，深为爱慕。一夕闻听琴韵清幽，循声而往，乃`妙常`所弹。`潘`遂借琴曲以挑之，`妙常`虽亦有意，但碍于戒律故作嗔拒，其实情愫己通，从此心心相印。
 
-三度「琴挑」，依旧惊艳，我留意过哔哩哔哩数据，之前他/她俩那支【懒画眉】是“代”字辈视频里播放增长最快的，昆虫们对仙郎仙姑果然喜闻乐见，“颜值组合”也真的实至名归✨。
+三度「琴挑」，依旧惊艳，我留意过哔哩哔哩数据，之前他/她俩那支[【懒画眉】](【【方莛玉&罗轩】昆曲-玉簪记·琴挑（懒画眉）4K｜浙昆】 https://www.bilibili.com/video/BV1JN4y1M72Y){: target="_blank" }是“代”字辈视频里播放增长最快的。昆虫们对仙郎仙姑果然喜闻乐见，“颜值组合”实至名归✨。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20230826/yuzanji_qintiao/DSC02849_merge_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="玉簪记 琴挑 罗轩 方莛玉" }
 

npm/src/base/constant.ts

@@ -35,6 +35,22 @@ export const SECTION_TYPE_TAG: SectionType = {
     pathRegex: "^(\\/section/tag.*)$"
 }
 
+export const SECTION_TYPE_SHARE: SectionType = {
+    identifier: "share",
+    name: "分享",
+    indexPath: "/page/share.html",
+    // /page/share /page/share.html
+    pathRegex: "^(\\/page/share.*)$"
+}
+
+export const SECTION_TYPE_PRINT: SectionType = {
+    identifier: "print",
+    name: "印刷",
+    indexPath: "/page/print.html",
+    // /page/print /page/print.html
+    pathRegex: "^(\\/page/print.*)$"
+}
+
 export const SECTION_TYPE_OTHER: SectionType = {
     identifier: "other",
     name: "其它",
@@ -60,6 +76,10 @@ export function getSectionTypeByPath(path: string): SectionType {
         return SECTION_TYPE_OPERA
     } else if (path.match(new RegExp(SECTION_TYPE_TAG.pathRegex))) {
         return SECTION_TYPE_TAG
+    } else if (path.match(new RegExp(SECTION_TYPE_SHARE.pathRegex))) {
+        return SECTION_TYPE_SHARE
+    } else if (path.match(new RegExp(SECTION_TYPE_PRINT.pathRegex))) {
+        return SECTION_TYPE_PRINT
     } else {
         return SECTION_TYPE_OTHER
     }

npm/src/component/dialog/AboutMeDialog.tsx

@@ -29,10 +29,10 @@ class AboutMeDialog extends BasicDialog<BasicDialogProps, any> {
         return (
             <div className="center">
                 <picture>
-                    <source srcSet="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/me_emoji.webp"
+                    <source srcSet="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/me_emoji_light.webp"
                         type="image/webp" />
                     <img width="100px" height="100px" className="circle-avatar inline-for-center" alt="avatar"
-                        src="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/me_emoji.png" />
+                        src="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/me_emoji_light.png" />
                 </picture>
                 <span className="about-me-name">立泉</span>
                 <section className="about-me-tag-wrapper">

npm/src/component/drawer.scss

@@ -22,6 +22,8 @@
     @include drawer.item-activated-icon-ink-color(var(--mdc-theme-on-surface));
     // transition: transform 0.2s ease-out !important;
     border: none;
+    padding-left: var(--drawer-padding-horizontal);
+    padding-right: var(--drawer-padding-horizontal);
 }
 
 .dark .mdc-drawer {

npm/src/component/text.scss

@@ -247,7 +247,7 @@ audio {
 }
 
 .font-handwritten {
-    --mdc-typography-body1-font-size: 1.1rem;
+    --mdc-typography-body1-font-size: 1.05rem;
 }
 
 .font-handwritten .english,

npm/src/component/text.ts

@@ -1,3 +1,3 @@
 // import "./text.scss"
 
-export function initText() {}
+export function initText() {}