mkdocs配置与美化

docs/ProgrammingBlog/LearningNotes/Encoding/article.md

@@ -1,4 +1,12 @@
 # Unicode字符集、常见的编码与不同编程语言使用的编码策略
+
+!!! note "写在前面"
+    本文是半笔记半教学性质的文章，即这是作者在学习相关知识时为加深理解所作的笔记，希望对大家也能有所帮助。
+    本文如有错误或不周全之处，欢迎指出，不胜感激。
+
+!!! tip "阅读建议"
+    阅读难度：中
+
 ## Unicode
 **Unicode**是一个字符集，囊括了了世界上绝大部分的常用文字。
 
@@ -35,7 +43,7 @@ Unicode规定了每个字符与一个二进制数的一一映射关系，这个
 utf-16是一种巧妙的编码，但是由于它是变长编码，它的随机访问、获取字符串长度等操作的时间复杂度在不使用额外优化的情况下达不到常数级别。
 
 ### UCS-2编码
-UCS-2是utf-16的简化版，或者说是子集。它是一种**定长编码**，只**使用两个字节储存一个字符**，这就不可避免地导致了UCS-2只能存储基本平面上的字符，**不能正常存储辅助平面上的字符**。不过UCS-2仍能储存大部分的常用字符，而且随机访问、获取字符串长度等操作的时间复杂度在常数级别。
+UCS-2是utf-16的简化版，或者说是子集。它是一种**定长编码**，只**使用两个字节储存一个字符**，这就不可避免地导致了UCS-2只能存储基本平面上的字符，也就是说**UCS-2不完全支持Unicode**，**不能正常存储辅助平面上的字符**。不过UCS-2仍能储存大部分的常用字符，而且随机访问、获取字符串长度等操作的时间复杂度在常数级别。
 
 ### utf-8编码
 虽然utf-16已经很大程度地节约了空间，但是对于纯ASCII字符串，utf-16对每个字符的两个字节中都有一个是全0的，这也很浪费空间。**utf-8**编码是一种**变长编码**，使用1个、2个、3个或4个字节保存一个字符，并**兼容ASCII**。
@@ -59,7 +67,7 @@ Unicode码点范围    | utf-8二进制格式
 **UCS-4**使用4个字节保存一个字符的码点，UCS-4与utf-32暂时是相同的。
 
 ### Latin-1
-**Latin-1**使用一个字节保存一个字符，但是这个字符只能是一个字节表达范围内的字符，即`0x0` ~ `0xFF`。在`0x00` ~ `0x7F`之间的Latin-1字符，都与ASCII编码兼容。
+**Latin-1**使用一个字节保存一个字符，但是这个字符只能是一个字节表达范围内的字符，即`0x0` ~ `0xFF`，也就是说**Latin-1不完全支持Unicode**。在`0x00` ~ `0x7F`之间的Latin-1字符，都与ASCII编码兼容。
 
 ## 不同编程语言中的字符串编码策略
 ### C/C++
@@ -130,8 +138,7 @@ typedef struct {
 } PyUnicodeObject;
 ```
 这种设计能让Python正确处理所有Unicode字符，并支持`O(1)`级别实现复杂度的随机访问和获取字符串长度。
-!!! Note
-    未完待续
+!!! note "未完待续"
 
 ### Javascript
 Javascript的字符串使用UCS-2编码，对于UCS-2无法表示的字符（辅助平面上的字符），使用两个“字符”（JS中的字符）表示，这就会导致一些问题。下面是一段javascript交互环境代码：
@@ -155,5 +162,4 @@ Javascript的字符串使用UCS-2编码，对于UCS-2无法表示的字符（辅
 ```
 
 ### rust
-!!! Note
-    未完待续
+!!! note "未完待续"

docs/index.md

@@ -1,4 +1,10 @@
+---
+title: 主页
+icon: octicons/home-24
+---
+
 # 欢迎到访 Ybr Studio Website
+
 ## 关于我 / *About Me*
 ### 你好呀 / *Hello*
 你好呀，我是**Ybr**，男，现高中生一名。
@@ -21,4 +27,4 @@ Bilibili: <a href="https://space.bilibili.com/1369096401/" target="_blank">YbrSt
 本站是我的个人网页，会不定期（真的非常不定期）更新一些**个人随笔**、**编程技术文章**以及**个人项目文档**。
 
 !!! note "著作权声明 ©"
-    本站所有内容（除有特殊标注外）均遵循<a href="https://creativecommons.org/licenses/by-nd/4.0/" target="_blank">CC-BY-ND-4.0</a>协议（署名-禁止演绎，保留原作者姓名即可个人使用或商用，但是不能改编原作与他人分享）。使用时不得违反法律或公序良俗，或有攻击他人等造成不良影响的行为。
+    **本站所有内容（除有特殊标注外）**均遵循<a href="https://creativecommons.org/licenses/by-nd/4.0/" target="_blank">CC-BY-ND-4.0</a>协议（署名-禁止演绎，保留原作者姓名即可个人使用或商用，但是不能改编原作与他人分享）。使用时不得违反法律或公序良俗，或有攻击他人等造成不良影响的行为。

mkdocs.yml

@@ -3,19 +3,33 @@ site_url: https://YbrStudio.github.io/
 repo_url: https://github.com/YbrStudio/YbrStudio.github.io/
 site_author: Ybr
 
-markdown_extensions:
-  - admonition
-  - pymdownx.details
-  - pymdownx.superfences
+markdown_extensions:  # see more at https://squidfunk.github.io/mkdocs-material/reference/
+  - admonition  # 提示块
+  - pymdownx.superfences  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#superfences
+  - attr_list  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists
+  - md_in_html  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html
 
   - pymdownx.highlight:
       anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
   - pymdownx.inlinehilite
   - pymdownx.snippets
+
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+
+  - pymdownx.tabbed:
+      alternate_style: true
+
+  - footnotes
+
 
 theme:
   name: material
   icon:
+    # 提示块
     admonition:
       note: octicons/tag-16
       abstract: octicons/checklist-16
@@ -30,6 +44,21 @@ theme:
       example: octicons/beaker-16
       quote: octicons/quote-16
 
+    annotation: material/plus-circle-outline
+
+  features:
+    - content.code.copy
+    - content.code.annotate
+    # - content.tabs.link  # 标签联动
+
+    - navigation.instant  # 点击内部链接时，不用全部刷新页面
+    - navigation.tracking  # 在url中使用标题定位锚点
+    - navigation.tabs  # 顶部显示导航顶层nav（也就是第一个节点）
+    - navigation.tabs.sticky   # 滚动时隐藏顶部nav，需要配合navigation.tabs使用
+    # - navigation.expand  # 不折叠左侧nav节点
+    # - toc.integrate  # 隐藏右侧目录
+    - navigation.top  # 一键回顶部
+
   palette:
     primary: black
     scheme: slate

notes.md

@@ -0,0 +1,94 @@
+# Bilibili视频嵌入模板
+```html
+<div style="position: relative; padding: 30% 45%;">
+<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
+</div>
+```
+
+来源:https://www.cnblogs.com/wkfvawl/p/12268980.html
+感谢原作者
+
+参数说明:
+aid: 视频ID 就是B站的 avxxxx 后面的数字
+cid: 应该是客户端id, clientId 的缩写(推测的, 不一定准确) 经过测试, 这个字段不填也没关系
+page: 第几个视频, 起始下标为 1 (默认值也是为1) 就是B站视频, 选集里的, 第几个视频
+as_wide: 是否宽屏 1: 宽屏, 0: 小屏
+high_quality: 是否高清 1: 高清, 0: 最低视频质量(默认) 如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p high_quality=1 是最高1080p
+danmaku: 是否开启弹幕 1: 开启(默认), 0: 关闭
+
+
+
+# 内置Icon查找
+https://squidfunk.github.io/mkdocs-material/reference/
+
+
+
+# 网格模板
+https://squidfunk.github.io/mkdocs-material/reference/grids/
+
+```html
+<div class="grid cards" markdown>
+
+-   :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
+
+    ---
+
+    Install [`mkdocs-material`](#) with [`pip`](#) and get up
+    and running in minutes
+
+    [:octicons-arrow-right-24: Getting started](#)
+
+-   :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
+
+    ---
+
+    Focus on your content and generate a responsive and searchable static site
+
+    [:octicons-arrow-right-24: Reference](#)
+
+-   :material-format-font:{ .lg .middle } __Made to measure__
+
+    ---
+
+    Change the colors, fonts, language, icons, logo and more with a few lines
+
+    [:octicons-arrow-right-24: Customization](#)
+
+-   :material-scale-balance:{ .lg .middle } __Open Source, MIT__
+
+    ---
+
+    Material for MkDocs is licensed under MIT and available on [GitHub]
+
+    [:octicons-arrow-right-24: License](#)
+
+</div>
+```
+
+```html
+<div class="grid cards" markdown>
+
+- :fontawesome-brands-html5: __HTML__ for content and structure
+- :fontawesome-brands-js: __JavaScript__ for interactivity
+- :fontawesome-brands-css3: __CSS__ for text running out of boxes
+- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+</div>
+```
+
+```html
+<div class="grid" markdown>
+
+:fontawesome-brands-html5: __HTML__ for content and structure
+{ .card }
+
+:fontawesome-brands-js: __JavaScript__ for interactivity
+{ .card }
+
+:fontawesome-brands-css3: __CSS__ for text running out of boxes
+{ .card }
+
+> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+</div>
+```