25/4/19

docs/blog/Mkdocs/mkdocsblog.md

@@ -18,10 +18,11 @@ plugins:
 **然后在/docs/blog/posts下写md文件即可**（无需再mkdocs.yml配置，如没有post文件，新建一个即可）
 但是bolg文件夹下要有index.md文件(没有这个文件新建即可)！
 
-在mkdocs.yml中这样写
+在mkdocs.yml的nav部分这样写
 ```
-  - Blogger:
-    - index: blog/index.md
+nav:
+  - 博客:
+      - index: blog/index.md
 ```
 
 元标签参考：

docs/blog/websitebeauty/404.md

@@ -13,10 +13,14 @@ comments: false  #评论，默认不开启
 
 ![](https://s1.imagehub.cc/images/2024/02/02/b94cdf67258487f737cfa29829629157.png)
 
-docs/overrides文件下新建404.html即可  
-
-树状结构如下  
+首先在mkdocs.yml文件中添加custom_dir:
+``` hl_lines="3"
+theme:
+  name: material
+  custom_dir: docs/overrides #覆写路径
+```
 
+docs/overrides文件下新建404.html  
 树状结构如下:  
 ``` hl_lines="11"
 $ tree -a

docs/blog/websitebeauty/Relativeaddress.md

@@ -0,0 +1,72 @@
+---
+title: 相对地址的一些问题
+tags:
+  - Mkdocs
+---
+
+# 针对MKdocs中相对地址引用的一些问题
+
+在使用 MkDocs 构建文档网站时，常常会遇到相对地址引用的问题，尤其是在图片、PDF、其他静态资源等的引用上。合理使用相对地址可以让你的文档在本地预览和线上部署时都能正常显示。下面总结一些常见场景和注意事项：
+
+## 1. 图片引用
+
+**推荐写法：**
+```
+![图片描述](./img/example.png)
+```
+`./img/example.png` 表示当前 Markdown 文件同级目录下的 `img` 文件夹中的图片。  
+ 如果图片在上级目录：`../assets/example.png`
+
+**注意事项：**
+
+- 路径区分大小写，确保文件名和路径一致。
+- MkDocs 会将 `docs` 目录下的所有文件原样复制到站点根目录，引用路径应以 `docs` 为根目录进行相对定位。
+
+## 2. PDF 文件引用
+
+**内嵌或下载 PDF：**
+```
+[查看PDF](./files/example.pdf)
+```  
+
+或使用 HTML 方式内嵌：  
+
+```html
+<embed src="./files/example.pdf" width="100%" height="600px" type="application/pdf">
+```  
+
+`./files/example.pdf` 表示当前文档同级的 `files` 文件夹下的 PDF 文件。
+`../files/example.pdf` 表示上级目录的 `files` 文件夹下的 PDF 文件。
+`../../files/example.pdf` 表示上上级目录的 `files` 文件夹下的 PDF 文件。
+
+
+## 3. 跨页面引用
+
+**引用同一项目下的其他 Markdown 页面：**
+```
+[跳转到其他页面](../otherpage.md)
+```  
+
+- MkDocs 会自动将 `.md` 转换为 `.html`，所以可以直接用 Markdown 文件名。
+- （）内的路径是相对于当前 Markdown 文件的路径，可以参考[PDF文件引用](#2-pdf)的方法。
+
+## 4. 静态资源引用
+
+**如 CSS、JS 文件：**
+```html
+<link rel="stylesheet" href="../assets/style.css">
+<script src="../assets/script.js"></script>
+```  
+
+- 推荐将静态资源放在 `docs/assets` 目录下，引用时用相对路径。
+
+## 5. 常见问题
+
+- **路径错误导致资源无法加载**：请检查路径是否正确、文件是否存在、大小写是否一致。
+- **本地预览正常，线上不显示**：有可能是路径写死或大小写问题，建议始终用相对路径。
+- **图片/文件过大加载慢**：可适当压缩图片或 PDF 文件。
+
+---
+
+## **总结**  
+在 MkDocs 项目中，所有资源的相对路径都应以当前 Markdown 文件为基准，确保本地和线上都能正确访问。建议统一资源管理目录结构，便于维护和引用。

docs/blog/websitebeauty/mkpdf.md

@@ -0,0 +1,34 @@
+---
+title: 嵌入PDF
+tags:
+  - Mkdocs
+---
+
+[嵌入PDF](https://github.com/Wcowin/hexo-site-comments/discussions/8#discussioncomment-12101922)
+
+嵌入PDF代码  ，**注意PDF的相对地址**
+```html
+<iframe src="../个人简历.pdf (相对地址)" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;"></iframe>
+```
+
+<img width="1178" alt="image" src="https://github.com/user-attachments/assets/5b511fe9-9a3b-4bff-b54c-37d92f00306b" />  
+
+我的完整代码：  
+
+```html
+
+<div class="grid cards" markdown>
+
+-   :octicons-bookmark-16:{ .lg .middle } __个人简历__
+
+    ---
+
+    <iframe src="../个人简历.pdf" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;">
+    </iframe>
+    
+
+</div>
+```
+
+
+希望对你有帮助

mkdocs.yml

@@ -74,7 +74,7 @@ nav:
           - 1.利用Mkdocs部署静态网页: blog/Mkdocs/mkdocs1.md
           - 2.Mkdocs配置说明(mkdocs.yml): blog/Mkdocs/mkdocs2.md
           - 3.解决Github Pages部署mkdocs自定义域名失效的问题: blog/Mkdocs/mkdocs3.md
-      - Mkdocs美化:
+      - Mkdocs美化/补充:
           - 添加Mkdocs博客: blog/Mkdocs/mkdocsblog.md
           - 网页圆角化设计: blog/websitebeauty/yuanjiaohua.md
           - 添加评论系统(giscus为例): blog/websitebeauty/mkcomments.md
@@ -84,6 +84,8 @@ nav:
           - 修改网站字体: blog/websitebeauty/mkdocsfont.md
           - JS实现鼠标样式: blog/websitebeauty/shubiao.md
           - 背景特效: blog/websitebeauty/backgroud.md
+          - 嵌入PDF文件: blog/websitebeauty/mkpdf.md
+          - 相对地址的一些问题: blog/websitebeauty/Relativeaddress.md
           - 添加404页面: blog/websitebeauty/404.md
           - 为MKdocs添加文章修订时间戳: blog/websitebeauty/time.md
   - 建设MKdocs技能指北: