vocab(phonetics): 音标体系

.markdownlint.json

@@ -4,5 +4,6 @@
     "rules": "https://github.com/DavidAnson/markdownlint",
     "vscode": "https://github.com/DavidAnson/vscode-markdownlint"
   },
-  "MD013": false
+  "MD013": false,
+  "MD033": false
 }

.vitepress/theme/custom.css

@@ -16,6 +16,11 @@
     --vp-c-brand-soft: var(--gb-c-bluegray-lighter);
 }
 
+/* Override VP styles */
+.vp-doc h3 {
+    margin-bottom: 1rem;
+}
+
 /* Text Theme */
 .vp-doc a {
     text-decoration: none;
@@ -45,12 +50,13 @@ p>a>img[alt^="Badge:"] {
 }
 
 /* image */
-.main figure img {
+img.large-media, embed.large-media, iframe.large-media {
     border-radius: 0.5rem;
     border: 1px solid var(--vp-c-default-1);
     margin-bottom: 0.5rem;
     margin-left: auto;
     margin-right: auto;
+    width: 100%;
 }
 
 figure>figcaption {
@@ -59,3 +65,21 @@ figure>figcaption {
     font-size: 12px;
     font-weight: 400;
 }
+
+iframe {
+    height: 100%;
+}
+
+.video {
+    position: relative;
+    padding-bottom: 56.25%; /* 16/9 */
+}
+
+.video iframe {
+    border: none;
+    position: absolute;
+}
+
+iframe.page {
+    height: 50vh;
+}

SUMMARY.md

@@ -8,7 +8,7 @@
   * [多邻国](content/primer/duolingo.md)
   * [新概念英语](content/primer/new-concept-english.md)
 * [🔠 词汇](content/vocabulary/README.md)
-  * [音标 🚧](content/vocabulary/yin-biao.md)
+  * [音标](content/vocabulary/phonetic-symbols.md)
   * [词性](content/vocabulary/part-of-speech.md)
   * [词根词缀 🚧](content/vocabulary/ci-gen-ci-zhui.md)
   * [拼写](content/vocabulary/spelling.md)

content/preface.md

@@ -8,7 +8,7 @@ description: Preface
 
 这是一个老生常谈的话题，我们直接看看 ChatGPT 是怎么回答的。
 
-![问 ChatGPT：还有必要学外语吗？](.assets/preface-ask-chatgpt.png '问 ChatGPT：还有必要学外语吗？')
+![问 ChatGPT：还有必要学外语吗？](./preface-ask-chatgpt.png '问 ChatGPT：还有必要学外语吗？'){.large-media}
 
 事实上，如果你自己不能回答这个问题，那么可能当下的你并不需要学英语。在这种情况下逼迫自己学，效果应该不会很好。
 

content/vocabulary/README.md

@@ -1,5 +1,5 @@
 ---
-description: Vocabulary | Lexical Resource
+description: Vocabulary | Lexical Resources
 ---
 
 # 🔠 词汇 🚧

content/vocabulary/phonetic-symbols.md

@@ -0,0 +1,45 @@
+---
+description: Phonetic Symbols
+---
+
+# 音标
+
+## 看懂就行
+
+音标和汉语拼音一样，最主要的作用是标注一个字母或单词如何发音。
+
+熟记音标有利于学习生词的发音，但背音标完全没必要，因为这个过程实在是太枯燥了。现在的查词软件都有发音功能，只要在查词时注意观察音标，并关联、对比它们和发音的关系，慢慢就会熟悉音标字母本身的发音规律。在想不起来一个音标怎么读时，回来看看这里的表格即可。
+
+不过，先了解一下音标体系还是有必要的，因为不同体系的音标符号可能会让人困惑。
+
+## 音标体系
+
+这个视频介绍了不同音标体系的来龙去脉（来自[英语兔](https://www.yingyutu.com/)）：
+
+<div class="video">
+<iframe src="//player.bilibili.com/player.html?aid=414096645&bvid=BV1iV411z7Nj&cid=546437559&p=2"
+    scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"
+    class="large-media">
+</iframe>
+</div>
+
+### 英式英语 IPA
+
+这个[英语国际音标表 (International Phonetic Alphabet for English)](https://mengxiang.net/tool/phonetic/) 做得非常精美（来自[梦想网](https://mengxiang.net)）：
+
+<iframe src="https://mengxiang.net/tool/phonetic/"
+    frameborder="no" framespacing="0" class="page large-media">
+</iframe>
+
+### 美式英语 IPA
+
+> American IPA Chart
+
+下图为美式英语 IPA 图表，和英式英语 IPA 略有不同，比如 `/n/` 的发音不一样（点击音标、动物图标可发音）：
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
+<embed :src="withBase('/content/vocabulary/american-IPA-chart-english.svg')"
+    class="large-media" />