#3 Modify Format and Prettier index page

SmilingWayne · Nov 18, 2024 · eab3c78 · eab3c78
1 parent c7dd3b4
commit eab3c78
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 9 deletions.
diff --git a/docs/Literature/Novel/Journey_to_India.md b/docs/Literature/Novel/Journey_to_India.md
@@ -0,0 +1,29 @@
+# 印度之行
+
+作者是 E·M 福斯特。以贵族小姐在印度的遭遇（以为自己出游时在石窟中被随从的印度奴仆侵犯，实则是冤枉他人）的故事，反映英帝国与殖民地（印度）之间在观点和社会统治上的巨大割裂。某种程度上可以视为东西方文化的剧烈摩擦。
+
+> 注：女主名叫 “Quested”，嗯！很有意思。既是西方对东方的好奇，也是西方对东方的误解。
+
+!!! note "一个意向：石窟。三个环境（对应三个章节）：清真寺、石窟、神庙。"
+
+- 印度——**支离破碎成上百份的印度**——在冷漠的月光下私语切切；但此时此刻，面对此情此景，印度却又似乎浑然一体，重新成为他们自己的印度；而且通过倾听那逝者如斯的哀伤挽歌，他们又重新获得那已然逝去的伟大荣光，他们感觉又恢复了青春，因为诗人提醒他们霁月难逢、青春易逝。
+
+- （殖民时期印度的）街道都是以征服印度的诸位将军的名字命名的，横平竖直、垂直交叉，活脱脱象征着大不列颠罩在印度大地上的网罗。
+
+
+!!! quote "呜呼，我离开人世已历千载 / 玫瑰依然盛开春天仍旧美丽 / 而那些深知我内心的人们啊 / 仍旧会来拜谒我埋骨的墓地。"
+    十六世纪比德尔地方阿里·巴里德王的陵墓。
+
+> **昌德布拉尔**俱乐部：欧洲人的俱乐部就是其精神上的大本营，英国权力的真正所在地，当地官员和百万富翁们徒然渴慕的极乐天堂。——乔治·奥威尔。
+
+> 她对于她们这次新生活的枯燥乏味深感失望。她们先是横渡地中海，然后又穿越了埃及的沙漠才终于来到了孟买港，**这一路的行程多么富有浪漫色彩，可到头来她们看到的却只不过是一幢幢格子状的带凉台的平房。**
+
+!!! quote "这是这些受过教育的本地人的最新花招。他们过去习惯于卑躬屈膝、阿谀奉承，不过年轻的一代却信奉要表现出独立不羁的男子汉气概。他们认为这样反而更能博得那些巡回下院议员的好感。"
+    英国人对待殖民地系统中的当地人的看法。
+
+    > 少校从来就没意识到，印度的受教育阶层也会经常相互走动，而且正在努力编织一张全新的社会关系网，尽管其过程可说是历尽了艰辛
+
+    > “神秘不过是混乱的一种冠冕堂皇的说法。这其中没有任何值得夸耀的东西，这两者都是。阿齐兹跟我都很清楚，**印度就是乱糟糟的一团**。”
+
+
+
diff --git a/docs/Study/index.md b/docs/Study/index.md
@@ -64,7 +64,7 @@
 
     - [ ] [法语](./English/French.md)（会说一点点点）
     - [ ] [英语](./English/English.md)（一个渴望双语生活的人）
-    - [ ] [文本摘](./)
+    - [ ] 文本摘
 
 
 ------

diff --git a/docs/Website/Step3.md b/docs/Website/Step3.md
@@ -0,0 +1,130 @@
+# 网站界面美化：文本块｜字体
+
+本章会简单介绍一下Mkdocs Materials主题如何适配常用的Markdown语法。在阅读后续内容前，需要确保已经实现了[第一篇：网站搭建](./Step1.md) 中的内容，如果已经实现了[第二篇笔记](./Step2.md)，效果会更好。
+
+## [Admonitions](https://squidfunk.github.io/mkdocs-material/reference/admonitions/)
+
+我最喜欢用的是 Admonitions。只需要在 `mkdocs.yml` 中加入以下内容：
+
+```yml
+markdown_extensions:
+  - admonition
+  - pymdownx.details
+  - pymdownx.superfences
+```
+
+就可以使用了。
+
+效果：
+
+![](https://cdn.jsdelivr.net/gh/SmilingWayne/picsrepo/202411181356572.png)
+
+
+---
+
+## 自定义样式等若干问题
+
+**这个阶段是个非常好的讲解自定义格式样式的地方**。刚开始使用Admonition的时候，我觉得标题和文本框中的字体大小有点小。就在想，能不能调整调整。
+
+这是可以的！首先你需要在 `docs` 文件夹下创建一个 `stylesheets` 文件夹。然后在这个文件夹下创建一个 `extra.css` 文件。
+
+目录结构：
+
+```text
+├── stylesheets
+│   └── extra.css
+└── Part1
+    ├── index.md
+    ├── Paper1.md
+    ├── Paper2.md
+    └── yanTalks.md
+```
+
+然后，我们进入 `mkdocs.yml` 文件，加入下面的代码，能够把 `extra.css` 的内容同步到更新中。
+
+```yml
+extra_css:
+  - stylesheets/extra.css
+```
+
+现在在 `extra.css` 中的更新，就可以反映在你的整个网页中了。
+
+比如，我想要调整页面的宽度，就可以加入：
+
+```css
+.md-grid {
+    max-width: 1440px;   
+}
+```
+
+效果：
+
+![](https://cdn.jsdelivr.net/gh/SmilingWayne/picsrepo/202411181622158.png)
+
+### 一个简单的例子
+
+从mkdocs的官网可以知道，有一种 inline block 形式的 Admonition，可以在一行中显示多个Admonition。具体的语法是：
+
+```markdown
+!!! info inline end "Lorem ipsum"
+
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit. Nulla et euismod nulla.
+    Curabitur feugiat, tortor non consequat
+    finibus, justo purus auctor massa.
+```
+
+但是，如果在自己的页面中，一次性用多个内联，会发现经常出现“一行塞不下，两行空太大”的尴尬的情况（感觉前端应该经常出现...），比如：
+
+![](https://cdn.jsdelivr.net/gh/SmilingWayne/picsrepo/202411181646282.png)
+
+**这里我们可以通过修改这个内联的 Admonition 的尺寸来实现一个美观的页面，同时还不影响其他的 Admonition 的格式。** 
+
+
+我们默认，设置了页面宽度是 1280 px （见前）。此时，在 `extra.css` 中加入语句：
+
+```css
+.md-typeset .admonition.inline {
+    width: 350px;   
+    column-width: auto;
+}
+```
+
+就可以发现，这个内联的Admonition的宽度被限制小了一点，使得一行中能比较美观地塞下2个框框了。
+
+![](https://cdn.jsdelivr.net/gh/SmilingWayne/picsrepo/202411181658379.png)
+
+> 这个图是配置了字体后截的...懒得修改了，反正目的达到了！
+
+---------
+
+## 设置字体
+
+我的个人网站用的字体是[霞鹜文楷](https://github.com/lxgw/LxgwWenKai)。你可以通过一些简单的设置即可配置。
+
+首先，打开我们操作了很多次的 `mkdocs.yml`，修改 `extra_css` 为：
+
+```yml
+extra_css:
+  - stylesheets/extra.css
+  - https://cdn.jsdelivr.net/npm/[email protected]/style.css
+```
+
+同时，在你的之前新建的 `extra.css` 中，导入我们的字体：
+
+```css
+:root {
+    --md-text-font:  "LXGW WenKai Screen", sans-serif; 
+    /* --md-code-font:  */
+  }
+
+
+@font-face {  	
+    font-family: 'LXGW';  	
+    src: url('./LXGWWenKaiGBScreen.woff') format('woff');/*IE*/  	
+}
+```
+
+大功告成！我们的字体添加完毕了！现在你的页面里有属于自己的一套字体了！
+
+![](https://cdn.jsdelivr.net/gh/SmilingWayne/picsrepo/202411181658025.png)
diff --git a/docs/Website/index.md b/docs/Website/index.md
@@ -16,7 +16,10 @@
 **[第二篇](./Step2.md)**
 :   内容：Mkdocs Materials主题推荐，仓库路径，主页其他自定义设置。
 
-**第三篇**
+**[第三篇](./Step3.md)**
+:   内容：Mkdocs 代码块样式、字体设置、格式自定义设置。
+
+**第四篇**
 :   Working...
 
 

diff --git a/docs/index.md b/docs/index.md
@@ -13,19 +13,37 @@ hide:
 
 === "<font size = 6>:fontawesome-solid-paw: </font><font size = 6 face = "savoye LET" >About Me</font>"
 
-    - 🧑‍🎓 一个时刻想要变得不普通的普通人。你可以叫我 "笑笑" 。
+    <br> 
 
-    - 📖 喜欢阅读，有时观影，偶尔编程 :material-language-python: | :material-language-java:，不事劳作。
+    !!! note inline "一句话介绍"
+        🧑‍🎓 一个时刻想要变得不普通的普通人。
+        
+        🥰 你可以叫我 "笑笑" 。
 
-    - 🎻 “有柴小协[^1]的日子就是好日子。”
+    !!! note inline "我的爱好" 
+        📖 喜欢阅读，有时观影。
+        
+        💻 偶尔编程 :material-language-python: | :material-language-java:，不事劳作。
 
-    - 🥀 “知君兴尽欲回舟，日暮天寒不可留。”[^2]
+    !!! abstract inline "关于音乐" 
+        🎻 “有柴小协[^1]的日子就是好日子。”
 
-    - 🧸 <font face = "American Typewriter" >INFJ-T</font>[^3] / 谨慎的自由主义[^4]者 / 努力学习语言中。
+    !!! abstract inline "关于诗歌" 
+        🥀 “知君兴尽欲回舟，日暮天寒不可留。”[^2]
+
+    !!! success inline "MBTI / 在忙什么"
+        🧸 <font face = "American Typewriter" >INFJ-T</font>[^3] 
+        
+        🎀 谨慎的自由主义[^4]者 / 努力学习语言中。
           
         > (中文 / English / Français)。
 
-    - 🌏 暂居南京。
+    !!! success inline "晃晃悠悠～"
+        🌏 暂居南京。
+
+        🐳 常年浸润在江南的朦胧与诗意中。
+
+        > 试图克服懒癌，不时热爱旅行。
 
 === "<font size = 6>:fontawesome-solid-book: </font><font size = 6 face = "savoye LET">About The NoteBook</font>"
 

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -13,12 +13,19 @@
 
 .md-typeset .admonition,
 .md-typeset details {
-    font-size: 14px
+    font-size: 15px
 }
 
 .md-grid {
     max-width: 1280px;   
 }
+
+.md-typeset .admonition.inline {
+    width: 350px;   
+    column-width: auto;
+    font-size: 15px;
+}
+
 /* 
 @font-face {
     font-display: auto;

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -231,6 +231,7 @@ nav:
           - 同情者: Literature/Novel/Sympathatic.md
           - 🇫🇷巨人传: Literature/Novel/Giants.md
           - 侦探小说: Literature/Novel/Detective.md
+          - 印度之行: Literature/Novel/Journey_to_india.md
           - 华氏451: Literature/Novel/Fahrenheit_451.md
           - 🇫🇷流年的飞沫: Literature/Novel/Lecume_des_jours.md
           - 🇬🇧《1984》: Literature/Novel/1984.md
@@ -550,6 +551,7 @@ nav:
       - Website/index.md
       - 第一篇｜框架和托管: Website/Step1.md
       - 第二篇｜主题和美化: Website/Step2.md
+      - 第三篇｜字体和文本: Website/Step3.md
 
 site_author: SmilingWayne
 repo_name: SmilingWayne/me