-
-
-
-
```
## 如何加入友链
```html
-
-
-
+
-
-
-{name}
-
-{description}
-
+
+
```
### 示例
```html
-
+
+ {name}
+
+ {description}
+
-
-
-```
-## 效果

-
-
- Wcowin’s blog
-
-
- 这是一个分享技术的小站。
-
-
+
+```
+
+## 效果
+
+
+
+
+
+

Wcowin’s blog
diff --git a/docs/blog/websitebeauty/mkcomments.md b/docs/blog/websitebeauty/mkcomments.md
index a6a4e81..4287394 100644
--- a/docs/blog/websitebeauty/mkcomments.md
+++ b/docs/blog/websitebeauty/mkcomments.md
@@ -23,15 +23,15 @@ tags:
言归正传
## 第一步
-mkdocs.yml中添加
-```
+mkdocs.yml中添加custom_dir
+``` hl_lines="3"
theme:
name: material
custom_dir: docs/overrides #主要是这一行
```
参考下图新建overrides文件,在此文件下参考下图新建覆盖html文件
树状结构如下:
-```
+``` hl_lines="9-13"
$ tree -a
.
├── .github
@@ -51,7 +51,7 @@ $ tree -a

-在comments.html中
+在comments.html中先复制粘贴下面的代码,后文会说怎么修改
```html hl_lines="4-18"
{% if page.meta.comments %}
@@ -133,14 +133,14 @@ $ tree -a
```
-复制将此代码,替换最上面👆🏻comments.html中高亮的代码
+复制此代码,替换最上面👆🏻comments.html中高亮的代码
终端里`mkdocs server`一下
## 最后
在你想插入评论的地方的元数据:`comments: true `
-```
+``` hl_lines="8"
---
title: 留言板
hide:
@@ -212,4 +212,4 @@ twikoo.init({
})
-我感觉twikoo也好看!
\ No newline at end of file
+我感觉twikoo也好看!
diff --git a/docs/blog/websitebeauty/mkdocsfont.md b/docs/blog/websitebeauty/mkdocsfont.md
index c058ac1..cb15be3 100644
--- a/docs/blog/websitebeauty/mkdocsfont.md
+++ b/docs/blog/websitebeauty/mkdocsfont.md
@@ -132,10 +132,10 @@ An open-source Chinese font derived from Fontworks' Klee One. 一款开源中文
## 基于Mkdocs的网站字体美化用法
-1. 在mkdocs.yml中添加以下内容
+在mkdocs.yml中添加以下内容
```yaml
extra_css:
- - https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css
+ - https://static.zeoseven.com/zsft/292/main/result.css
# - https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css
# - https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css
# - https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css
@@ -143,15 +143,19 @@ extra_css:
然后在extra.css中添加以下内容
```css
+@import url('https://static.zeoseven.com/zsft/292/main/result.css');
+
body {
- font-family: "LXGW WenKai", sans-serif;
- /* Lite version */
- /* font-family: "LXGW WenKai Lite", sans-serif; */
- /* TC version */
- /* font-family: "LXGW WenKai TC", sans-serif; */
- /* Screen version */
- /* font-family: "LXGW WenKai Screen", sans-serif; */
- }
+font-family: "LXGW WenKai";
+font-weight: normal;
+}
+
+
+/* button.md-top {
+ font-family: LXGW WenKai;
+ font-size: 16px;
+ font-weight: lighter;
+} */
```
四选一,mkdocs.yml和extra.css相互对应
diff --git a/docs/blog/websitebeauty/shubiao.md b/docs/blog/websitebeauty/shubiao.md
index aba3591..d1570ce 100644
--- a/docs/blog/websitebeauty/shubiao.md
+++ b/docs/blog/websitebeauty/shubiao.md
@@ -6,12 +6,8 @@ tags:
不建议更改,因为默认就是最简洁
-
-
-
-
+
-
在`docs/javascripts/extra.js`下复制粘贴:
```java
var CURSOR;
@@ -100,7 +96,7 @@ class Cursor {
```
其中比较重要的参数就是鼠标的尺寸和颜色,已经在上图中标出,目前发现颜色只支持RGB写法和固有名称写法(例如red这种),其他参数也可以自行摸索:
-```java
+```javascript
* {cursor: url("data:image/svg+xml,") 4 4, auto}`
```
diff --git a/docs/blog/websitebeauty/time.md b/docs/blog/websitebeauty/time.md
index 98992f6..e172802 100644
--- a/docs/blog/websitebeauty/time.md
+++ b/docs/blog/websitebeauty/time.md
@@ -81,4 +81,11 @@ plugins:
## 温馨提示
-对于大型单一的文档库,执行`mkdocs serve`后的渲染速度明显变慢,这是因为每次渲染都会检查所有文件的git历史记录。如果您不需要这个功能,可以通过将`enabled`设置为`false`来禁用它。
\ No newline at end of file
+对于大型单一的文档库,执行`mkdocs serve`后的渲染速度明显变慢,这是因为每次渲染都会检查所有文件的git历史记录。如果您不需要这个功能,可以通过将`enabled`设置为`false`来禁用它。
+
+比较推荐这种方法:
+```yaml hl_lines="2"
+ - git-committers:
+ enabled: !ENV [CI, false]
+```
+修改enabled的策略,这样就不会每次本地渲染都检查所有文件的git历史记录,渲染速度会明显加快,发布网站时候会正常显示。
\ No newline at end of file
diff --git a/docs/blog/websitebeauty/webtalknow.md b/docs/blog/websitebeauty/webtalknow.md
index 78d9780..f4a5838 100644
--- a/docs/blog/websitebeauty/webtalknow.md
+++ b/docs/blog/websitebeauty/webtalknow.md
@@ -26,5 +26,5 @@ comments: false
```javascript
```
-## 放到主页index.md即可
+## 放到你需要的页面即可

\ No newline at end of file
diff --git a/docs/blog/websitebeauty/yuanjiaohua.md b/docs/blog/websitebeauty/yuanjiaohua.md
index eead8a8..bd0ef41 100644
--- a/docs/blog/websitebeauty/yuanjiaohua.md
+++ b/docs/blog/websitebeauty/yuanjiaohua.md
@@ -268,7 +268,94 @@ comments: false
```
+## 图片圆角化
+extra.css里引入:
+
+```css
+img.img1 {
+border-radius: 25px;
+
+}
+```
+
+在md文件里使用:
+
+```markdown
+{.img1}
+```
+效果:
+{.img1}
+
+## 圆角边框
+
+[圆角边框如何实现](https://github.com/Wcowin/hexo-site-comments/discussions/15#discussioncomment-11927654){target="_blank"}
+ {target=“_blank”}
+ [How to set up Material for MkDocs]: https://space.bilibili.com/1407028951/lists/4566631?type=series
+
+---
## 一、准备工作
@@ -34,7 +42,7 @@ tags:

-打开Wcowin.github.io目录进入终端运行:
+打开Wcowin.github.io目录进入终端依次运行:
```
pip install mkdocs-material
mkdocs new mkdocs-site
@@ -42,9 +50,14 @@ mkdocs new mkdocs-site
出现下图的几个文件

-docs文件下是以后网站的内容,mkdocs.yml是配置文件(配置主题,目录,插件等)
+!!! tip
- 你在这个目录下写的任何东西都可以通过github Desktop 上传到github上
+ 这里建议把**mkdocs-site**文件里的东西全部剪切出来到**Wcowin.github.io**文件里
+ 
+
+**Wcowin.github.io**是克隆到本地的仓库(里面包含docs,yml文件等等),docs文件下是以后网站的内容,mkdocs.yml是配置文件(配置主题,目录,插件等)
+
+你在这个目录下写的任何东西都可以通过Github Desktop 上传到github上
执行下面的代码添加一个GitHub Workflow
***
@@ -93,7 +106,8 @@ cd workflows
vim ci.yml
```
-.github/workflows/ci.yml,然后复制并粘贴以下内容:
+进入.github/workflows/ci.yml,然后复制并粘贴以下内容:
+
```yaml
name: ci
on:
@@ -126,10 +140,12 @@ jobs:
- run: mkdocs gh-deploy --force
```
+
+到这里先检查一下你的目录结构
目录树状图:
```
$ tree -a
-.
+Wcowin.github.io
├── .github
│ ├── .DS_Store
│ └── workflows
@@ -141,13 +157,10 @@ $ tree -a
!!!重点来了
-仓库setings/Actions/General 勾选这两项
+Github仓库setings/Actions/General 勾选这两项

## 三、配置完善
-打开终端运行
-
-`pip install mkdocs-material`
打开**mkdocs.yml**
@@ -177,12 +190,14 @@ mkdocs serve
最后去github Desktop上传到github

+上图可以看到,我上传了Wcowin.github.io文件夹,这个文件夹里面包含了mkdocs.yml和docs文件夹(mkdocs-site文件夹现在没有东西,可以删除)
+
**!!!重点**
**去仓库的setings/pages选择下图示意的路径**

-等待一会网址就出来了
+等待一会网址就出来了[^注]
你的网站网址就是:
@@ -192,6 +207,15 @@ https://你github的名字.github.io/
```

-下次谈谈网站的[mkdocs.yml具体配置](docs/blog/Mkdocs/mkdocs2.md)
+下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)
-[^注]:于2023.3.24重写此文
\ No newline at end of file
+## 四、参考资料
+
+1. [MkDocs官网](https://www.mkdocs.org/)
+2. [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
+3. [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/)
+4. [Mkdocs 配置和使用](https://zhuanlan.zhihu.com/p/383582472)
+5. [Deploy MkDocs](https://github.com/marketplace/actions/deploy-mkdocs)
+
+
+[^注]:于2025.2.19重写此文
\ No newline at end of file
+
## 利用内置的grid cards
diff --git a/docs/index.md b/docs/index.md
index fc574d1..13495ac 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -138,7 +138,7 @@ ____ __ ____ ______ ______ ____ __ ____ __ .__ __.
+
+
+
+
+
+
+
+
+
-- :simple-materialformkdocs:{ .lg .middle } __Mkdocs教程__
+- :simple-materialformkdocs:{ .lg .middle } __Mkdocs教程(必看)__
---
@@ -156,7 +156,8 @@ ____ __ ____ ______ ______ ____ __ ____ __ .__ __.
- [Mkdocs-Wcowin博客主题社区](https://support.qq.com/products/646913/){target=“_blank”}
- [留言板](liuyanban.md)[^Knowing-that-loving-you-has-no-ending]
- [Blogger](blog/index.md)
- [:octicons-arrow-right-24: 了解我](about/geren.md)[^see-how-much-I-love-you]
+ - [:octicons-arrow-right-24: 了解我](about/geren.md)[^see-how-much-I-love-you]
+ - [请作者喝杯咖啡](about/zcw.md)
diff --git a/mkdocs.yml b/mkdocs.yml
index 058b216..9504043 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -106,6 +106,7 @@ nav:
- 关于:
- 作者个人简介: about/geren.md
- 个人简历: about/resume.md
+ - 支持作者: about/zcw.md
- 功能测试: about/test.md
- 个人博客: https://wcowin.work
- 使用本主题: https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin
diff --git a/requirements.txt b/requirements.txt
index 904900a..cfd302e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,8 +2,7 @@ mkdocs
mkdocs-material
pymdown-extensions
mkdocs-encryptcontent-plugin
-jinja2
-jieba
+mkdocs-minify-plugin
mkdocs-glightbox
urllib3<2
mkdocs-git-committers-plugin-2
diff --git a/快速开始.md b/快速开始.md
index ee0078f..0c2a2b1 100644
--- a/快速开始.md
+++ b/快速开始.md
@@ -5,9 +5,17 @@ tags:
---
!!! info
- 官方网站:[MkDocs](https://www.mkdocs.org/){target=“_blank”}
+ Material for MkDocs官方网站: [Material for MkDocs](https://www.mkdocs.org/)
+ MkDocs中文文档: [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
+---
+推荐看下这个视频:
+:fontawesome-brands-bilibili:{ style="color: #EE98A7" }
+__[How to set up Material for MkDocs]__ by @Wcowin – :octicons-clock-24:
+10m – 用MKdocs构建一个博客网站.
- 我的个人网站成果: