4521 lines
127 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Content and ambitious, gentle yet firm.">
<meta name="author" content="王科文(Wcowin)">
<link rel="canonical" href="http://wcowin.work/Mkdocs-Wcowin/develop/Markdown/markdown/">
<link rel="prev" href="../../../blog/websitebeauty/accelerate/">
<link rel="next" href="../MWeb/">
<link rel="icon" href="https://s2.loli.net/2025/02/12/aE5ovtzAlNTd9Uh.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.15">
<title>Markdown语法学习 精简版 - Mkdocs中文教程</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.342714a4.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<link rel="stylesheet" href="../../../stylesheets/extra2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css">
<link rel="stylesheet" href="../../../stylesheets/customize.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/ziti.css">
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-29HZMNR0KG"),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","G-29HZMNR0KG",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=G-29HZMNR0KG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#markdown" class="md-skip">
跳转至
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="页眉">
<a href="../../.." title="Mkdocs中文教程" class="md-header__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Mkdocs中文教程
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Markdown语法学习 精简版
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="关闭自动模式" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="关闭自动模式" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="indigo" aria-label="切换至夜间模式" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="切换至夜间模式" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo" aria-label="切换至日间模式" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="切换至日间模式" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="选择当前语言">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M0 128c0-35.3 28.7-64 64-64h512c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64zm320 0v256h256V128zm-141.7 47.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1.1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4zM160 233.2l19 42.8h-38zM448 164c11 0 20 9 20 20v4h60c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4.9.6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9L467 333.8c-4.5-2.7-8.8-5.5-13.1-8.5-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8L410 286.1c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6.5.5c12.4-13.1 22.5-28.3 29.8-45l-35.2.1h-72c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="/" hreflang="zh" class="md-select__link">
简体中文
</a>
</li>
<li class="md-select__item">
<a href="/Mkdocs-Wcowin/en/" hreflang="en" class="md-select__link">
English
</a>
</li>
<li class="md-select__item">
<a href="/Mkdocs-Wcowin/ZH-TW/" hreflang="zh-TW" class="md-select__link">
China(TW)
</a>
</li>
</ul>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</label>
<nav class="md-search__options" aria-label="查找">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
正在初始化搜索引擎
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Mkdocs-Wcowin
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../../blog/MIT/" class="md-tabs__link">
MKdocs中文教程
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="./" class="md-tabs__link">
建设MKdocs技能指北
</a>
</li>
<li class="md-tabs__item">
<a href="../../../tag/" class="md-tabs__link">
标签
</a>
</li>
<li class="md-tabs__item">
<a href="../../../liuyanban/" class="md-tabs__link">
留言板
</a>
</li>
<li class="md-tabs__item">
<a href="../../../blog/" class="md-tabs__link">
博客
</a>
</li>
<li class="md-tabs__item">
<a href="../../../link/" class="md-tabs__link">
友链
</a>
</li>
<li class="md-tabs__item">
<a href="../../../about/geren/" class="md-tabs__link">
关于
</a>
</li>
<li class="md-tabs__item">
<a href="https://wcowin.work" class="md-tabs__link">
个人博客
</a>
</li>
<li class="md-tabs__item">
<a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-tabs__link">
使用本主题
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Mkdocs中文教程" class="md-nav__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>
</a>
Mkdocs中文教程
</label>
<div class="md-nav__source">
<a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Mkdocs-Wcowin
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1" >
<label class="md-nav__link" for="__nav_1" id="__nav_1_label" tabindex="0">
<span class="md-ellipsis">
MKdocs中文教程
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
MKdocs中文教程
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../blog/MIT/" class="md-nav__link">
<span class="md-ellipsis">
许可声明
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_2" >
<label class="md-nav__link" for="__nav_1_2" id="__nav_1_2_label" tabindex="0">
<span class="md-ellipsis">
MKdocs教程(三部曲)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1_2">
<span class="md-nav__icon md-icon"></span>
MKdocs教程(三部曲)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/mkfirst/" class="md-nav__link">
<span class="md-ellipsis">
0.Mkdocs教程前言
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/mkdocs1/" class="md-nav__link">
<span class="md-ellipsis">
1.利用Mkdocs部署静态网页
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/mkdocs2/" class="md-nav__link">
<span class="md-ellipsis">
2.Mkdocs配置说明(mkdocs.yml)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/mkdocs3/" class="md-nav__link">
<span class="md-ellipsis">
3.解决Github Pages部署mkdocs自定义域名失效的问题
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_3" >
<label class="md-nav__link" for="__nav_1_3" id="__nav_1_3_label" tabindex="0">
<span class="md-ellipsis">
Mkdocs美化/补充
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1_3">
<span class="md-nav__icon md-icon"></span>
Mkdocs美化/补充
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/Mkdocs-AI-Summary/" class="md-nav__link">
<span class="md-ellipsis">
MkDocs文档AI摘要
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/recommend/" class="md-nav__link">
<span class="md-ellipsis">
添加相关推荐文章
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/reading_time/" class="md-nav__link">
<span class="md-ellipsis">
添加阅读信息统计
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/mkdocsblog/" class="md-nav__link">
<span class="md-ellipsis">
添加Mkdocs博客
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/Mkdocs/linktech/" class="md-nav__link">
<span class="md-ellipsis">
如何给MKdocs添加友链
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/yuanjiaohua/" class="md-nav__link">
<span class="md-ellipsis">
网页圆角化设计
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/mkcomments/" class="md-nav__link">
<span class="md-ellipsis">
添加评论系统(giscus为例)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/webtalknow/" class="md-nav__link">
<span class="md-ellipsis">
添加在线聊天
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/linktech/" class="md-nav__link">
<span class="md-ellipsis">
添加友链
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/header/" class="md-nav__link">
<span class="md-ellipsis">
添加顶部公告栏
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/mkdocsfont/" class="md-nav__link">
<span class="md-ellipsis">
修改网站字体
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/shubiao/" class="md-nav__link">
<span class="md-ellipsis">
JS实现鼠标样式
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/backgroud/" class="md-nav__link">
<span class="md-ellipsis">
背景特效
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/mkpdf/" class="md-nav__link">
<span class="md-ellipsis">
嵌入PDF文件
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/Relativeaddress/" class="md-nav__link">
<span class="md-ellipsis">
相对地址的一些问题
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/404/" class="md-nav__link">
<span class="md-ellipsis">
添加404页面
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/time/" class="md-nav__link">
<span class="md-ellipsis">
为MKdocs添加文章修订时间戳
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/footer/" class="md-nav__link">
<span class="md-ellipsis">
页脚设置
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/websitebeauty/accelerate/" class="md-nav__link">
<span class="md-ellipsis">
加速网站访问的一些心得
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-ellipsis">
建设MKdocs技能指北
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
建设MKdocs技能指北
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" checked>
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="">
<span class="md-ellipsis">
Markdown
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
Markdown
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Markdown指南
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Markdown指南
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="目录">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
目录
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#_1" class="md-nav__link">
<span class="md-ellipsis">
最常用
</span>
</a>
<nav class="md-nav" aria-label="最常用">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_2" class="md-nav__link">
<span class="md-ellipsis">
分级标题
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_3" class="md-nav__link">
<span class="md-ellipsis">
目录
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_4" class="md-nav__link">
<span class="md-ellipsis">
斜体/粗体/删除线/下划线/背景高亮
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
无序列表/有序列表
</span>
</a>
<nav class="md-nav" aria-label="无序列表/有序列表">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis">
无序列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_7" class="md-nav__link">
<span class="md-ellipsis">
多级无序列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_8" class="md-nav__link">
<span class="md-ellipsis">
有序列表/多级有序列表
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_9" class="md-nav__link">
<span class="md-ellipsis">
任务列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_10" class="md-nav__link">
<span class="md-ellipsis">
表格
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_11" class="md-nav__link">
<span class="md-ellipsis">
超链接
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_12" class="md-nav__link">
<span class="md-ellipsis">
插入图片
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_13" class="md-nav__link">
<span class="md-ellipsis">
插入视频
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_14" class="md-nav__link">
<span class="md-ellipsis">
代码块
</span>
</a>
<nav class="md-nav" aria-label="代码块">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_15" class="md-nav__link">
<span class="md-ellipsis">
行内代码块
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_16" class="md-nav__link">
<span class="md-ellipsis">
多行代码块
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_17" class="md-nav__link">
<span class="md-ellipsis">
对齐方式
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_18" class="md-nav__link">
<span class="md-ellipsis">
分割线
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_19" class="md-nav__link">
<span class="md-ellipsis">
换行
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_20" class="md-nav__link">
<span class="md-ellipsis">
高级
</span>
</a>
<nav class="md-nav" aria-label="高级">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_21" class="md-nav__link">
<span class="md-ellipsis">
设置字体/颜色
</span>
</a>
<nav class="md-nav" aria-label="设置字体/颜色">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_22" class="md-nav__link">
<span class="md-ellipsis">
常用颜色
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_23" class="md-nav__link">
<span class="md-ellipsis">
锚点
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_24" class="md-nav__link">
<span class="md-ellipsis">
注脚
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_25" class="md-nav__link">
<span class="md-ellipsis">
多级引用
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#latex" class="md-nav__link">
<span class="md-ellipsis">
LaTeX公式
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_26" class="md-nav__link">
<span class="md-ellipsis">
其他
</span>
</a>
<nav class="md-nav" aria-label="其他">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_27" class="md-nav__link">
<span class="md-ellipsis">
转义字符
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html" class="md-nav__link">
<span class="md-ellipsis">
内联 HTML 语法/特殊字符自动转义
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_28" class="md-nav__link">
<span class="md-ellipsis">
注释
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_29" class="md-nav__link">
<span class="md-ellipsis">
空格
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../MWeb/" class="md-nav__link">
<span class="md-ellipsis">
MWeb Pro
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../git/" class="md-nav__link">
<span class="md-ellipsis">
Git 实用技巧
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../lighthouse/" class="md-nav__link">
<span class="md-ellipsis">
利用Lighthouse测试网站性能
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../vercel/" class="md-nav__link">
<span class="md-ellipsis">
如何将 github pages 迁移到 vercel 上托管
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
<label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="">
<span class="md-ellipsis">
设计美学
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
设计美学
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../designbeauty/db1/" class="md-nav__link">
<span class="md-ellipsis">
唐·诺曼—情感设计的三个层次
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../designbeauty/my-to-desihn/" class="md-nav__link">
<span class="md-ellipsis">
我对设计的一些观点
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../tag/" class="md-nav__link">
<span class="md-ellipsis">
标签
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../liuyanban/" class="md-nav__link">
<span class="md-ellipsis">
留言板
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
<div class="md-nav__link md-nav__container">
<a href="../../../blog/" class="md-nav__link ">
<span class="md-ellipsis">
博客
</span>
</a>
<label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
博客
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_2" >
<label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
<span class="md-ellipsis">
归档
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_2">
<span class="md-nav__icon md-icon"></span>
归档
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../blog/archive/2025/" class="md-nav__link">
<span class="md-ellipsis">
2025
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/archive/2024/" class="md-nav__link">
<span class="md-ellipsis">
2024
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/archive/2023/" class="md-nav__link">
<span class="md-ellipsis">
2023
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/archive/2022/" class="md-nav__link">
<span class="md-ellipsis">
2022
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/archive/2021/" class="md-nav__link">
<span class="md-ellipsis">
2021
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_3" >
<label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0">
<span class="md-ellipsis">
分类
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_3">
<span class="md-nav__icon md-icon"></span>
分类
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../blog/category/hello-world/" class="md-nav__link">
<span class="md-ellipsis">
Hello World
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../blog/category/%E7%BD%91%E7%AB%99%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95/" class="md-nav__link">
<span class="md-ellipsis">
网站更新记录
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
友链
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
友链
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../link/" class="md-nav__link">
<span class="md-ellipsis">
友链
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
关于
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
关于
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../about/geren/" class="md-nav__link">
<span class="md-ellipsis">
作者个人简介
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/resume/" class="md-nav__link">
<span class="md-ellipsis">
个人简历
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/zcw/" class="md-nav__link">
<span class="md-ellipsis">
支持作者
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/test/" class="md-nav__link">
<span class="md-ellipsis">
功能测试
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="https://wcowin.work" class="md-nav__link">
<span class="md-ellipsis">
个人博客
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-nav__link">
<span class="md-ellipsis">
使用本主题
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="目录">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
目录
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#_1" class="md-nav__link">
<span class="md-ellipsis">
最常用
</span>
</a>
<nav class="md-nav" aria-label="最常用">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_2" class="md-nav__link">
<span class="md-ellipsis">
分级标题
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_3" class="md-nav__link">
<span class="md-ellipsis">
目录
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_4" class="md-nav__link">
<span class="md-ellipsis">
斜体/粗体/删除线/下划线/背景高亮
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
无序列表/有序列表
</span>
</a>
<nav class="md-nav" aria-label="无序列表/有序列表">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis">
无序列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_7" class="md-nav__link">
<span class="md-ellipsis">
多级无序列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_8" class="md-nav__link">
<span class="md-ellipsis">
有序列表/多级有序列表
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_9" class="md-nav__link">
<span class="md-ellipsis">
任务列表
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_10" class="md-nav__link">
<span class="md-ellipsis">
表格
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_11" class="md-nav__link">
<span class="md-ellipsis">
超链接
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_12" class="md-nav__link">
<span class="md-ellipsis">
插入图片
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_13" class="md-nav__link">
<span class="md-ellipsis">
插入视频
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_14" class="md-nav__link">
<span class="md-ellipsis">
代码块
</span>
</a>
<nav class="md-nav" aria-label="代码块">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_15" class="md-nav__link">
<span class="md-ellipsis">
行内代码块
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_16" class="md-nav__link">
<span class="md-ellipsis">
多行代码块
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_17" class="md-nav__link">
<span class="md-ellipsis">
对齐方式
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_18" class="md-nav__link">
<span class="md-ellipsis">
分割线
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_19" class="md-nav__link">
<span class="md-ellipsis">
换行
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_20" class="md-nav__link">
<span class="md-ellipsis">
高级
</span>
</a>
<nav class="md-nav" aria-label="高级">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_21" class="md-nav__link">
<span class="md-ellipsis">
设置字体/颜色
</span>
</a>
<nav class="md-nav" aria-label="设置字体/颜色">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_22" class="md-nav__link">
<span class="md-ellipsis">
常用颜色
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_23" class="md-nav__link">
<span class="md-ellipsis">
锚点
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_24" class="md-nav__link">
<span class="md-ellipsis">
注脚
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_25" class="md-nav__link">
<span class="md-ellipsis">
多级引用
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#latex" class="md-nav__link">
<span class="md-ellipsis">
LaTeX公式
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_26" class="md-nav__link">
<span class="md-ellipsis">
其他
</span>
</a>
<nav class="md-nav" aria-label="其他">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_27" class="md-nav__link">
<span class="md-ellipsis">
转义字符
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html" class="md-nav__link">
<span class="md-ellipsis">
内联 HTML 语法/特殊字符自动转义
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_28" class="md-nav__link">
<span class="md-ellipsis">
注释
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_29" class="md-nav__link">
<span class="md-ellipsis">
空格
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<nav class="md-tags" >
<a href="../../../tag/#tag:markdown" class="md-tag">Markdown</a>
</nav>
<a href="https://github.com/Wcowin/Mkdocs-Wcowin/edit/main/docs/develop/Markdown/markdown.md" title="编辑此页" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="https://github.com/Wcowin/Mkdocs-Wcowin/raw/main/docs/develop/Markdown/markdown.md" title="查看本页的源代码" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<div class="admonition info">
<p class="admonition-title">💾 AI智能摘要 (智谱清言)</p>
<p>Markdown是一种轻量级标记语言便于纯文本格式编写文档支持多种格式导出。本文介绍了Markdown的基本语法包括标题、列表、表格、链接、图片、代码块等并提供了一些文档创作工具推荐。</p>
</div>
<div class="admonition info">
<p class="admonition-title">📖 阅读信息</p>
<p>阅读时间:<strong>2</strong> 分钟 | 中文字符:<strong>662</strong> | 有效代码行数:<strong>67</strong></p>
</div>
<h1 id="markdown"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.27 19.385H1.73A1.73 1.73 0 0 1 0 17.655V6.345a1.73 1.73 0 0 1 1.73-1.73h20.54A1.73 1.73 0 0 1 24 6.345v11.308a1.73 1.73 0 0 1-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg></span> <a href="https://www.markdown.xyz/">Markdown语法学习</a> 精简版<a class="headerlink" href="#markdown" title="Permanent link">&para;</a></h1>
<blockquote>
<p><span id="top"><strong>文章开头</strong></span> </p>
</blockquote>
<p>介绍一下Markdown<br />
Markdown 是一种轻量级标记语言它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯英语John Gruber创建。<br />
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdown。 </p>
<p>此笔记学习摘抄自<a href="https://github.com/Yang-Xijie/yang-xijie.github.io/blob/main/docs/BLOG/Markdown/grammars.md?plain=1">Markdown语法学习 精简版</a>学习借鉴大佬之经验Ctrl C+V</p>
<p><strong>也推荐看:<a href="https://www.markdown.xyz/">Markdown中文指南</a></strong></p>
<p>一些Markdown文档创作工具</p>
<ul>
<li><strong>Mac:</strong> <a href="https://macdown.uranusjr.com/">MacDown</a>, <a href="https://ia.net/writer">iA Writer</a><a href="https://marked2.com/">Marked 2</a></li>
<li><strong>iOS / Android:</strong> <a href="https://ia.net/writer">iA Writer</a></li>
<li><strong>Windows:</strong> <a href="https://wereturtle.github.io/ghostwriter/">ghostwriter</a><a href="https://markdownmonster.west-wind.com/">Markdown Monster</a></li>
<li><strong>Linux:</strong> <a href="https://github.com/retext-project/retext">ReText</a><a href="https://wereturtle.github.io/ghostwriter/">ghostwriter</a></li>
<li><strong>Web:</strong> <a href="https://dillinger.io/">Dillinger</a><a href="https://stackedit.io/">StackEdit</a></li>
</ul>
<h2 id="_1">最常用<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h2>
<h3 id="_2">分级标题<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span>
<span class="normal"><a href="#__codelineno-0-3">3</a></span>
<span class="normal"><a href="#__codelineno-0-4">4</a></span>
<span class="normal"><a href="#__codelineno-0-5">5</a></span>
<span class="normal"><a href="#__codelineno-0-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a># 一级标题 (注意有空格)
<a id="__codelineno-0-2" name="__codelineno-0-2"></a>## 二级标题
<a id="__codelineno-0-3" name="__codelineno-0-3"></a>### 三级标题
<a id="__codelineno-0-4" name="__codelineno-0-4"></a>#### 四级标题
<a id="__codelineno-0-5" name="__codelineno-0-5"></a>##### 五级标题
<a id="__codelineno-0-6" name="__codelineno-0-6"></a>###### 六级标题 &lt;!--最多6级标题--&gt;
</code></pre></div></td></tr></table></div>
<h3 id="_3">目录<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h3>
<p>在任意位置插入 <code>[toc]</code> 显示全文<span id="catalog"><strong>目录</strong></span>结构</p>
<p>示例见文章开头(点击<a href="#top">这里</a>跳转到开头查看目录)</p>
<h3 id="_4">斜体/粗体/删除线/下划线/背景高亮<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span>
<span class="normal"><a href="#__codelineno-1-5">5</a></span>
<span class="normal"><a href="#__codelineno-1-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a>*斜体* _斜体_
<a id="__codelineno-1-2" name="__codelineno-1-2"></a>**粗体** __粗体__
<a id="__codelineno-1-3" name="__codelineno-1-3"></a>***加粗斜体*** ___加粗斜体___
<a id="__codelineno-1-4" name="__codelineno-1-4"></a>~~删除线~~
<a id="__codelineno-1-5" name="__codelineno-1-5"></a>&lt;u&gt;下划线&lt;/u&gt;
<a id="__codelineno-1-6" name="__codelineno-1-6"></a>==背景高亮==
</code></pre></div></td></tr></table></div>
<p><em>斜体</em> <em>斜体</em></p>
<p><strong>粗体</strong> <strong>粗体</strong></p>
<p><strong><em>加粗斜体</em></strong> <strong><em>加粗斜体</em></strong></p>
<p><del>删除线</del></p>
<p><u>下划线</u></p>
<p><mark>背景高亮</mark></p>
<h3 id="_5">无序列表/有序列表<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h3>
<h4 id="_6">无序列表<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h4>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a>* 无序列表项 一
<a id="__codelineno-2-2" name="__codelineno-2-2"></a>+ 无序列表项 二
<a id="__codelineno-2-3" name="__codelineno-2-3"></a>- 无序列表项 三
</code></pre></div></td></tr></table></div>
<ul>
<li>无序列表项 一</li>
<li>无序列表项 二</li>
<li>无序列表项 三</li>
</ul>
<h4 id="_7">多级无序列表<a class="headerlink" href="#_7" title="Permanent link">&para;</a></h4>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span>
<span class="normal"><a href="#__codelineno-3-2">2</a></span>
<span class="normal"><a href="#__codelineno-3-3">3</a></span>
<span class="normal"><a href="#__codelineno-3-4">4</a></span>
<span class="normal"><a href="#__codelineno-3-5">5</a></span>
<span class="normal"><a href="#__codelineno-3-6">6</a></span>
<span class="normal"><a href="#__codelineno-3-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a>* 今天`* + 空格键`
<a id="__codelineno-3-2" name="__codelineno-3-2"></a>* 明天
<a id="__codelineno-3-3" name="__codelineno-3-3"></a> * 学习 `TAB(或4个空格) + * + 空格键`
<a id="__codelineno-3-4" name="__codelineno-3-4"></a> * 购物
<a id="__codelineno-3-5" name="__codelineno-3-5"></a> * 面包
<a id="__codelineno-3-6" name="__codelineno-3-6"></a> * 牛奶
<a id="__codelineno-3-7" name="__codelineno-3-7"></a>* 后天
</code></pre></div></td></tr></table></div>
<ul>
<li>今天<code>* + 空格键</code></li>
<li>明天<ul>
<li>学习 <code>TAB(或4个空格) + * + 空格键</code></li>
<li>购物<ul>
<li>面包</li>
<li>牛奶</li>
</ul>
</li>
</ul>
</li>
<li>后天</li>
</ul>
<h4 id="_8">有序列表/多级有序列表<a class="headerlink" href="#_8" title="Permanent link">&para;</a></h4>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1">1</a></span>
<span class="normal"><a href="#__codelineno-4-2">2</a></span>
<span class="normal"><a href="#__codelineno-4-3">3</a></span>
<span class="normal"><a href="#__codelineno-4-4">4</a></span>
<span class="normal"><a href="#__codelineno-4-5">5</a></span>
<span class="normal"><a href="#__codelineno-4-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a>1. 有序列表项 一 `数字 + . + 空格键`
<a id="__codelineno-4-2" name="__codelineno-4-2"></a>2. 有序列表项 二
<a id="__codelineno-4-3" name="__codelineno-4-3"></a> 1. 有序列表项 二(1) `TAB(或4个空格) + 数字 + . + 空格键`
<a id="__codelineno-4-4" name="__codelineno-4-4"></a> 2. 有序列表项 二(2)
<a id="__codelineno-4-5" name="__codelineno-4-5"></a> 1. 有序列表项 二(2).1
<a id="__codelineno-4-6" name="__codelineno-4-6"></a>3. 有序列表项 三
</code></pre></div></td></tr></table></div>
<ol>
<li>有序列表项 一 <code>数字 + . + 空格键</code></li>
<li>有序列表项 二<ol>
<li>有序列表项 二(1) <code>TAB(或4个空格) + 数字 + . + 空格键</code></li>
<li>有序列表项 二(2)<ol>
<li>有序列表项 二(2).1</li>
</ol>
</li>
</ol>
</li>
<li>有序列表项 三</li>
</ol>
<h3 id="_9">任务列表<a class="headerlink" href="#_9" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span>
<span class="normal"><a href="#__codelineno-5-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a>- [ ] 任务一 未做任务 `- + 空格 + [ ]`
<a id="__codelineno-5-2" name="__codelineno-5-2"></a>- [x] 任务二 已做任务 `- + 空格 + [x]`
</code></pre></div></td></tr></table></div>
<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> 任务一 未做任务 <code>- + 空格 + [ ]</code></li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 任务二 已做任务 <code>- + 空格 + [x]</code></li>
</ul>
<h3 id="_10">表格<a class="headerlink" href="#_10" title="Permanent link">&para;</a></h3>
<p>第一行为表头,第二行分隔表头和主体部分(如果表格无法显示可以尝试把第二行的 <code>-</code> 变为 <code>---</code> ),可以指定所在列的对齐方式,第三行开始每一行为一个表格行。列与列之间用 <code>|</code> 隔开。(注:原生方式的表格每一行的两边也要有 <code>|</code> )</p>
<p><strong>对齐方式</strong> <code>:- 左对齐</code> <code>- 中心对齐</code> <code>-: 右对齐</code></p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span>
<span class="normal"><a href="#__codelineno-6-3">3</a></span>
<span class="normal"><a href="#__codelineno-6-4">4</a></span>
<span class="normal"><a href="#__codelineno-6-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a>第一列|第二列|第三列
<a id="__codelineno-6-2" name="__codelineno-6-2"></a>:-|-|-:
<a id="__codelineno-6-3" name="__codelineno-6-3"></a>a11|a12|a13
<a id="__codelineno-6-4" name="__codelineno-6-4"></a>a21|a22|a33
<a id="__codelineno-6-5" name="__codelineno-6-5"></a>a31|a32|a33
</code></pre></div></td></tr></table></div>
<table>
<thead>
<tr>
<th style="text-align: left;">表头一</th>
<th>表头二</th>
<th style="text-align: right;">表头三</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">a11</td>
<td>a12</td>
<td style="text-align: right;">a13</td>
</tr>
<tr>
<td style="text-align: left;">a21</td>
<td>a22</td>
<td style="text-align: right;">a33</td>
</tr>
<tr>
<td style="text-align: left;">a31</td>
<td>a32</td>
<td style="text-align: right;">a33</td>
</tr>
</tbody>
</table>
<h3 id="_11">超链接<a class="headerlink" href="#_11" title="Permanent link">&para;</a></h3>
<p>[ ]里写链接文字,( )里写链接地址, ( )中的" "中可以为链接指定title属性title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的 title文字链接地址与title前有一个空格。</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a>右边是链接[链接文字](链接 &quot;title&quot;)
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a>右边是链接[GitHub](https://github.com &quot;GitHub&quot;)
</code></pre></div></td></tr></table></div>
<p>右边是链接<a href="https://github.com" title="GitHub">GitHub</a></p>
<h3 id="_12">插入图片<a class="headerlink" href="#_12" title="Permanent link">&para;</a></h3>
<p><strong>格式</strong><code>!</code> <code>[图片标题]</code> <code>(图片地址 "图片Title”)</code></p>
<p>其中<code>图片标题</code>会被某些网站和编辑器显示在图片下方</p>
<h3 id="_13">插入视频<a class="headerlink" href="#_13" title="Permanent link">&para;</a></h3>
<p><strong>格式</strong>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a>&lt;iframe height= width= src=&quot;链接&quot;&gt;
</code></pre></div></td></tr></table></div></p>
<h3 id="_14">代码块<a class="headerlink" href="#_14" title="Permanent link">&para;</a></h3>
<h4 id="_15">行内代码块<a class="headerlink" href="#_15" title="Permanent link">&para;</a></h4>
<p>用“ ` ”左右包裹代码<br />
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a>`printf()` 函数
</code></pre></div></td></tr></table></div>
显示为<code>printf()</code> 函数</p>
<h4 id="_16">多行代码块<a class="headerlink" href="#_16" title="Permanent link">&para;</a></h4>
<p>用“ ``` ”上下包裹代码,在第一个“ ``` ”后添加语言名称获得不同的高亮效果</p>
<p>cpppythonswift</p>
<h3 id="_17">对齐方式<a class="headerlink" href="#_17" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1">1</a></span>
<span class="normal"><a href="#__codelineno-11-2">2</a></span>
<span class="normal"><a href="#__codelineno-11-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a>&lt;center&gt;行中心对齐&lt;/center&gt;
<a id="__codelineno-11-2" name="__codelineno-11-2"></a>&lt;p align=&quot;left&quot;&gt;行左对齐&lt;/p&gt;
<a id="__codelineno-11-3" name="__codelineno-11-3"></a>&lt;p align=&quot;right&quot;&gt;行右对齐&lt;/p&gt;
</code></pre></div></td></tr></table></div>
<center>行中心对齐</center>
<p align="left">行左对齐</p>
<p align="right">行右对齐</p>
<h3 id="_18">分割线<a class="headerlink" href="#_18" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1">1</a></span>
<span class="normal"><a href="#__codelineno-12-2">2</a></span>
<span class="normal"><a href="#__codelineno-12-3">3</a></span>
<span class="normal"><a href="#__codelineno-12-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a>* * *
<a id="__codelineno-12-2" name="__codelineno-12-2"></a>***
<a id="__codelineno-12-3" name="__codelineno-12-3"></a>- - -
<a id="__codelineno-12-4" name="__codelineno-12-4"></a>---
</code></pre></div></td></tr></table></div>
<hr />
<hr />
<hr />
<hr />
<h3 id="_19">换行<a class="headerlink" href="#_19" title="Permanent link">&para;</a></h3>
<p>不同markdown编辑器可能有不同的换行方式最简单为直接敲回车</p>
<p>markdown文本内的连续两个或多个回车会被替换为一个回车</p>
<h2 id="_20">高级<a class="headerlink" href="#_20" title="Permanent link">&para;</a></h2>
<h3 id="_21">设置字体/颜色<a class="headerlink" href="#_21" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a>&lt;font face=&quot;宋体&quot; color=blue size=5&gt;蓝色的字~&lt;/font&gt;
</code></pre></div></td></tr></table></div>
<p><font face="宋体" color=blue size=5>蓝色的字~</font></p>
<h4 id="_22">常用颜色<a class="headerlink" href="#_22" title="Permanent link">&para;</a></h4>
<p>浏览器支持的所有颜色请跳转参考</p>
<p><a href="https://htmlcolorcodes.com/zh/yanse-ming" title="htmlcolorcodes.com">现代浏览器支持的140种已命名的颜色</a></p>
<p>常用颜色名称:
* 按网站顺序排列
* orange pink gold yellow purple greenyellow lightgreen green aqua lightblue blue wheat brown white snow linen silver gray black</p>
<table>
<thead>
<tr>
<th>最常用</th>
<th>其他</th>
</tr>
</thead>
<tbody>
<tr>
<td><font color=red>red</font></td>
<td><font color=greenyellow>greenyellow</font></td>
</tr>
<tr>
<td><font color=orange>orange</font></td>
<td><font color=lightgreen>lightgreen</font></td>
</tr>
<tr>
<td><font color=yellow>yellow</font></td>
<td><font color=lightblue>lightblue</font></td>
</tr>
<tr>
<td><font color=green>green</font></td>
<td><font color=pink>pink</font></td>
</tr>
<tr>
<td><font color=aqua>aqua</font></td>
<td><font color=gold>gold</font></td>
</tr>
<tr>
<td><font color=blue>blue</font></td>
<td><font color=silver>silver</font></td>
</tr>
<tr>
<td><font color=purple>purple</font></td>
<td><font color=brown>brown</font></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="_23">锚点<a class="headerlink" href="#_23" title="Permanent link">&para;</a></h3>
<p>也就是 <code>跳转</code></p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1">1</a></span>
<span class="normal"><a href="#__codelineno-14-2">2</a></span>
<span class="normal"><a href="#__codelineno-14-3">3</a></span>
<span class="normal"><a href="#__codelineno-14-4">4</a></span>
<span class="normal"><a href="#__codelineno-14-5">5</a></span>
<span class="normal"><a href="#__codelineno-14-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a>1. [点击这里跳转到第一段](#jump1)
<a id="__codelineno-14-2" name="__codelineno-14-2"></a>2. [点击这里跳转到第二段](#jump2
<a id="__codelineno-14-3" name="__codelineno-14-3"></a>
<a id="__codelineno-14-4" name="__codelineno-14-4"></a>### &lt;span id=&quot;jump1&quot;&gt;第一段&lt;/span&gt;
<a id="__codelineno-14-5" name="__codelineno-14-5"></a>
<a id="__codelineno-14-6" name="__codelineno-14-6"></a>### &lt;span id=&quot;jump2&quot;&gt;第二段&lt;/span&gt;
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1">1</a></span>
<span class="normal"><a href="#__codelineno-15-2">2</a></span>
<span class="normal"><a href="#__codelineno-15-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a>&lt;span id=&quot;now&quot;&gt;当前位置&lt;/span&gt;
<a id="__codelineno-15-2" name="__codelineno-15-2"></a>点击[这里](#top)跳转到开头
<a id="__codelineno-15-3" name="__codelineno-15-3"></a>点击[这里](#bottom)跳转到结尾
</code></pre></div></td></tr></table></div>
<p><span id="now"><strong>当前位置</strong></span></p>
<p>点击<a href="#top">这里</a>跳转到开头</p>
<p>点击<a href="#bottom">这里</a>跳转到结尾 </p>
<h3 id="_24">注脚<a class="headerlink" href="#_24" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1">1</a></span>
<span class="normal"><a href="#__codelineno-16-2">2</a></span>
<span class="normal"><a href="#__codelineno-16-3">3</a></span>
<span class="normal"><a href="#__codelineno-16-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a>使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2]。
<a id="__codelineno-16-2" name="__codelineno-16-2"></a>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a>[^1]:Markdown是一种纯文本标记语言
<a id="__codelineno-16-4" name="__codelineno-16-4"></a>[^2]:HyperText Markup Language 超文本标记语言
</code></pre></div></td></tr></table></div>
<p>使用 Markdown<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>可以效率的书写文档, 直接转换成 HTML<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup></p>
<p>点击<a href="#bottom">这里</a>跳转到结尾查看<span id="footnote"><strong>注脚</strong></span>的显示效果</p>
<h3 id="_25">多级引用<a class="headerlink" href="#_25" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1">1</a></span>
<span class="normal"><a href="#__codelineno-17-2">2</a></span>
<span class="normal"><a href="#__codelineno-17-3">3</a></span>
<span class="normal"><a href="#__codelineno-17-4">4</a></span>
<span class="normal"><a href="#__codelineno-17-5">5</a></span>
<span class="normal"><a href="#__codelineno-17-6">6</a></span>
<span class="normal"><a href="#__codelineno-17-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a>&gt;&gt;&gt; 请问 Markdwon 怎么用? - 小白
<a id="__codelineno-17-2" name="__codelineno-17-2"></a>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a>&gt;&gt; 自己看教程! - 愤青
<a id="__codelineno-17-4" name="__codelineno-17-4"></a>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a>&gt; 教程在哪? - 小白
<a id="__codelineno-17-6" name="__codelineno-17-6"></a>
<a id="__codelineno-17-7" name="__codelineno-17-7"></a>`[^_^]: # 无法显示时记得空行`
</code></pre></div></td></tr></table></div>
<p>不同编辑器的显示情况不同</p>
<blockquote>
<blockquote>
<blockquote>
<p>请问 Markdwon 怎么用? - 小白</p>
</blockquote>
<p>自己看教程! - 愤青</p>
</blockquote>
<p>教程在哪? - 小白</p>
</blockquote>
<h3 id="latex">LaTeX公式<a class="headerlink" href="#latex" title="Permanent link">&para;</a></h3>
<ul>
<li>在数学公式的前后加<code>$</code>是行内公式</li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a>我们在初中数学课上已经对一次函数$y=x+a$有所了解。
</code></pre></div></td></tr></table></div>
<p>我们在初中数学课上已经对一次函数<span class="arithmatex">\(y=x+a\)</span>有所了解。</p>
<ul>
<li>在数学公式的前后加<code>$$</code>是独占一行的公式
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a>下面我们来认识一下二次函数$$y=ax^2+bx+c$$
</code></pre></div></td></tr></table></div>
下面我们来认识一下二次函数 </li>
</ul>
<div class="arithmatex">\[y=ax^2+bx+c\]</div>
<hr />
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-20-1">1</a></span>
<span class="normal"><a href="#__codelineno-20-2">2</a></span>
<span class="normal"><a href="#__codelineno-20-3">3</a></span>
<span class="normal"><a href="#__codelineno-20-4">4</a></span>
<span class="normal"><a href="#__codelineno-20-5">5</a></span>
<span class="normal"><a href="#__codelineno-20-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1"></a>行内公式:$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
<a id="__codelineno-20-2" name="__codelineno-20-2"></a>块级公式:
<a id="__codelineno-20-3" name="__codelineno-20-3"></a>$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
<a id="__codelineno-20-4" name="__codelineno-20-4"></a>$$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
<a id="__codelineno-20-5" name="__codelineno-20-5"></a>1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
<a id="__codelineno-20-6" name="__codelineno-20-6"></a>{1+\frac{e^{-8\pi}} {1+\ldots} } } } $$
</code></pre></div></td></tr></table></div>
<p>行内公式:<span class="arithmatex">\(\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N\)</span></p>
<p>块级公式:</p>
<div class="arithmatex">\[x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]</div>
<div class="arithmatex">\[\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}{1+\frac{e^{-8\pi}} {1+\ldots} } } }\]</div>
<hr />
<p>来看看两个重要极限 </p>
<div class="arithmatex">\[\displaystyle\lim_{x \rightarrow 0}\frac{\sin x}{x} = 1\]</div>
<div class="arithmatex">\[\displaystyle\lim_{x \rightarrow + \infty}(1 + \frac{1}{x})^x = e\]</div>
<h2 id="_26">其他<a class="headerlink" href="#_26" title="Permanent link">&para;</a></h2>
<h3 id="_27">转义字符<a class="headerlink" href="#_27" title="Permanent link">&para;</a></h3>
<p>通过在Markdown字符前使用\来忽略或转义Markdown格式。</p>
<p>Markdown允许您使用反斜杠转义来生成文字字符否则这些字符在Markdown的格式化语法中具有特殊含义。 例如,如果您想用文字星号包围一个单词,则可以在星号之前使用反斜杠,如<code>\*literal asterisks\*</code> *literal asterisks*</p>
<p>Markdown为以下字符提供反斜杠转义(但是CSDN不太支持)</p>
<p>\反斜杠 `反引号 *星号_下划线{}大括号 []中括号 ()小括号  #井号 +加号 -减号 .英文句号 !英文感叹号</p>
<h3 id="html">内联 HTML 语法/特殊字符自动转义<a class="headerlink" href="#html" title="Permanent link">&para;</a></h3>
<p>对于 Markdown 中未包含的标签, 可以直接使用 HTML标签例如用 HTML <code>&lt;a&gt;</code> 标签替代 Markdown 的链接语法</p>
<p>在 HTML 中, 有一些字符需要特殊对待,如果你想将它们用作字面量, 则需要将它们转义为字符实体</p>
<table>
<thead>
<tr>
<th>特殊字符</th>
<th>代码</th>
</tr>
</thead>
<tbody>
<tr>
<td>&amp;</td>
<td><code>&amp;amp;</code></td>
</tr>
<tr>
<td>&lt;</td>
<td><code>&amp;lt;</code></td>
</tr>
<tr>
<td>&gt;</td>
<td><code>&amp;gt;</code></td>
</tr>
<tr>
<td>&quot;</td>
<td><code>&amp;quot;</code> <code>&amp;#34;</code></td>
</tr>
<tr>
<td>&apos;</td>
<td><code>&amp;apos;</code> <code>&amp;#39;</code></td>
</tr>
</tbody>
</table>
<h3 id="_28">注释<a class="headerlink" href="#_28" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-21-1">1</a></span>
<span class="normal"><a href="#__codelineno-21-2">2</a></span>
<span class="normal"><a href="#__codelineno-21-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1"></a>&lt;div style=&#39;display: none&#39;&gt;
<a id="__codelineno-21-2" name="__codelineno-21-2"></a>注释
<a id="__codelineno-21-3" name="__codelineno-21-3"></a>&lt;/div&gt;
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-22-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1"></a>&lt;!-- 注释 --&gt;
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-23-1">1</a></span>
<span class="normal"><a href="#__codelineno-23-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1"></a>[//]: # (哈哈我是最强注释1不会在浏览器中显示。)
<a id="__codelineno-23-2" name="__codelineno-23-2"></a>[^_^]: # (哈哈我是最萌注释2不会在浏览器中显示。)
</code></pre></div></td></tr></table></div>
<h3 id="_29">空格<a class="headerlink" href="#_29" title="Permanent link">&para;</a></h3>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-24-1">1</a></span>
<span class="normal"><a href="#__codelineno-24-2">2</a></span>
<span class="normal"><a href="#__codelineno-24-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1"></a>【1】 &amp;nbsp; 半角的不断行的空白格(推荐使用)
<a id="__codelineno-24-2" name="__codelineno-24-2"></a>【2】 &amp;ensp; 半角的空格
<a id="__codelineno-24-3" name="__codelineno-24-3"></a>【3】 &amp;emsp; 全角的空格
</code></pre></div></td></tr></table></div>
<ul>
<li>【1】 &nbsp; 半角的不断行的空白格(推荐使用)</li>
<li>【2】 &ensp; 半角的空格</li>
<li>【3】 &emsp; 全角的空格</li>
</ul>
<hr />
<p>同时推荐这个网站去学习基础markdown语法<a href="http://www.runoob.com/">runoob.com</a></p>
<p><span id="bottom"></span></p>
<style>
.related-posts {
margin-top: 1.5rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.1);
max-height: none !important; /* 防止Safari错误计算高度 */
overflow: visible !important; /* 防止内容被截断 */
}
.related-posts h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.3;
}
.related-posts ul {
margin: 0 0 0.5rem 0 !important; /* 强制覆盖可能的冲突样式 */
padding-left: 1.5rem;
list-style-position: outside;
}
.related-posts li {
margin-bottom: 0.25rem;
line-height: 1.4;
}
/* 暗色模式适配 */
[data-md-color-scheme="slate"] .related-posts {
border-top-color: rgba(255,255,255,0.1);
}
/* Safari特定修复 */
@supports (-webkit-hyphens:none) {
.related-posts {
display: block;
position: relative;
height: auto !important;
}
.related-posts ul {
position: static;
}
}
</style>
<div class="related-posts">
<h3>📚 相关文章推荐</h3>
<ul>
<li><a href="/Mkdocs-Wcowin/develop/Markdown/MWeb/">Markdown写作应用推荐</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/Relativeaddress/">相对地址的一些问题</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/header/">添加顶部公告栏</a></li>
</ul>
</div>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>Markdown是一种纯文本标记语言&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>HyperText Markup Language 超文本标记语言&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
</ol>
</div>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Render date of last update -->
<!-- Render date of creation -->
<!-- ---------------------------------------------------------------------- -->
<!-- Render authors -->
<!-- ---------------------------------------------------------------------- -->
<!-- Render committers from GitHub -->
<!-- Render committers from GitLab -->
<!-- Render committers -->
<!-- ---------------------------------------------------------------------- -->
<!-- Determine date of last update -->
<!-- Determine date of creation -->
<!-- Source file information -->
<aside class="md-source-file">
<!-- Date of last update -->
<span class="md-source-file__fact">
<span class="md-icon" title="最后更新">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg>
</span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="2025年5月11日 08:19:22 UTC">2025-05-11</span>
</span>
<!-- Date of creation -->
<!-- Authors (git-authors plugin) -->
<!-- Authors (git-committers plugin) -->
<span class="md-source-file__fact">
<span class="md-icon" title="贡献者">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
</span>
<span>GitHub</span>
<nav>
<a
href="https://github.com/Wcowin"
class="md-author"
title="@Wcowin"
>
<img
src="https://avatars.githubusercontent.com/u/99159173?v=4&size=72"
alt="Wcowin"
/>
</a>
<!-- More authors -->
</nav>
</span>
</aside>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Determine feedback configuration -->
<!-- Determine whether to show feedback -->
<!-- Was this page helpful? -->
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
此页面有帮助吗?
</legend>
<div class="md-feedback__inner">
<!-- Feedback ratings -->
<div class="md-feedback__list">
<button
class="md-feedback__icon md-icon"
type="submit"
title="This page was helpful"
data-md-value="1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9v12H1V9zm4 12a2 2 0 0 1-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 0 1 2 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21zm0-2h9.03L21 12v-2h-8.79l1.13-5.32L9 9.03z"/></svg>
</button>
<button
class="md-feedback__icon md-icon"
type="submit"
title="This page could be improved"
data-md-value="0"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 15V3h4v12zM15 3a2 2 0 0 1 2 2v10c0 .55-.22 1.05-.59 1.41L9.83 23l-1.06-1.06c-.27-.27-.44-.64-.44-1.06l.03-.31.95-4.57H3a2 2 0 0 1-2-2v-2c0-.26.05-.5.14-.73l3.02-7.05C4.46 3.5 5.17 3 6 3zm0 2H5.97L3 12v2h8.78l-1.13 5.32L15 14.97z"/></svg>
</button>
</div>
<!-- Feedback rating notes (shown after submission) -->
<div class="md-feedback__note">
<div data-md-value="1" hidden>
<!-- Determine title -->
<!-- Replace {url} and {title} placeholders in note -->
谢谢你的反馈!
</div>
<div data-md-value="0" hidden>
<!-- Determine title -->
<!-- Replace {url} and {title} placeholders in note -->
Thanks for your feedback! Help us improve this page by using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
</div>
</div>
</div>
</fieldset>
</form>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Comment system -->
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
回到页面顶部
</button>
</main>
<!-- Footer -->
<footer class="md-footer">
<!-- Link to previous and/or next page - 移到最上面 -->
<nav
class="md-footer__inner md-grid"
aria-label="页脚"
>
<!-- Link to previous page -->
<a
href="../../../blog/websitebeauty/accelerate/"
class="md-footer__link md-footer__link--prev"
aria-label="上一页: 加速网站访问的一些心得"
>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction"> 上一页 </span>
<div class="md-ellipsis">加速网站访问的一些心得</div>
</div>
</a>
<!-- Link to next page -->
<a
href="../MWeb/"
class="md-footer__link md-footer__link--next"
aria-label="下一页: MWeb Pro"
>
<div class="md-footer__title">
<span class="md-footer__direction"> 下一页 </span>
<div class="md-ellipsis">MWeb Pro</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<!-- Further information -->
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="footer-wrapper">
<!-- 访问统计区域 -->
<div class="footer-content">
<div class="footer-visit-count">
<div class="footer-item">
<!-- <span class="footer-icon">👀</span> -->
<span>本站访问量:</span>
<span id="finicount_views" class="footer-highlight"></span>
</div>
<div class="footer-item">
<!-- <span class="footer-icon">📝</span> -->
<a
href="https://icp.gov.moe/?keyword=20230640"
target="_blank"
rel="noopener noreferrer"
class="icp-link"
>萌ICP备20230640号</a>
</div>
<div class="footer-item runtime-info">
<!-- <span class="footer-icon">⏱️</span> -->
<span>本站已经运行</span>
<span id="box1" class="footer-highlight"></span>
</div>
</div>
</div>
<!-- 移动端简洁布局 (仿 footercopy.html) -->
<div class="footer-visit-count-mobile">
<span>本站访问量:</span>
<span id="finicount_views_mobile" class="footer-highlight"></span>
|
<a
href="https://icp.gov.moe/?keyword=20230640"
target="_blank"
rel="noopener noreferrer"
class="icp-link"
>萌ICP备20230640号</a>
<!-- |&nbsp; -->
<span class="runtime-info">
<span>本站已经运行</span>
<span id="box1_mobile"></span>
</span>
</div>
<!-- 版权信息和社交媒体水平布局 -->
<div class="footer-bottom-section">
<div class="md-footer-copyright">
<p>Copyright © 2022-2025 Wcowin</p>
<p>Made with <a href="https://squidfunk.github.io/mkdocs-material/" style="color: #518FC1; text-decoration: none;">Material for MkDocs</a></p>
</div>
<div class="footer-social">
<div class="md-social">
<a href="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" target="_blank" rel="noopener" title="Wechat" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154m-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4m-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2M563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4m-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6m107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6"/></svg>
</a>
<a href="https://t.me/wecowin" target="_blank" rel="noopener" title="telegram" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg>
</a>
<a href="https://twitter.com/wcowin_" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>
</a>
<a href="https://github.com/Wcowin" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="mailto:<wangkewen821@gmail.com>" target="_blank" rel="noopener" title="" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z"/></svg>
</a>
<a href="https://space.bilibili.com/1407028951/lists/4566631?type=series" target="_blank" rel="noopener" title="space.bilibili.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79 0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0q13.2 0 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0q13.2 0 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797 0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1m-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8s9.7-14.3 10.1-23.5zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5s-17.5-3.2-23.6-9.5-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2s13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10m191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2s-14 9.5-23.6 9.5-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2s14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10"/></svg>
</a>
</div>
</div>
</div>
</div>
<script>
(function() {
// 避免变量冲突,将所有代码包装在立即执行函数中
function timingTime() {
const start = "2023-10-14T00:00:00";
const startTime = new Date(start).getTime();
const now = Date.now();
let diff = Math.floor((now - startTime) / 1000);
const days = Math.floor(diff / 86400);
diff %= 86400;
const hours = Math.floor(diff / 3600);
diff %= 3600;
const minutes = Math.floor(diff / 60);
const seconds = diff % 60;
return `${days}${hours}${minutes}${seconds}`;
}
// 简化的计时器更新函数
function updateTime() {
const el = document.getElementById("box1");
const elMobile = document.getElementById("box1_mobile");
const time = timingTime();
if (el) el.textContent = time;
if (elMobile) elMobile.textContent = time;
}
// 加载访问量计数器
async function loadVisitCounter() {
try {
const script = document.createElement('script');
script.src = '//finicounter.eu.org/finicounter.js';
script.async = true;
script.onerror = function() {
console.log('访问量计数器加载失败,使用备用显示');
const desktop = document.getElementById("finicount_views");
const mobile = document.getElementById("finicount_views_mobile");
if (desktop) desktop.textContent = '统计中...';
if (mobile) mobile.textContent = '统计中...';
};
document.head.appendChild(script);
} catch (e) {
console.log('访问量计数器初始化失败:', e);
}
}
// 同步访问量显示
function syncVisitCount() {
const desktop = document.getElementById("finicount_views");
const mobile = document.getElementById("finicount_views_mobile");
if (desktop && mobile && desktop.textContent && desktop.textContent !== '加载中...') {
mobile.textContent = desktop.textContent;
}
}
// 监听访问量更新
function setupVisitCountObserver() {
try {
const observer = new MutationObserver(syncVisitCount);
const visitCountTarget = document.getElementById("finicount_views");
if (visitCountTarget) {
observer.observe(visitCountTarget, { childList: true, subtree: true });
}
} catch (e) {
console.log('访问量监听器设置失败:', e);
}
}
// 初始化所有功能
function init() {
// 启动计时器
updateTime();
setInterval(updateTime, 1000);
// 加载访问量计数器
loadVisitCounter();
// 设置访问量同步
setupVisitCountObserver();
// 调试信息
console.log('页脚功能已启动');
console.log('当前时间:', timingTime());
}
// 确保DOM加载完成后再初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
<style>
/* 页脚背景配色方案 - 可根据喜好选择 */
/* 方案1: 现代深蓝灰色调 (当前使用) */
.md-footer {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
/* 方案2: 优雅紫色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #2d1b69 0%, #4c1d95 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #1e1b4b 0%, #2d1b69 100%);
}
*/
/* 方案3: 温暖深绿色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
}
*/
/* 方案4: 经典深灰色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}
*/
/* 整体页脚容器 */
.footer-wrapper {
width: 100%;
padding: 0.2rem 0;
text-align: center;
}
/* 版权信息和社交媒体水平布局 */
.footer-bottom-section {
max-width: 900px;
margin: 0.4rem auto 0;
padding: 0.4rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
}
/* 版权信息 */
.md-footer-copyright {
text-align: left;
font-size: 0.75rem;
opacity: 0.8;
line-height: 1.2;
}
/* 社交媒体图标 */
.footer-social {
display: -webkit-flex;
display: flex;
gap: 0.3rem;
-webkit-align-items: center;
align-items: center;
}
/* Safari兼容性修复 */
.footer-social .md-social__link svg {
-webkit-transform: translateZ(0);
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto;
}
/* 强制Safari显示SVG图标 */
.footer-social .md-social__link {
opacity: 1 !important;
visibility: visible !important;
}
/* 内容区域样式 */
.footer-content {
max-width: 900px;
margin: 0 auto;
padding: 0.4rem 0 0;
}
.footer-visit-count {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--md-footer-fg-color--light);
}
.footer-item {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.8rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
min-width: 160px;
font-size: 0.8rem;
transition: all 0.2s ease;
}
.footer-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(81, 143, 193, 0.4);
transform: translateY(-1px);
}
.footer-icon {
margin-right: 0.5rem;
font-size: 1rem;
}
.footer-highlight {
color: #939ba2;
font-weight: 600;
margin-left: 0.3rem;
}
.icp-link {
color: inherit;
text-decoration: none;
}
.icp-link:hover {
color: #518FC1;
}
/* 社交媒体图标样式 - 仅桌面端 */
@media (min-width: 76.1875em) {
.footer-social .md-social__link {
padding: 0.3rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 2rem;
height: 2rem;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer-social .md-social__link svg {
width: 1.2rem;
height: 1.2rem;
fill: currentColor;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.footer-social .md-social__link:hover {
background: rgba(81, 143, 193, 0.2);
border-color: rgba(81, 143, 193, 0.4);
}
}
/* 移动端社交媒体图标样式 - 恢复默认样式 */
@media (max-width: 76.1875em) {
.footer-social .md-social__link {
padding: 0.4rem;
background: transparent;
border: none;
width: auto;
height: auto;
display: inline-block;
border-radius: 0;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer-social .md-social__link:hover {
background: transparent;
border: none;
color: var(--md-accent-fg-color);
}
.footer-social .md-social__link svg {
width: 1.6rem;
height: 1.6rem;
fill: currentColor;
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: block;
}
}
/* 导航链接样式 */
.md-footer__link {
transition: opacity 0.2s ease;
}
.md-footer__link:hover {
opacity: 1;
}
/* 移动端响应式 - 使用 footercopy.html 样式 */
@media (max-width: 76.1875em) {
/* 隐藏桌面端的卡片式布局 */
.footer-visit-count {
display: none;
}
.footer-bottom-section {
flex-direction: column;
gap: 0.6rem;
text-align: center;
}
.md-footer-copyright {
text-align: center;
font-size: 0.75rem;
}
.footer-social .md-social__link {
width: 1.8rem;
height: 1.8rem;
}
/* 显示移动端的简洁布局 */
.footer-visit-count-mobile {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.4em 0.8em;
padding: 0.2em 0;
font-size: 0.75rem;
color: var(--md-footer-fg-color--light);
text-align: center;
}
.footer-visit-count-mobile > * {
white-space: nowrap;
}
.footer-visit-count-mobile .icp-link {
color: var(--md-footer-fg-color--light);
text-decoration: none;
}
.footer-visit-count-mobile .icp-link:hover {
color: #596875;
text-decoration: underline;
}
/* .runtime-info {
display: none; 移动端隐藏运行时间
} */
}
/* 桌面端隐藏移动端布局 */
@media (min-width: 76.1875em) {
.footer-visit-count-mobile {
display: none;
}
}
@media (min-width: 768px) {
.footer-visit-count {
flex-direction: row;
justify-content: center;
gap: 2rem;
}
}
/* 深色模式适配 */
[data-md-color-scheme="slate"] .md-footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
[data-md-color-scheme="slate"] .md-footer-meta {
background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
}
[data-md-color-scheme="slate"] .footer-item {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="slate"] .footer-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(81, 143, 193, 0.3);
}
[data-md-color-scheme="slate"] .footer-social .md-social__link {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
</style>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["announce.dismiss", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.top", "navigation.footer", "search.suggest", "search.highlight", "search.share", "navigation.expand", "navigation.indexes", "content.tabs.link", "content.tooltips", "content.code.copy", "content.action.edit", "content.action.view", "content.code.annotate"], "search": "../../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}, "version": null}</script>
<script src="../../../assets/javascripts/bundle.56ea9cef.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/extra.js"></script>
<script src="../../../javascripts/mathjax.js"></script>
<script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/view.js"></script>
</body>
</html>