mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 08:56:35 +00:00
252 lines
7.9 KiB
Markdown
252 lines
7.9 KiB
Markdown
---
|
||
hide:
|
||
# - navigation # 显示右
|
||
# - toc #显示左
|
||
- footer
|
||
- feedback
|
||
comments: false
|
||
---
|
||
|
||
|
||
<!--
|
||
____ __ ____ ______ ______ ____ __ ____ __ .__ __.
|
||
\ \ / \ / / / | / __ \ \ \ / \ / / | | | \ | |
|
||
\ \/ \/ / | ,----'| | | | \ \/ \/ / | | | \| |
|
||
\ / | | | | | | \ / | | | . ` |
|
||
\ /\ / | `----.| `--' | \ /\ / | | | |\ |
|
||
\__/ \__/ \______| \______/ \__/ \__/ |__| |__| \__|
|
||
-->
|
||
|
||
|
||
<center><font class="custom-font ml3">最好的MkDocs博客教程</font></center>
|
||
<script src="https://cdn.statically.io/libs/animejs/2.0.2/anime.min.js"></script>
|
||
<style>
|
||
.custom-font {
|
||
font-size: 31px; /* 默认字体大小为8px */
|
||
color: #757575;
|
||
}
|
||
@media (max-width: 768px) { /* 假设768px及以下为移动端 */
|
||
.custom-font {
|
||
font-size: 25px; /* 移动端字体大小为6px */
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
<!-- <div id="rcorners2" >
|
||
<div id="rcorners1" class="date-display">
|
||
<p class="p1"></p>
|
||
</div>
|
||
<style>
|
||
.date-display {
|
||
color: #4351AF;
|
||
}
|
||
</style>
|
||
<script defer>
|
||
function format(newDate) {
|
||
const options = {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
weekday: 'long',
|
||
hour12: false
|
||
};
|
||
return new Intl.DateTimeFormat('zh-CN', options).format(newDate);
|
||
}
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const p1 = document.querySelector(".p1");
|
||
function updateTime() {
|
||
const newDate = new Date();
|
||
if (p1) {
|
||
p1.textContent = format(newDate);
|
||
}
|
||
requestAnimationFrame(updateTime);
|
||
}
|
||
updateTime();
|
||
});
|
||
</script>
|
||
<ul>
|
||
<li>通过主题和目录以打开文章</li>
|
||
<ul>
|
||
<li>基于Material for MkDocs美化</li>
|
||
<li>简洁美观,功能多元化,小白配置</li>
|
||
</ul>
|
||
<li>建议使用科学上网方式打开本站</li>
|
||
<li>
|
||
如遇到网页卡顿的情况,请使用<strong><a href="https://www.yuque.com/wcowin/mkdocs-wcowin?# 《Mkdocs-Wcowin中文教程》" target="_blank">Mkdocs-Wcowin中文教程(语雀)</a></strong>
|
||
</li>
|
||
</ul>
|
||
</div> -->
|
||
|
||
|
||
|
||
<div class="grid cards" markdown>
|
||
|
||
- :material-notebook-edit-outline:{ .lg .middle } __导航栏__
|
||
|
||
---
|
||
{ class="responsive-image" align=right width="230" height="300" style="border-radius: 25px;" }
|
||
|
||
|
||
- [x] {==简洁美观==} ,功能多元化,小白配置
|
||
- [x] 基于{~~~>Material for MkDocs~~}美化
|
||
- [x] 如遇页面卡顿,请使用{--科学上网--}
|
||
- [x] 𝕙𝕒𝕧𝕖 𝕒 𝕘𝕠𝕠𝕕 𝕥𝕚𝕞𝕖 !
|
||
=== "Mac/PC端"
|
||
|
||
请在上方标签选择分类/左侧目录选择文章
|
||
|
||
=== "移动端"
|
||
|
||
请点击左上角图标选择分类和文章
|
||
|
||
|
||
</div>
|
||
<style>
|
||
@media only screen and (max-width: 768px) {
|
||
.responsive-image {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
>不同于市面上过时的MkDocs教程,本站提供了最详细最便捷最前沿的MkDocs中文文字/视频教程,与[官方发布](https://squidfunk.github.io/mkdocs-material/changelog/)的教程版本同步。包含了MkDocs的安装、配置、主题美化、插件使用等内容。无论你是初学者还是有经验的用户,都能在这里找到你需要的帮助。我们还提供了示例和实用的技巧,帮助你更好地使用MkDocs。𝓳𝓾𝓼𝓽 𝓮𝓷𝓳𝓸𝔂 𝓲𝓽~
|
||
|
||
<!-- - 基于Material for MkDocs美化
|
||
- 简洁美观,功能多元化
|
||
- 简单易上手,小白配置
|
||
- 𝕙𝕒𝕧𝕖 𝕒 𝕘𝕠𝕠𝕕 𝕥𝕚𝕞𝕖 ! -->
|
||
|
||
<!-- 视频教程(1) 联系我(2)
|
||
{ .annotate }
|
||
|
||
1. 点击右下角[:simple-bilibili:](https://space.bilibili.com/1407028951/lists/4566631?type=series)图标查看视频教程.
|
||
2. TEL:18939533255(微信号) -->
|
||
|
||
***
|
||
|
||
<!-- <strong>推荐文章:material-book:</strong>
|
||
|
||
- [利用Mkdocs部署静态网页至GitHub pages](blog/Mkdocs/mkdocs1.md)
|
||
- [Mkdocs部署配置说明(mkdocs.yml)](blog/Mkdocs/mkdocs2.md)
|
||
- [如何给MKdocs添加友链](blog/websitebeauty/linktech.md)
|
||
- [网站添加Mkdocs博客](blog/Mkdocs/mkdocsblog.md)
|
||
- [Blogger](blog/index.md) -->
|
||
|
||
|
||
|
||
<div class="grid cards" markdown>
|
||
|
||
- :simple-materialformkdocs:{ .lg .middle } __Mkdocs教程(必看)__
|
||
|
||
---
|
||
|
||
- [Mkdocs视频教程](https://space.bilibili.com/1407028951/lists/4566631?type=series){target=“_blank”}(Bilibili)
|
||
- [部署静态网页至GitHub pages](blog/Mkdocs/mkdocs1.md)
|
||
- [Mkdocs部署配置说明(mkdocs.yml)](blog/Mkdocs/mkdocs2.md)
|
||
- [如何给MKdocs添加友链](blog/websitebeauty/linktech.md)
|
||
- [网站添加Mkdocs博客](blog/Mkdocs/mkdocsblog.md)
|
||
|
||
|
||
|
||
- :simple-aboutdotme:{ .lg .middle } __关于__
|
||
|
||
---
|
||
- [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]
|
||
- [请作者喝杯咖啡](about/zcw.md)
|
||
|
||
</div>
|
||
|
||
|
||
|
||
[^Knowing-that-loving-you-has-no-ending]:太阳总是能温暖向日葵
|
||
[^see-how-much-I-love-you]:All-problems-in-computer-science-can-be-solved-by-another-level-of-indirection
|
||
|
||
<!-- <body>
|
||
<font color="#B9B9B9">
|
||
<p style="text-align: center; ">
|
||
<span>本站已经运行</span>
|
||
<span id='box1'></span>
|
||
</p>
|
||
<div id="box1"></div>
|
||
<script>
|
||
function timingTime(){
|
||
let start = '2023-10-14 00:00:00'
|
||
let startTime = new Date(start).getTime()
|
||
let currentTime = new Date().getTime()
|
||
let difference = currentTime - startTime
|
||
let m = Math.floor(difference / (1000))
|
||
let mm = m % 60 // 秒
|
||
let f = Math.floor(m / 60)
|
||
let ff = f % 60 // 分钟
|
||
let s = Math.floor(f/ 60) // 小时
|
||
let ss = s % 24
|
||
let day = Math.floor(s / 24 ) // 天数
|
||
return day + "天" + ss + "时" + ff + "分" + mm +'秒'
|
||
}
|
||
setInterval(()=>{
|
||
document.getElementById('box1').innerHTML = timingTime()
|
||
},1000)
|
||
</script>
|
||
</font>
|
||
</body> -->
|
||
|
||
|
||
<!-- <script src="//code.tidio.co/6jmawe9m5wy4ahvlhub2riyrnujz7xxi.js" async></script> -->
|
||
|
||
<style>
|
||
body {
|
||
position: relative; /* 确保 body 元素的 position 属性为非静态值 */
|
||
}
|
||
|
||
body::before {
|
||
--size: 35px; /* 调整网格单元大小 */
|
||
--line: color-mix(in hsl, canvasText, transparent 80%); /* 调整线条透明度 */
|
||
content: '';
|
||
height: 100vh;
|
||
width: 100%;
|
||
position: absolute; /* 修改为 absolute 以使其随页面滚动 */
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--line) 1px,
|
||
transparent 1px var(--size)
|
||
)
|
||
50% 50% / var(--size) var(--size),
|
||
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
|
||
var(--size) var(--size);
|
||
-webkit-mask: linear-gradient(-20deg, transparent 50%, white);
|
||
mask: linear-gradient(-20deg, transparent 50%, white);
|
||
top: 0;
|
||
transform-style: flat;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
|
||
@media (max-width: 768px) {
|
||
body::before {
|
||
display: none; /* 在手机端隐藏网格效果 */
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2327435979273742"
|
||
crossorigin="anonymous"></script>
|
||
<ins class="adsbygoogle"
|
||
style="display:block"
|
||
data-ad-client="ca-pub-2327435979273742"
|
||
data-ad-slot="3702206121"
|
||
data-ad-format="auto"
|
||
data-full-width-responsive="true"></ins>
|
||
<script>
|
||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||
</script> --> |