<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://drbear.vercel.app/blog</id>
    <title>小熊博士的小窝 Blog</title>
    <updated>2024-04-03T17:16:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://drbear.vercel.app/blog"/>
    <subtitle>小熊博士的小窝 Blog</subtitle>
    <icon>https://drbear.vercel.app/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Git常见命令]]></title>
        <id>https://drbear.vercel.app/blog/Git common command</id>
        <link href="https://drbear.vercel.app/blog/Git common command"/>
        <updated>2024-04-03T17:16:00.000Z</updated>
        <summary type="html"><![CDATA[根据Git Pro这本书上的前五章记录的常见命令]]></summary>
        <content type="html"><![CDATA[<p>这里记录了Git Pro前五章所提到的命令，在记录命令的同时，我会将一些与命令相关的知识点也做一个简单记录，方便查看的时候能够更加清楚地认识到该命令的作用。</p>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-基本配置">Git 基本配置<a href="https://drbear.vercel.app/blog/Git%20common%20command#git-%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="Git 基本配置的直接链接" title="Git 基本配置的直接链接">​</a></h2>
<p>Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量。这些变量存储在三个不同的位置</p>
<ul>
<li><u>/etc/gitconfig</u> 文件，包含系统上每一个用户及他们仓库的通用配置。如果在执行 git config 时带上 <code>--system</code> 选项，那么它就会读写该文件中的配置变量（由于它是系统配置文件，因此你需要管理员或超级用户权限来修改它。）</li>
<li><u>~/.gitconfig 或 ~/.config/git/config</u> 文件，只针对当前用户。你可以传递 <code>--global</code> 选项让 Git 读写此文件，这会对你系统上<strong>所有</strong>的仓库生效。</li>
<li><u>.git/config</u>，当前使用仓库的 Git 目录中的 config 文件，针对该仓库。你可以传递 <code>--local</code> 选项让 Git 强制读写此文件，虽然默认情况下用的就是它。（当然，你需要进入某个 Git 仓库中才能让该选项生效。）</li>
</ul>
<p>每一个级别会覆盖上一级别的配置，所以 .git/config 的配置变量会覆盖 /etc/gitconfig 中的配置变量。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看配置信息">查看配置信息<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E9%85%8D%E7%BD%AE%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="查看配置信息的直接链接" title="查看配置信息的直接链接">​</a></h3>
<ul>
<li>
<p><code>git config --list</code><br>
<!-- -->将配置信息以列表的格式表现出来</p>
</li>
<li>
<p><code>git config --show-origin</code><br>
<!-- -->将配置信息所在的文件路径显示出来</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="一些常见配置">一些常见配置<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E4%B8%80%E4%BA%9B%E5%B8%B8%E8%A7%81%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="一些常见配置的直接链接" title="一些常见配置的直接链接">​</a></h3>
<p>正如这一节开头提到的，我们可以利用 git config 工具来实现配置 Git。当配置 Git 的时候，我们要注意这一配置的作用域，根据作用域来选择合适的选项。下面是一些常见配置信息的例子。</p>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># 配置用户信息</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> config </span><span class="token parameter variable" style="color:#36acaa">--global</span><span class="token plain"> user.name </span><span class="token string" style="color:#e3116c">"BearProfessor"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> config </span><span class="token parameter variable" style="color:#36acaa">--global</span><span class="token plain"> user.email bear_professor@outlook.com</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 配置默认打开的文本编辑器为 Vscode</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> config </span><span class="token parameter variable" style="color:#36acaa">--global</span><span class="token plain"> core.editor </span><span class="token string" style="color:#e3116c">"code --wait"</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>上面是VsCode的例子，若想修改 git 默认打开的编辑器，请查阅<a href="https://git-scm.com/book/zh/v2/%E9%99%84%E5%BD%95-C%3A-Git-%E5%91%BD%E4%BB%A4-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E9%85%8D%E7%BD%AE#ch_core_editor" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="获取帮助">获取帮助<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%8E%B7%E5%8F%96%E5%B8%AE%E5%8A%A9" class="hash-link" aria-label="获取帮助的直接链接" title="获取帮助的直接链接">​</a></h3>
<p>若你使用 Git 时需要获取帮助，有三种等价的方法可以找到 Git 命令的综合手册（manpage）</p>
<ul>
<li><code>git help &lt;verb&gt;</code></li>
<li><code>git &lt;verb&gt; --help</code></li>
<li><code>man git-&lt;verb&gt;</code></li>
</ul>
<p>如果不需要全面的手册，可以只用 -h 来获取更加简明的help</p>
<ul>
<li><code>git &lt;verb&gt; -h</code></li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-记录更新到仓库">Git 记录更新到仓库<a href="https://drbear.vercel.app/blog/Git%20common%20command#git-%E8%AE%B0%E5%BD%95%E6%9B%B4%E6%96%B0%E5%88%B0%E4%BB%93%E5%BA%93" class="hash-link" aria-label="Git 记录更新到仓库的直接链接" title="Git 记录更新到仓库的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="获取-git-仓库">获取 Git 仓库<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%8E%B7%E5%8F%96-git-%E4%BB%93%E5%BA%93" class="hash-link" aria-label="获取 Git 仓库的直接链接" title="获取 Git 仓库的直接链接">​</a></h3>
<p>通常有两种获取 Git 项目仓库的方式，两种方式都会在你的本地机器上得到一个工作就绪的 Git 仓库。</p>
<ul>
<li>
<p><code>git init</code><br>
<!-- -->将尚未进行版本控制的本地目录转换为 Git 仓库。该命令将创建一个名为 <u>.git</u> 的子目录，这个子目录含有你初始化的 Git 仓库中所有的必须文件，这些文件是 Git 仓库的骨干。</p>
</li>
<li>
<p><code>git clone &lt;url&gt;</code><br>
<!-- -->从其它服务器克隆一个已存在的 Git 仓库，这个仓库名默认与远程仓库同名</p>
</li>
<li>
<p><code>git clone &lt;url&gt; &lt;reponame&gt;</code><br>
<!-- -->克隆一个 Git 仓库，并将这个本地仓库起名为 reponame</p>
</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>克隆远程仓库的背后</div><div class="admonitionContent_QWhA"><ol>
<li>这会在当前目录下创建一个 Git 仓库</li>
<li>并在这个目录下初始化一个 <u>.git</u> 文件夹，从远程仓库拉取下所有数据放入 <u>.git</u> 文件夹，然后从中读取最新版本的文件的拷贝。</li>
<li>默认添加一个远程仓库，名为 origin</li>
<li>默认创建一个远程跟踪分支，名为 origin/master；还有一个本地分支，名为 master，跟踪着 origin/master</li>
</ol></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="检查当前文件状态">检查当前文件状态<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%A3%80%E6%9F%A5%E5%BD%93%E5%89%8D%E6%96%87%E4%BB%B6%E7%8A%B6%E6%80%81" class="hash-link" aria-label="检查当前文件状态的直接链接" title="检查当前文件状态的直接链接">​</a></h3>
<p>我们知道 Git 中的文件无外乎两种状态——已跟踪和未跟踪。已跟踪又分为：未修改，已修改，已暂存三种状态。为了查询当前文件的状态，我们需要用到文件状态查询命令。</p>
<ul>
<li>
<p><code>git status</code><br>
<!-- -->查询当前所有文件的状态</p>
</li>
<li>
<p><code>git status -s</code> 或 <code>git status --short</code><br>
<!-- -->查询当前所有文件的状态，得到一种格式更为紧凑的输出。新添加的未跟踪文件前面有 ?? 标记，新添加到暂存区中的文件前面有 A 标记，修改过的文件前面有 M 标记。输出中有两栏，左栏指明了暂存区的状态，右栏指明了工作区的状态。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看已暂存和未暂存的修改">查看已暂存和未暂存的修改<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E5%B7%B2%E6%9A%82%E5%AD%98%E5%92%8C%E6%9C%AA%E6%9A%82%E5%AD%98%E7%9A%84%E4%BF%AE%E6%94%B9" class="hash-link" aria-label="查看已暂存和未暂存的修改的直接链接" title="查看已暂存和未暂存的修改的直接链接">​</a></h3>
<p>如果 git status 命令的输出对于你来说过于简略，而你想知道具体修改了什么地方，可以用 git diff 命令。</p>
<ul>
<li>
<p><code>git diff</code><br>
<!-- -->此命令比较的是工作目录中当前文件和暂存区域快照之间的差异。也就是修改之后还没有暂存起来的变化内容。若是所有文件都已经暂存起来了，那么这条命令将不会又任何显示。</p>
</li>
<li>
<p><code>git diff --staged</code> 或 <code>git diff --cached</code><br>
<!-- -->比对已暂存文件与最后一次提交的文件差异。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="暂存文件">暂存文件<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9A%82%E5%AD%98%E6%96%87%E4%BB%B6" class="hash-link" aria-label="暂存文件的直接链接" title="暂存文件的直接链接">​</a></h3>
<p>当我们在修改，添加，删除某些文件之后，我们想要将修改保存下来。这时候我们就需要提交文件，在提交文件之前，最好先将需要提交的文件进行暂存。这就产生了一个问题：<a href="https://drbear.vercel.app/blog/Git-base#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E6%9A%82%E5%AD%98%E5%8C%BA">为什么需要暂存区</a>。</p>
<ul>
<li><code>git add &lt;files&gt;</code><br>
<!-- -->这是个多功能命令：可以用它开始跟踪新文件，或者把已跟踪的文件放到暂存区，还能用于合并时把有冲突的文件标记为已解决状态等。</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>暂存操作的背后</div><div class="admonitionContent_QWhA"><p>暂存背后的操作为：为每一个文件计算校验和（使用 SHA-1 哈希算法），然后会把当前版本的文件快照保存到 Git 仓库中（Git 使用 blob 对象来保存它们），最终将校验和加入到暂存区域等待提交。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="将文件从暂存区中移除">将文件从暂存区中移除<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%B0%86%E6%96%87%E4%BB%B6%E4%BB%8E%E6%9A%82%E5%AD%98%E5%8C%BA%E4%B8%AD%E7%A7%BB%E9%99%A4" class="hash-link" aria-label="将文件从暂存区中移除的直接链接" title="将文件从暂存区中移除的直接链接">​</a></h3>
<p>我们有时候会想将文件删除，但这个文件可能已经暂存了。若仅是从物理目录里面删除这个文件，在暂存区的文件列表中依旧存在着指向这个文件快照的索引，因此，在提交的时候依旧会将这个文件的快照保存下来。为了将文件从暂存区中删除，我们需要移除文件命令。</p>
<ul>
<li>
<p><code>git rm &lt;file&gt;</code><br>
<!-- -->将文件从暂存区中移除，并且也会删除物理目录里面的文件。这个命令只能移除自从上次提交之后没有修改过的文件。</p>
</li>
<li>
<p><code>git rm -f &lt;file&gt;</code><br>
<!-- -->若想将一个修改过的文件移除，我们需要使用 <code>-f</code> 选项，这是一种安全特性，用于防止误删尚未添加到快照的数据，这样的数据不能被 Git 恢复。</p>
<p>若我们使用了 <code>rm &lt;file&gt;</code>，再用 <code>git rm &lt;file&gt;</code> 命令，一样可以将修改过的文件进行删除，在暂存区和物理目录里面都会删除。</p>
</li>
<li>
<p><code>git rm --cached &lt;file&gt;</code><br>
<!-- -->把文件从 Git 仓库中删除（亦即从暂存区域移除），但仍然保留在当前工作目录中。换句话说，你想让文件保留在磁盘，但是并不想让 Git 继续跟踪。当你忘记添加 .gitignore 文件，不小心把一个很大的日志文件或一堆 .a 这样的编译生成文件添加到暂存区时，这一做法尤其有用。</p>
</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>使用通配符匹配要移除的文件</div><div class="admonitionContent_QWhA"><p>git rm 命令后面可以列出文件或者目录的名字，也可以使用 glob 模式。比如</p><div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> log/</span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain">*.log</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>注意到星号 * 之前的反斜杠 \， 因为 Git 有它自己的文件模式扩展匹配方式，所以我们不用 shell 来帮忙展开。 此命令删除 log/ 目录下扩展名为 .log 的所有文件。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="移动文件">移动文件<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E7%A7%BB%E5%8A%A8%E6%96%87%E4%BB%B6" class="hash-link" aria-label="移动文件的直接链接" title="移动文件的直接链接">​</a></h3>
<ul>
<li><code>git mv &lt;file_from&gt; &lt;file_to&gt;</code><br>
<!-- -->移动文件，这不仅会修改暂存区中文件列表的信息，也会移动实际物理目录中的文件。若没有指定路径，只给了文件名，实现的作用就是给文件改名。实际上，这条命令是三条命令的合并。</li>
</ul>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">mv</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">file_from</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">file_to</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">file_from</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">file_to</span><span class="token operator" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="提交文件">提交文件<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%8F%90%E4%BA%A4%E6%96%87%E4%BB%B6" class="hash-link" aria-label="提交文件的直接链接" title="提交文件的直接链接">​</a></h3>
<p>当你确定将文件修改完成的时候，或者你担心文件丢失，此时都可以将文件进行提交。只要你将文件进行了提交，就可以将这个文件快照保存下来。</p>
<ul>
<li>
<p><code>git commit</code><br>
<!-- -->将当前暂存的内容提交至版本库保存下来。当执行这条命令的时候，会打开设定好的文本编辑器，然后让你输入这一次提交的描述信息。退出编辑器时，Git 会丢弃注释行，用你输入的提交说明生成一次提交。</p>
</li>
<li>
<p><code>git commit -m &lt;description&gt;</code><br>
<!-- -->也可以将提交信息与命令放在同一行，这样无需打开编辑器编辑提交说明。</p>
</li>
<li>
<p><code>git commit -a</code><br>
<!-- -->跳过使用暂存区，Git 会自动把所有<strong>已经跟踪过的文件</strong>暂存起来一并提交，从而跳过 git add 步骤。但这个需要小心，跳过暂存区直接提交可能会不小心提交某些不想提交的文件。</p>
</li>
</ul>
<details class="details_MWPH alert alert--info details_fvjc" data-collapsed="true"><summary>提交操作的背后</summary><div><div class="collapsibleContent_R17e"><div><p>第一次提交：Git 会先计算每一个子目录的校验和， 然后在 Git 仓库中这些校验和保存为树对象。随后，Git 便会创建一个提交对象，它除了包含上面提到的那些信息外，还包含指向这个树对象（项目根目录）的指针。 如此一来，Git 就可以在需要的时候重现此次保存的快照。</p><p><img loading="lazy" alt="alt 第一次提交" src="https://drbear.vercel.app/assets/images/first-commit-9cdd30fe51873a065e779ea12700baa9.png" width="678" height="372" class="img_KnJ7"></p><p>后续提交：提交对象除了包含上述内容，还会包含一个指向父对象的指针</p><p><img loading="lazy" alt="alt 后续提交" src="https://drbear.vercel.app/assets/images/latter-commit-71cd35057cdda71f225d41ed5b92e958.png" width="673" height="234" class="img_KnJ7"></p></div></div></div></details>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="忽略文件">忽略文件<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%BF%BD%E7%95%A5%E6%96%87%E4%BB%B6" class="hash-link" aria-label="忽略文件的直接链接" title="忽略文件的直接链接">​</a></h3>
<p>一般我们总会有些文件无需纳入 Git 的管理，也不希望它们总出现在未跟踪文件列表。 通常都是些自动生成的文件，比如日志文件，或者编译过程中创建的临时文件等。 在这种情况下，我们可以创建一个名为 <code>.gitignore</code> 的文件。关于 gitignore 文件的格式详情可以查阅<a href="https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%AE%B0%E5%BD%95%E6%AF%8F%E6%AC%A1%E6%9B%B4%E6%96%B0%E5%88%B0%E4%BB%93%E5%BA%93" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看提交历史">查看提交历史<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E5%8E%86%E5%8F%B2" class="hash-link" aria-label="查看提交历史的直接链接" title="查看提交历史的直接链接">​</a></h2>
<p>在提交了若干更新，又或者克隆了某个项目之后，我们可以利用命令来查看提交历史。</p>
<ul>
<li>
<p><code>git log</code><br>
<!-- -->按时间先后顺序列出所有的提交，最近的更新排在最上面。这个命令会列出每个提交的 SHA-1 校验和、作者的名字和电子邮件地址、提交时间以及提交说明。</p>
</li>
<li>
<p><code>git log -p</code> 或 <code>git log --patch</code><br>
<!-- -->除了显示上一条命令的提交信息之外，还显示每一次提交的修改，补丁（patch）。</p>
</li>
<li>
<p><code>git log --stat</code><br>
<!-- -->除了显示基本信息外，还可以看到每次提交的简略统计信息。会列出修改的文件，以及每个文件修改了多少，所有文件总共修改了多少的数值。这是一个统计（statistic）信息，不会显示出每一个文件修改的内容。</p>
</li>
<li>
<p><code>git log --decorate</code><br>
<!-- -->这是查看提交记录，但是在显示的时候，也会显示分支指向哪个提交记录。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看提交历史常用选项">查看提交历史常用选项<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E5%8E%86%E5%8F%B2%E5%B8%B8%E7%94%A8%E9%80%89%E9%A1%B9" class="hash-link" aria-label="查看提交历史常用选项的直接链接" title="查看提交历史常用选项的直接链接">​</a></h3>
<p><img loading="lazy" alt="常用选项" src="https://drbear.vercel.app/assets/images/gitlog-option-eaa775b3466ebaa1884ae5851dba6b4a.png" width="673" height="491" class="img_KnJ7"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="提交历史的显示格式">提交历史的显示格式<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%8F%90%E4%BA%A4%E5%8E%86%E5%8F%B2%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F" class="hash-link" aria-label="提交历史的显示格式的直接链接" title="提交历史的显示格式的直接链接">​</a></h3>
<ul>
<li>
<p><code>git log --graph</code><br>
<!-- -->这个选项添加了一些 ASCII 字符串来形象地展示你的分支、合并历史</p>
</li>
<li>
<p><code>git log --pretty</code><br>
<!-- -->这个选项可以使用不同于默认格式的方式展示提交历史。这个选项有一些内建的子选项供你使用。 比如 oneline 会将每个提交放在一行显示，在浏览大量的提交时非常有用。 另外还有 short，full 和 fuller 选项，它们展示信息的格式基本一致，但是详尽程度不一。</p>
</li>
<li>
<p><code>git log --pretty=format:""</code><br>
<!-- -->我们可以在 format 后利用不同的格式占位符来定制提交记录的显示格式。</p>
</li>
</ul>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">git</span><span class="token plain"> log </span><span class="token parameter variable" style="color:#36acaa">--pretty</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">oneline</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">## 显示结果</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ 0417011cb8bc83bd8556de50bedf5508869c23b9 </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">HEAD -</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> master</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> second commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ ede8d616d0c30e6251287fe22b812d17496637c2 first commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> log </span><span class="token parameter variable" style="color:#36acaa">--pretty</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">format:</span><span class="token string" style="color:#e3116c">"%h - %s"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">## 显示结果</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ 0417011 - second commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ ede8d61 - first commit</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>从上面可以看到，我们在 format 后跟一个字符串，这个字符串就表示了显示的样式。在这个字符串中有一些 %h，%s，这是占位符，告诉 Git 在展示的时候该用什么来替换掉这个占位符。下面列了一些常用的占位符。</p>
<p><img loading="lazy" alt="alt 显示的格式" src="https://drbear.vercel.app/assets/images/gitlog-format-54b0f867e52adabe5b7075f508fe4564.png" width="389" height="704" class="img_KnJ7"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="限制输出长度">限制输出长度<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E9%99%90%E5%88%B6%E8%BE%93%E5%87%BA%E9%95%BF%E5%BA%A6" class="hash-link" aria-label="限制输出长度的直接链接" title="限制输出长度的直接链接">​</a></h3>
<p>这个实际上就利用各种选项来挑选出我们需要的提交记录，而这些记录往往只是所有记录中的一部分，因此也就限制了输出的长度。</p>
<ul>
<li>
<p><code>git log --no-merges</code><br>
<!-- -->按照你代码仓库的工作流程，记录中可能有为数不少的合并提交，它们所包含的信息通常并不多。为了避免显示的合并提交弄乱历史记录，可以为 log 加上 --no-merges 选项。</p>
</li>
<li>
<p><code>git log -&lt;n&gt;</code><br>
<!-- -->显示最近 n 条提交记录。</p>
</li>
</ul>
<p>还有一些其他常用的选项。</p>
<p><img loading="lazy" alt="alt 筛选提交记录" src="https://drbear.vercel.app/assets/images/gitlog-filter-b85b348d7376a963356c70552e755c72.png" width="415" height="345" class="img_KnJ7"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="撤销操作">撤销操作<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%92%A4%E9%94%80%E6%93%8D%E4%BD%9C" class="hash-link" aria-label="撤销操作的直接链接" title="撤销操作的直接链接">​</a></h2>
<p>在工作中，难免会遇见误操作，或者是想法的改变，这都可能让你想要撤销之前的某个操作。</p>
<ul>
<li>
<p><code>git commit --amend</code><br>
<!-- -->如果你想修改之前提交的信息，可以利用这个命令，这个命令会将当前暂存区的内容进行提交，并生成一个全新的提交对象替换掉之前的提交对象。</p>
</li>
<li>
<p><code>git reset HEAD &lt;file&gt;</code><br>
<!-- -->这个命令用来将某个文件取消暂存。</p>
</li>
<li>
<p><code>git checkout -- &lt;file&gt;</code><br>
<!-- -->对指定文件在本地的任何修改都会消失——Git 会用最近提交的版本覆盖掉它。</p>
</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="版本回退和重置">版本回退和重置<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80%E5%92%8C%E9%87%8D%E7%BD%AE" class="hash-link" aria-label="版本回退和重置的直接链接" title="版本回退和重置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="版本回退">版本回退<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80" class="hash-link" aria-label="版本回退的直接链接" title="版本回退的直接链接">​</a></h3>
<p>当我们在提交了几次记录之后，想回到先前的某一个版本，可以采用版本回退命令。若想查看对于这些命令更加详细的解释，可以查看<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E9%87%8D%E7%BD%AE%E6%8F%AD%E5%AF%86" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<ul>
<li>
<p><code>git reset --soft &lt;SHA1&gt;</code><br>
<!-- -->这会保留当前的工作区和暂存区内容，仅修改了 HEAD 分支指向。</p>
</li>
<li>
<p><code>git reset --mixed &lt;SHA1&gt;</code><br>
<!-- -->这会保留当前的工作区内容，而暂存区内容看起来像 HEAD。</p>
</li>
<li>
<p><code>git reset --hard &lt;SHA1&gt;</code><br>
<!-- -->工作区和暂存区内容全部不保留，回到当时提交该 SHA1 指向的提交刚提交时的情况。</p>
</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>版本回退的背后</div><div class="admonitionContent_QWhA"><p>这些 reset 命令的共同点在：将当前的分支指向指定的提交记录，而 HEAD 也指向这个移动过后的分支，这就使得——原来指向的提交记录没有分支指向它，我们无法通过分支来找到它。这就与下面提到的重置有关了。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="回退操作的重置">回退操作的重置<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%9B%9E%E9%80%80%E6%93%8D%E4%BD%9C%E7%9A%84%E9%87%8D%E7%BD%AE" class="hash-link" aria-label="回退操作的重置的直接链接" title="回退操作的重置的直接链接">​</a></h3>
<p>若我们想要回退到先前的版本，就需要我们找到先前那个提交记录，而这个提交记录我们无法通过分支来寻找。</p>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># 可以将所有的提交记录显示出来，这样我们就可以找到任意一个提交记录的 SHA1 校验和。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> reflog</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 我们可以创建新的分支指向这个提交记录，这样就可以切换到这个提交记录。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> branch </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">branch</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">SHA</span><span class="token operator file-descriptor important" style="color:#393A34">1</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># 切换到新的分支上来。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">git</span><span class="token plain"> checkout </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">branch</span><span class="token operator" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="远程仓库的使用">远程仓库的使用<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="远程仓库的使用的直接链接" title="远程仓库的使用的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看远程仓库">查看远程仓库<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93" class="hash-link" aria-label="查看远程仓库的直接链接" title="查看远程仓库的直接链接">​</a></h3>
<ul>
<li>
<p><code>git remote</code><br>
<!-- -->列出你指定的每一个远程服务器的简写（远程仓库本来是 url，我们在添加远程仓库的时候会指定一个简写来指代这个 url）。如果克隆了一个仓库，我们至少能看到 origin。</p>
</li>
<li>
<p><code>git remote show &lt;remote&gt;</code><br>
<!-- -->查看指定远程仓库的详细信息。</p>
</li>
<li>
<p><code>git remote -v</code>
会显示需要读写远程仓库使用的 Git 保存的简写与其对应的 URL。它同样会列出远程仓库的 URL 与跟踪分支的信息。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="新建远程仓库">新建远程仓库<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%96%B0%E5%BB%BA%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93" class="hash-link" aria-label="新建远程仓库的直接链接" title="新建远程仓库的直接链接">​</a></h3>
<ul>
<li><code>git remote add &lt;shortname&gt; &lt;url&gt;</code><br>
<!-- -->添加一个远程 Git 仓库，同时指定一个方便使用的简写。</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="远程仓库的重命名与移除">远程仓库的重命名与移除<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E9%87%8D%E5%91%BD%E5%90%8D%E4%B8%8E%E7%A7%BB%E9%99%A4" class="hash-link" aria-label="远程仓库的重命名与移除的直接链接" title="远程仓库的重命名与移除的直接链接">​</a></h3>
<ul>
<li>
<p><code>git remote rename &lt;oldname&gt; &lt;newname&gt;</code><br>
<!-- -->修改远程仓库的名字，同样也会修改你所有远程跟踪的分支名字。 那些过去引用 oldname/master 的现在会引用 newname/master。</p>
</li>
<li>
<p><code>git remote remove &lt;remote&gt;</code><br>
<!-- -->删除远程仓库，一旦你使用这种方式删除了一个远程仓库，那么所有和这个远程仓库相关的远程跟踪分支以及配置信息也会一起被删除。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="从远程仓库中抓取和拉取">从远程仓库中抓取和拉取<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E4%BB%8E%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E4%B8%AD%E6%8A%93%E5%8F%96%E5%92%8C%E6%8B%89%E5%8F%96" class="hash-link" aria-label="从远程仓库中抓取和拉取的直接链接" title="从远程仓库中抓取和拉取的直接链接">​</a></h3>
<ul>
<li>
<p><code>git fetch &lt;remote&gt;</code><br>
<!-- -->从远程仓库中抓取所有本地仓库没有的数据（包括提交对象，文件快照对象，树对象等），执行完成之后，会拥有那个仓库 <strong>所有</strong> 分支的引用，可以合并到当前分支进行查看。</p>
</li>
<li>
<p><code>git pull</code><br>
<!-- -->如果你的当前分支设置了跟踪远程分支，那么可以用 git pull 命令来自动抓取后合并该远程分支到当前分支。</p>
</li>
</ul>
<details class="details_MWPH alert alert--info details_fvjc" data-collapsed="true"><summary>为什么 git fetch 命令执行了之后工作目录没有任何变化</summary><div><div class="collapsibleContent_R17e"><div><p>抓取实际上会完成以下操作：</p><ol>
<li>将所有本地没有的数据抓取到本地仓库（包括提交对象）</li>
<li>在本地会创建跟踪分支来跟踪对应的远程分支。这个跟踪分支我们并不能去移动它，只有在从远程仓库抓取数据有更新时自己移动至对应提交对象上。</li>
</ol><p>抓取前：
<img loading="lazy" alt="alt 抓取前" src="https://drbear.vercel.app/assets/images/before-fetch-8de77de9fd69242d057e9d94fccda517.png" width="657" height="404" class="img_KnJ7"></p><p>抓取后：
<img loading="lazy" alt="alt 抓取后" src="https://drbear.vercel.app/assets/images/after-fetch-173dae3bd9d2d3db03fb0911f8586277.png" width="657" height="483" class="img_KnJ7"></p><p>从上面的图可以看到，git fetch 命令的确将数据抓取到本地仓库了，但是只是创建了一个跟踪分支来指向远程仓库的提交记录，并没有将这个分支合并到当前分支上，那自然也不会在当前分支看到远程仓库的记录。</p></div></div></div></details>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="推送到远程仓库">推送到远程仓库<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%8E%A8%E9%80%81%E5%88%B0%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93" class="hash-link" aria-label="推送到远程仓库的直接链接" title="推送到远程仓库的直接链接">​</a></h3>
<ul>
<li><code>git push &lt;remote&gt; &lt;branch&gt;</code><br>
<!-- -->只有当你有所克隆服务器的写入权限，并且之前没有人推送过时，这条命令才能生效。当你和其他人在同一时间克隆，他们先推送到上游然后你再推送到上游，你的推送就会毫无疑问地被拒绝。你必须先抓取他们的工作并将其合并进你的工作后才能推送。</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="打标签">打标签<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%89%93%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="打标签的直接链接" title="打标签的直接链接">​</a></h2>
<p>其他版本控制系统（VCS）一样，Git 可以给仓库历史中的某一个提交打上标签，以示重要。比较有代表性的是人们会使用这个功能来标记发布结点（v1.0 、v2.0 等等）。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="列出标签">列出标签<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%97%E5%87%BA%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="列出标签的直接链接" title="列出标签的直接链接">​</a></h3>
<ul>
<li>
<p><code>git tag</code><br>
<!-- -->列出已有的标签清单，这个命令以字母顺序列出标签。</p>
</li>
<li>
<p><code>git tag -l</code> 或 <code>git tag --list</code><br>
<!-- -->列出已有的标签清单。</p>
</li>
<li>
<p><code>git tag -l "glob模式字符串"</code> 或者 <code>git tag --list "glob模式字符串"</code><br>
<!-- -->列出匹配指定模式的标签清单。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="查看标签信息">查看标签信息<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E6%9F%A5%E7%9C%8B%E6%A0%87%E7%AD%BE%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="查看标签信息的直接链接" title="查看标签信息的直接链接">​</a></h3>
<ul>
<li><code>git show &lt;tagname&gt;</code><br>
<!-- -->看到标签信息和与之对应的提交信息。</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="创建标签">创建标签<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%9B%E5%BB%BA%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="创建标签的直接链接" title="创建标签的直接链接">​</a></h3>
<p>Git 支持两种标签：轻量标签（lightweight）与附注标签（annotated）。</p>
<p><strong>轻量标签</strong>很像一个不会改变的分支——它只是某个特定提交的引用。</p>
<p>而<strong>附注标签</strong>是存储在 Git 数据库中的一个完整对象， 它们是可以被校验的，其中包含打标签者的名字、电子邮件地址、日期时间， 此外还有一个标签信息，并且可以使用 GNU Privacy Guard （GPG）签名并验证。 通常会建议创建附注标签，这样你可以拥有以上所有信息。但是如果你只是想用一个临时的标签， 或者因为某些原因不想要保存这些信息，那么也可以用轻量标签。</p>
<ul>
<li>
<p><code>git tag -a &lt;tagname&gt;</code>
给最近的提交对象添加附注标签。-a 选项说明我们生成的标签是附注标签。</p>
</li>
<li>
<p><code>git tag -m "description"</code><br>
<!-- -->-m 选项指定了一条将会存储在标签中的信息。如果没有为附注标签指定一条信息，Git 会启动编辑器要求你输入信息。</p>
</li>
<li>
<p><code>git tag &lt;tagname&gt;</code><br>
<!-- -->给提交打轻量标签，轻量标签本质上是将提交校验和存储到一个文件中，是提交对象的引用。</p>
</li>
<li>
<p><code>git tag [-a] &lt;tagname&gt; &lt;SHA1&gt;</code><br>
<!-- -->后期给提交打标签，可以选择轻量标签或者附注标签。SHA1 就是我们指定的提交。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="共享标签">共享标签<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%85%B1%E4%BA%AB%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="共享标签的直接链接" title="共享标签的直接链接">​</a></h3>
<ul>
<li>
<p><code>git push &lt;remote&gt; &lt;tagname&gt;</code><br>
<!-- -->默认情况下，git push 命令并不会传送标签到远程仓库服务器上。在创建完标签后你必须显式地推送标签到共享服务器上。</p>
</li>
<li>
<p><code>git push &lt;remote&gt; --tags</code><br>
<!-- -->如果想要一次性推送很多标签，也可以使用带有 --tags 选项的 git push 命令。 这将会把所有不在远程仓库服务器上的标签全部传送到那里。这个命令不会区分轻量标签和附注标签。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="删除标签">删除标签<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%A0%E9%99%A4%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="删除标签的直接链接" title="删除标签的直接链接">​</a></h3>
<ul>
<li>
<p><code>git tag -d &lt;tagname&gt;</code><br>
<!-- -->删除掉你本地仓库上的标签。</p>
</li>
<li>
<p><code>git push &lt;remote&gt; --delete &lt;tagname&gt;</code><br>
<!-- -->删除远程仓库上的标签。</p>
</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-分支">Git 分支<a href="https://drbear.vercel.app/blog/Git%20common%20command#git-%E5%88%86%E6%94%AF" class="hash-link" aria-label="Git 分支的直接链接" title="Git 分支的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="分支查看">分支查看<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%86%E6%94%AF%E6%9F%A5%E7%9C%8B" class="hash-link" aria-label="分支查看的直接链接" title="分支查看的直接链接">​</a></h3>
<p>我们常常会想查看有什么分支，以及分支指向什么提交对象，这需要用到分支查看指令。</p>
<ul>
<li>
<p><code>git branch</code><br>
<!-- -->查看有哪些本地分支</p>
</li>
<li>
<p><code>git branch -v</code><br>
<!-- -->列出所有本地分支的分支名称，指向的提交对象的校验和，提交记录的描述信息等内容</p>
</li>
<li>
<p><code>git branch -vv</code><br>
<!-- -->比上一条命令包含更多的信息，如每一个分支正在跟踪哪个远程分支与本地分支是否是领先、落后或是都有。<strong>需要重点注意的一点是这些信息来自于你从每个服务器上最后一次抓取的数据。这个命令并没有连接服务器，它只会告诉你关于本地缓存的服务器数据。</strong></p>
</li>
<li>
<p><code>git log --decorate</code><br>
<!-- -->这是查看提交记录，但是在显示的时候，也会显示分支指向哪个提交记录。</p>
</li>
<li>
<p><code>git branch --merged [&lt;branch&gt;]</code><br>
<!-- -->查看已经合并到指定分支的分支有哪些，若没有指定分支，则默认为当前分支</p>
</li>
<li>
<p><code>git branch --no-merged [&lt;branch&gt;]</code><br>
<!-- -->查看尚未合并到指定分支的分支有哪些，若没有指定分支，则默认为当前分支</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="分支创建">分支创建<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%86%E6%94%AF%E5%88%9B%E5%BB%BA" class="hash-link" aria-label="分支创建的直接链接" title="分支创建的直接链接">​</a></h3>
<ul>
<li>
<p><code>git branch &lt;branch&gt;</code><br>
<!-- -->在当前所在的提交对象创建一个指针。这个命令只会创建一个分支，并不会切换到这个分支上去。</p>
</li>
<li>
<p><code>git branch &lt;branch&gt; &lt;SHA1&gt;</code><br>
<!-- -->给指定的提交对象创建一个分支指向它，但并不会切换到这个分支上。</p>
</li>
<li>
<p><code>git checkout -b &lt;branch&gt;</code><br>
<!-- -->在当前所在的提交创建一个分支，并且立刻切换到这个分支上。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="分支切换">分支切换<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%86%E6%94%AF%E5%88%87%E6%8D%A2" class="hash-link" aria-label="分支切换的直接链接" title="分支切换的直接链接">​</a></h3>
<ul>
<li>
<p><code>git checkout &lt;branch&gt;</code><br>
<!-- -->切换到一个已存在的分支。这个命令实际上完成了两件事情：一是使 HEAD 指向指定分支，二是将工作目录恢复成该分支所指向的快照内容。</p>
</li>
<li>
<p><code>git checkout -b &lt;branch&gt;</code><br>
<!-- -->在当前所在的提交创建一个分支，并且立刻切换到这个分支上。</p>
</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>分支切换会改变你工作目录中的文件</div><div class="admonitionContent_QWhA"><p>在切换分支时，一定要注意你工作目录里的文件会被改变。 如果是切换到一个较旧的分支，你的工作目录会恢复到该分支最后一次提交时的样子。 如果 Git 不能干净利落地完成这个任务，它将禁止切换分支。实际情况中，可能需要你临时切换到某一个分支上进行工作，但是你当前工作目录内容还没有修改完，而且你并不希望就这些修改内容形成一次提交信息。这里就需要用到[贮藏工具]</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="删除分支">删除分支<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%A0%E9%99%A4%E5%88%86%E6%94%AF" class="hash-link" aria-label="删除分支的直接链接" title="删除分支的直接链接">​</a></h3>
<p>当我们不小心创建了一个自己不需要的分支之后，或者说这个分支的任务已经完成，我们会想删除这个分支。我们可以既可以删除本地分支，也可以删除远程分支。</p>
<ul>
<li>
<p><code>git branch -d &lt;branch&gt;</code><br>
<!-- -->删除本地分支</p>
</li>
<li>
<p><code>git push &lt;remote&gt; --delete &lt;branch&gt;</code><br>
<!-- -->从服务器上删除分支，基本上这个命令做的只是从服务器上移除这个指针。Git 服务器通常会保留数据一段时间直到垃圾回收运行，所以如果不小心删除掉了，通常是很容易恢复的。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="分支合并">分支合并<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E5%88%86%E6%94%AF%E5%90%88%E5%B9%B6" class="hash-link" aria-label="分支合并的直接链接" title="分支合并的直接链接">​</a></h3>
<p>在将主题分支修改完成后，我们会想将这个分支合并到主分支；或者在提交更新时，我们首先要将别人的更新拉取下来合并到自己的更新之后才能提交。</p>
<ul>
<li><code>git merge &lt;branch&gt;</code><br>
<!-- -->将指定的分支合并到当前分支，注意：当前是在主分支，而指定的分支是主题分支。</li>
</ul>
<p>分支的合并会出现 <strong>快进</strong>（fast-forward），<strong>三方合并</strong>（当前分支、被合并的分支、两者的共同祖先分支三者合并，最终会得到一个新的提交，并让当前分支指向这个新建的提交）等情况。</p>
<p>在合并两者对同一个地方都有进行修改的时候，还会引发 <strong>冲突</strong> ，当引发了冲突之后，我们可以利用 <code>git status</code> 来查看处于未合并状态的文件有哪些，然后就可以到这些文件中进行手动修改。在修改完毕之后，我们需要手动将这一次合并进行 commit。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="跟踪远程分支">跟踪远程分支<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%B7%9F%E8%B8%AA%E8%BF%9C%E7%A8%8B%E5%88%86%E6%94%AF" class="hash-link" aria-label="跟踪远程分支的直接链接" title="跟踪远程分支的直接链接">​</a></h3>
<p>我们在进行<code>git fetch &lt;remote&gt;</code>之后会将原有的远程跟踪分支移动到更新之后的位置，同时还会创建之前没有的远程跟踪分支，<strong>但并不会创建一个工作副本，也不会新建一个跟踪分支来跟踪这个远程分支</strong>，我们可能会想要跟踪这个新建的远程跟踪分支。不仅如此，我们在写代码的时候，也可能会想修改某个分支跟踪的上流分支。这就需要使用到分支跟踪的相关命令。</p>
<ul>
<li>
<p><code>git branch -u &lt;remote&gt;/&lt;branch&gt;</code> 或 <code>git branch --set-upstream-to &lt;remote&gt;/branch</code><br>
<!-- -->设置已有的本地分支跟踪一个刚刚拉取下来的远程分支，或者想要修改正在跟踪的上游分支</p>
</li>
<li>
<p><code>git checkout -b &lt;branch&gt; &lt;remote&gt;/&lt;branch&gt;</code><br>
<!-- -->创建一个跟踪分支，跟踪指定的远程分支，然后切换到该分支上进行工作</p>
</li>
<li>
<p><code>git checkout --track &lt;remote&gt;/&lt;branch&gt;</code><br>
<!-- -->上个命令的快捷方式，创建的跟踪分支名称默认与远程跟踪分支名称一致</p>
</li>
<li>
<p><code>git checkout &lt;branch&gt;</code><br>
<!-- -->如果你尝试检出的分支（1）不存在且（2）刚好只有一个名字与之匹配的远程分支，那么 Git 就会为你创建一个跟踪分支。</p>
</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-工具">Git 工具<a href="https://drbear.vercel.app/blog/Git%20common%20command#git-%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="Git 工具的直接链接" title="Git 工具的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="贮藏与清理">贮藏与清理<a href="https://drbear.vercel.app/blog/Git%20common%20command#%E8%B4%AE%E8%97%8F%E4%B8%8E%E6%B8%85%E7%90%86" class="hash-link" aria-label="贮藏与清理的直接链接" title="贮藏与清理的直接链接">​</a></h3>
<p>当我们在当前分支已经完成了一些工作，此时又想切换回另一个版本进行工作。直接进行 <code>checkout</code> 分支切换会要求工作区干净，而你又不想将这一点修改单独进行一次提交，就需要进行贮藏。针对这个问题的答案是 git stash 命令。</p>
<p>贮藏（stash）会处理工作目录的脏的状态——即跟踪文件的修改与暂存的改动——然后<strong>将未完成的修改保存到一个栈上， 而你可以在任何时候重新应用这些改动（甚至在不同的分支上）</strong>。若想了解更多内容，可以查询<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E8%B4%AE%E8%97%8F%E4%B8%8E%E6%B8%85%E7%90%86#_git_stashing" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<ul>
<li>
<p><code>git stash</code><br>
<!-- -->贮藏修改，将新的贮藏推送到栈上，这个贮藏的内容包括暂存区和工作区的内容。此时，当我们切换到别的分支进行工作的时候，这个修改依旧贮藏在栈上，我们可以将其应用到当前目录上。</p>
</li>
<li>
<p><code>git stash list</code><br>
<!-- -->查看贮藏的修改。</p>
</li>
<li>
<p><code>git stash apply</code><br>
<!-- -->将最近的贮藏的工作重新应用，不会将之前暂存的修改重新暂存起来。</p>
</li>
<li>
<p><code>git stash apply &lt;stashname&gt;</code>
应用指定的贮藏，不会将之前暂存的修改重新暂存起来。</p>
</li>
<li>
<p><code>git stash apply --index</code><br>
<!-- -->应用最近的贮藏工作，还会将贮藏时的暂存文件重新暂存。</p>
</li>
<li>
<p><code>git stash drop &lt;stashname&gt;</code><br>
<!-- -->应用贮藏的时候，并不会将贮藏记录从栈中移除。在我们应用了相应的贮藏之后，若想将该贮藏从栈中移除，就需要用到这个命令。</p>
</li>
<li>
<p><code>git stash pop</code><br>
<!-- -->应用贮藏然后立即从栈上扔掉它。</p>
</li>
</ul>
<div class="theme-admonition theme-admonition-warning admonition_kr2c alert alert--warning"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>可能的出错情况</div><div class="admonitionContent_QWhA"><p>在Powershell中使用 git stash drop stash@<!-- -->0<!-- -->时会报错，报错显示为</p><p><img loading="lazy" alt="alt stash-drop报错" src="https://drbear.vercel.app/assets/images/git-stash-error-b835caba932becfa5128bce0b6952dca.png" width="552" height="213" class="img_KnJ7"></p><p>这种问题是因为花括号在 PowerShell 中被认为是代码块执行标识符，若想正常使用，可用反引号 `进行转义</p><p><img loading="lazy" alt="alt stash-drop" src="https://drbear.vercel.app/assets/images/git-stash-drop-5729d8330e6da27695d400253b566d18.png" width="610" height="108" class="img_KnJ7"></p></div></div>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="Git" term="Git"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Git基础]]></title>
        <id>https://drbear.vercel.app/blog/Git-base</id>
        <link href="https://drbear.vercel.app/blog/Git-base"/>
        <updated>2024-04-01T22:00:00.000Z</updated>
        <summary type="html"><![CDATA[记录了 Git 的一些重点特性]]></summary>
        <content type="html"><![CDATA[<p>在学习 Git 的过程中，我认为 Git 就是一个工具，对于这个工具的学习始终需要结合真正的实际操作来进行。因此，我并不想将 Git 所有的内容都记录下来，只是记录学习 Git 中了解的一些重点。其余的内容可以在使用时遇到了再进行查询。</p>
<ul>
<li><a href="https://git-scm.com/book/zh/v2" target="_blank" rel="noopener noreferrer">Git Pro</a> 官方网站上的 Git 教材，有众多例子解释，还有专门的中文翻译文档。</li>
</ul>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-直接记录快照">Git 直接记录快照<a href="https://drbear.vercel.app/blog/Git-base#git-%E7%9B%B4%E6%8E%A5%E8%AE%B0%E5%BD%95%E5%BF%AB%E7%85%A7" class="hash-link" aria-label="Git 直接记录快照的直接链接" title="Git 直接记录快照的直接链接">​</a></h2>
<p>Git 和其它版本控制系统（包括 Subversion 和近似工具）的主要差别在于 Git 对待数据的方式。</p>
<p>从概念上来说，其它大部分系统以文件变更列表的方式存储信息，这类系统（CVS、Subversion、Perforce 等等） 将它们存储的信息看作是一组基本文件和每个文件随时间逐步累积的差异（它们通常称作基于差异（delta-based）的版本控制）。</p>
<p><img loading="lazy" alt="alt 基于差异" src="https://drbear.vercel.app/assets/images/delta-base-469394951ca23f0b527ab4ee32a9d97a.png" width="689" height="277" class="img_KnJ7"></p>
<p>Git 不按照以上方式对待或保存数据。反之，Git 更像是把数据看作是对小型文件系统的一系列快照。在 Git 中，每当你提交更新或保存项目状态时，它基本上就会对当时的全部文件创建一个快照并保存这个快照的索引。为了效率，如果文件没有修改，Git 不再重新存储该文件，而是只保留一个链接指向之前存储的文件。Git 对待数据更像是一个快照流。</p>
<p><img loading="lazy" alt="alt 快照" src="https://drbear.vercel.app/assets/images/quick-photo-8e77258847ef60a4262aecc68fe26c35.png" width="680" height="270" class="img_KnJ7"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-的文件状态">Git 的文件状态<a href="https://drbear.vercel.app/blog/Git-base#git-%E7%9A%84%E6%96%87%E4%BB%B6%E7%8A%B6%E6%80%81" class="hash-link" aria-label="Git 的文件状态的直接链接" title="Git 的文件状态的直接链接">​</a></h2>
<p>Git 有三种状态，文件可能处于其中之一。</p>
<ul>
<li>已修改（modified）表示修改了文件，但还没保存到数据库中。</li>
<li>已暂存（staged）表示对一个已修改文件的当前版本做了标记，使之包含在下次提交的快照中。</li>
<li>已提交（committed）表示数据已经安全地保存在本地数据库中。</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="三个阶段">三个阶段<a href="https://drbear.vercel.app/blog/Git-base#%E4%B8%89%E4%B8%AA%E9%98%B6%E6%AE%B5" class="hash-link" aria-label="三个阶段的直接链接" title="三个阶段的直接链接">​</a></h3>
<p>这会让我们的 Git 项目拥有三个阶段：工作区、暂存区以及 Git 仓库目录。</p>
<p><img loading="lazy" alt="alt git 三个分区" src="https://drbear.vercel.app/assets/images/git_area-695155fef0ce95d33cd4e1a10da05378.png" width="657" height="363" class="img_KnJ7"></p>
<ul>
<li>
<p>工作区：项目的某个版本独立提取出来的内容。这些从 Git 仓库的压缩数据库中提取出来的文件，放在磁盘上供你使用或修改。也就是我们打开 Git 仓库时除了 .git 目录以外的其他内容。</p>
</li>
<li>
<p>暂存区：本质是一个文件（<u>.git/index</u>），保存了下次将要提交的文件列表信息，一般在 Git 仓库目录中。按照 Git 的术语叫做“索引”，不过一般说法还是叫“暂存区”。暂存区并不是真的一个存储了修改的文件的存储区。假如我们将所有暂存的内容全部提交了之后，我们再使用 <code>git ls-files</code> 命令，我们依旧能看到暂存区的文件列表。</p>
</li>
<li>
<p>Git 仓库目录：Git 用来保存项目的元数据和对象数据库的地方。这是 Git 中最重要的部分，从其它计算机克隆仓库时，复制的就是这里的数据。</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="常见工作流程">常见工作流程<a href="https://drbear.vercel.app/blog/Git-base#%E5%B8%B8%E8%A7%81%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="常见工作流程的直接链接" title="常见工作流程的直接链接">​</a></h3>
<p>我们平常在使用 Git 时，工作流程一般包括但不限于以下几步：</p>
<ol>
<li>修改工作目录中的内容，或者是删除，添加某些文件</li>
<li>将这些修改暂存</li>
<li>确定好修改完毕之后，将快照永久性地提交至 Git 仓库目录中</li>
</ol>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">暂存操作</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">提交操作</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz"><p>暂存背后的操作为：为每一个文件计算校验和（使用 SHA-1 哈希算法），然后会把当前版本的文件快照保存到 Git 仓库中（Git 使用 blob 对象来保存它们），最终将校验和加入到暂存区域等待提交。</p></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><p>第一次提交：Git 会先计算每一个子目录的校验和， 然后在 Git 仓库中这些校验和保存为树对象。随后，Git 便会创建一个提交对象，它除了包含上面提到的那些信息外，还包含指向这个树对象（项目根目录）的指针。 如此一来，Git 就可以在需要的时候重现此次保存的快照。</p><p><img loading="lazy" alt="alt 第一次提交" src="https://drbear.vercel.app/assets/images/first-commit-9cdd30fe51873a065e779ea12700baa9.png" width="678" height="372" class="img_KnJ7"></p><p>后续提交：提交对象除了包含上述内容，还会包含一个指向父对象的指针</p><p><img loading="lazy" alt="alt 后续提交" src="https://drbear.vercel.app/assets/images/latter-commit-71cd35057cdda71f225d41ed5b92e958.png" width="673" height="234" class="img_KnJ7"></p></div></div></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="为什么需要暂存区">为什么需要暂存区<a href="https://drbear.vercel.app/blog/Git-base#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E6%9A%82%E5%AD%98%E5%8C%BA" class="hash-link" aria-label="为什么需要暂存区的直接链接" title="为什么需要暂存区的直接链��接">​</a></h3>
<p>我们在进行工作的时候，有时候可能会发现——文件暂存之后就直接提交了。那么为什么需要暂存区呢，直接提交至版本库不就好了吗？</p>
<p>这是因为：<strong>暂存区可以让我们选择什么文件需要提交，什么文件暂时不需要提交</strong>。我们可以发现，Git 也提供了跳过暂存区直接提交的功能，只需要使用 <code>git commit -a</code> 命令即可做到，这个命令的实际结果是：将 <strong>所有</strong> 已经暂存的文件进行提交。这里并不能让我们进行筛选。</p>
<p>我们举一个例子：当前你在你的分支上完成了功能 A 的开发，并测试了稳定性，想要将其提交并合并至主分支。但同时，你的工作目录里面还包含了功能 B 的修改，而且修改进度只有 50%，这并没有测试其稳定性，贸然将其合并进主分支可能会造成主分支不稳定。同时，若你两个修改一起提交，提交描述一般是：功能 A 完成 100%，功能 B 完成 50%。而下次完成了功能 B 的完整功能后，提交描述为：功能 B 完成 50%，这会使得提交记录的混乱。</p>
<p>很明显，我们跟希望在上面这个例子中仅提交功能 A 的代码，而不提交功能 B 的代码，这就需要我们使用暂存区。因为提交只能一次性提交所有。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="另一种文件状态描述">另一种文件状态描述<a href="https://drbear.vercel.app/blog/Git-base#%E5%8F%A6%E4%B8%80%E7%A7%8D%E6%96%87%E4%BB%B6%E7%8A%B6%E6%80%81%E6%8F%8F%E8%BF%B0" class="hash-link" aria-label="另一种文件状态描述的直接链接" title="另一种文件状态描述的直接链接">​</a></h3>
<p>先前提到的三种文件状态描述主要是根据文件处于 Git 哪个分区来决定的，而接下来提到的文件状态时根据文件是否被 Git 知道所划分的，划分为：<strong>已跟踪</strong> 和 <strong>未跟踪</strong> 。</p>
<p>已跟踪的文件是指那些被纳入了版本控制的文件，在上一次快照中有它们的记录，在工作一段时间后， 它们的状态可能是未修改，已修改或已放入暂存区。简而言之，已跟踪的文件就是 Git 已经知道的文件。</p>
<p>工作目录中除已跟踪文件外的其它所有文件都属于未跟踪文件，它们既不存在于上次快照的记录中，也没有被放入暂存区，新增加的文件就属于这一状态。初次克隆某个仓库的时候，工作目录中的所有文件都属于已跟踪文件，并处于未修改状态，因为 Git 刚刚检出了它们，而你尚未编辑过它们。</p>
<p><img loading="lazy" alt="alt 另一种文件状态描述" src="https://drbear.vercel.app/assets/images/state-96b7d423f968aa3cc509b6c54a5be277.png" width="692" height="287" class="img_KnJ7"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-分支">Git 分支<a href="https://drbear.vercel.app/blog/Git-base#git-%E5%88%86%E6%94%AF" class="hash-link" aria-label="Git 分支的直接链接" title="Git 分支的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="为什么要使用分支">为什么要使用分支？<a href="https://drbear.vercel.app/blog/Git-base#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E4%BD%BF%E7%94%A8%E5%88%86%E6%94%AF" class="hash-link" aria-label="为什么要使用分支？的直接链接" title="为什么要使用分支？的直接链接">​</a></h3>
<p>我们为什么需要使用分支呢？这是因为使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线。举一个分支使用的例子：当我们正在开发一个项目的时候，这个项目已经有了稳定的版本了，这个稳定的版本在 master 分支上。我们现在想给这个项目添加一个新的功能，为了不影响这个稳定的版本，我们可以新建一个分支，在这个分支上进行开发，然后在这个功能开发完毕之后再合并入稳定的 master 分支。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="git-分支的本质">Git 分支的本质<a href="https://drbear.vercel.app/blog/Git-base#git-%E5%88%86%E6%94%AF%E7%9A%84%E6%9C%AC%E8%B4%A8" class="hash-link" aria-label="Git 分支的本质的直接链接" title="Git 分支的本质的直��接链接">​</a></h3>
<p>分支是 Git 的一个十分重要的特性，这个特性并不是说只有 Git 独自拥有，许多其他的版本管理系统一样拥有这一特性。但是对于其他版本管理系统而言，创建分支意味着要完全创建一个源代码目录的副本，这是一个略微低效的过程。</p>
<p>而 Git 处理分支的方式十分轻量。这是因为：<strong>Git 的分支本质上仅仅是指向提交对象的可变指针。</strong> 由于 Git 的分支实质上仅是包含所指对象校验和（长度为 40 的 SHA-1 值字符串）的文件，所以它的创建和销毁都异常高效。创建一个新分支就相当于往一个文件中写入 41 个字节（40 个字符和 1 个换行符），如此的简单能不快吗？</p>
<p>我们上面提到，提交操作实际上是创建了提交对象。当我们进行多次提交之后，提交对象形成一个链式结构，每一个操作对象都指向它的父对象，有些提交对象是由合并得到的，这种提交对象存在多个父对象。<strong>而分支在提交的时候会自动向前，指向最新的提交对象。</strong></p>
<p><img loading="lazy" alt="alt 分支" src="https://drbear.vercel.app/assets/images/branch-8b598e749b07ef1755131831b1ca0abe.png" width="674" height="351" class="img_KnJ7"></p>
<p>我们可以创建多个分支，这样提交的记录就可能会产生分叉。</p>
<p><img loading="lazy" alt="alt 分叉" src="https://drbear.vercel.app/assets/images/forked-branch-78e43b6e9d1f9e881f41ea7aa7732d7a.png" width="655" height="356" class="img_KnJ7"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="head指针">HEAD指针<a href="https://drbear.vercel.app/blog/Git-base#head%E6%8C%87%E9%92%88" class="hash-link" aria-label="HEAD指针的直接链接" title="HEAD指针的直接链接">​</a></h3>
<p>在创建了多个分支之后，Git 是怎么知道当前在哪一个分支上的呢？这是因为它有 HEAD 指针，指向了当前所在的本地分支。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="远程分支">远程分支<a href="https://drbear.vercel.app/blog/Git-base#%E8%BF%9C%E7%A8%8B%E5%88%86%E6%94%AF" class="hash-link" aria-label="远程分支的直接链接" title="远程分支的直接链接">​</a></h3>
<p>远程跟踪分支是远程分支状态的引用。它们是你<strong>无法移动的本地引用</strong>。一旦你进行了网络通信， Git 就会为你移动它们以精确反映远程仓库的状态。请将它们看做书签，这样可以<strong>提醒你该分支在远程仓库中的位置就是你最后一次连接到它们的位置。</strong></p>
<p>它们以 <code>&lt;remote&gt;/&lt;branch&gt;</code> 的形式命名。例如，如果你想要看你最后一次与远程仓库 origin 通信时 master 分支的状态，你可以查看 origin/master 分支。</p>
<p>在我们将数据中远程仓库中拉取到本地仓库的时候，不仅拉取了数据，同时还会新建与远程仓库分支对应的本地远程跟踪分支，并将本地远程跟踪分支指向对应远程分支指向的提交对象。</p>
<p>这里若想看例子，可以查看<a href="https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E8%BF%9C%E7%A8%8B%E5%88%86%E6%94%AF" target="_blank" rel="noopener noreferrer">官方文档</a>，在这篇文章中，有一个例子很好地解释了远程跟踪分支。</p>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="Git" term="Git"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[docusaurus博客常用的文档样式]]></title>
        <id>https://drbear.vercel.app/blog/interest/common_mdx</id>
        <link href="https://drbear.vercel.app/blog/interest/common_mdx"/>
        <updated>2024-03-25T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[记录日常使用的一些样式，方便使用时直接复制]]></summary>
        <content type="html"><![CDATA[<p>在写文档的时候，我有时会觉得单纯的markdown语法不能将我要表达的内容清楚地表达出来，或者是显示的样式并不美观。这时候，我们可以用docusaurus支持的 <code>.mdx</code> 文件类型来编写我们的文档。在这个类型的文档中，我们可以加入 javascript 语法，引入 JSX 组件，利用组件使得内容更加清晰，更加美观。</p>
<p>这篇文章主要用来记录我用过的文档中的样式，并且给了相应的链接。</p>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="jsx-组件">JSX 组件<a href="https://drbear.vercel.app/blog/interest/common_mdx#jsx-%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="JSX 组件的直接链接" title="JSX 组件的直接链接">​</a></h2>
<p>这个博客的特点就是引入了 mdx v3，这让我们在写 markdown 文档的时候可以使用 JSX 组件。若要使用组件，可以查阅下面资料来了解相关内容：</p>
<ul>
<li><a href="https://docusaurus.io/zh-CN/docs/markdown-features/react" target="_blank" rel="noopener noreferrer">MDX和React</a></li>
<li><a href="https://docusaurus.io/zh-CN/docs/markdown-features/plugins" target="_blank" rel="noopener noreferrer">MDX插件</a></li>
<li><a href="https://docusaurus.io/zh-CN/docs/swizzling" target="_blank" rel="noopener noreferrer">Swizzle--调配组件</a></li>
<li><a href="https://kuizuo.cn/docs/docusaurus-component" target="_blank" rel="noopener noreferrer">swizzle主题组件</a>（此文出自<a href="https://kuizuo.cn/" target="_blank" rel="noopener noreferrer">愧怍</a>博主）</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="高亮块">高亮块<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E9%AB%98%E4%BA%AE%E5%9D%97" class="hash-link" aria-label="高亮块的直接链接" title="高亮块的直接链接">​</a></h2>
<p>有两种方式可以采用：导出组件，导入组件</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="导出组件">导出组件<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E5%AF%BC%E5%87%BA%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="导出组件的直接链接" title="导出组件的直接链接">​</a></h3>
<p>当我们在页面中自定义组件的时候，我们需要导出这个组件，只有使用<code>export</code>的时候不会被解释为markdown语法，才能正常使用自定义组件。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name" style="color:#d73a49">Highlight</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter">children</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> color</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">span</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    style</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">backgroundColor</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> color</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">borderRadius</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'2px'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">color</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'#fff'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">padding</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'0.2rem'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">span</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-markup codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">使用这个组件<span style="flex:1;text-align:right">markup</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markup codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Highlight</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">color</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">#25c2a0</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Docusaurus green</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Highlight</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"> and </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Highlight</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">color</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">#1877F2</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Facebook blue</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Highlight</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"> are my favorite colors.</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><p><span style="background-color:#25c2a0;border-radius:2px;color:#fff;padding:0.2rem">绿色高亮</span> and
<span style="background-color:#1877F2;border-radius:2px;color:#fff;padding:0.2rem">蓝色高亮</span></p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="导入组件">导入组件<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E5%AF%BC%E5%85%A5%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="导入组件的直接链接" title="导入组件的直接链接">​</a></h3>
<p>还有一种更简单的方式，我们可以将这个高亮样式定义为一个组件，需要的时候直接导入组件即可。</p>
<p>我们将组件定义在<code>@site/src/components</code>路径下，组件文件夹下至少要包含一个文件<code>index.json</code>，这个文件描述了组件的内容。若想调整样式，我们可以在组件文件夹下加上一个<code>style.module.css</code>文件来配置组件的样式。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">index.json<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 这里color使用了默认值，若没有传值，则默认这个颜色</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">Highlight</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> color</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"#fbb656"</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">span style</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">backgroundColor</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> color</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">borderRadius</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'2px'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">color</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'#fff'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">padding</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'0.2rem'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">span</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token maybe-class-name">Highlight</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-markup codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">使用高亮组件<span style="flex:1;text-align:right">markup</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markup codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">import HighLight from '@site/src/components/HighLight'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">HighLight</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">默认颜色</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">HighLight</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"> 和 </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">HighLight</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">color</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">#25c2a0</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">绿色</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><p><span style="background-color:#fbb656;border-radius:2px;color:#fff;padding:0.2rem">默认颜色</span> 和 <span style="background-color:#25c2a0;border-radius:2px;color:#fff;padding:0.2rem">绿色</span></p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="选项卡">选项卡<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E9%80%89%E9%A1%B9%E5%8D%A1" class="hash-link" aria-label="选项卡的直接链接" title="选项卡的直接链接">​</a></h2>
<p>官网文档讲述了选项卡如何导入，自定义选项卡。更多选项卡样式查看<a href="https://docusaurus.io/zh-CN/docs/markdown-features/tabs" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="一个选项卡">一个选项卡<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E4%B8%80%E4%B8%AA%E9%80%89%E9%A1%B9%E5%8D%A1" class="hash-link" aria-label="一个选项卡的直接链接" title="一个选项卡的直接链接">​</a></h3>
<div class="language-markup codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markup codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">import Tabs from '@theme/Tabs';</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">import TabItem from '@theme/TabItem';</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">apple</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Apple</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">default</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    This is an apple 🍎</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">orange</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Orange</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    This is an orange 🍊</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">banana</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Banana</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    This is a banana 🍌</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">Apple</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">Orange</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">Banana</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz"><p>This is an apple 🍎</p></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><p>This is an orange 🍊</p></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><p>This is a banana 🍌</p></div></div></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="多个选项卡">多个选项卡<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E5%A4%9A%E4%B8%AA%E9%80%89%E9%A1%B9%E5%8D%A1" class="hash-link" aria-label="多个选项卡的直接链接" title="多个选项卡的直接链接">​</a></h3>
<p>当选项卡有多个的时候，我们可以选择这些选项卡是否同步，若选项卡的选择需要同步的时候，我们就给这些选项卡设置相同的<code>groupId</code>属性</p>
<div class="language-markup codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markup codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">groupId</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">operating-systems</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">win</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Windows</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Use Ctrl + C to copy.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">mac</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">macOS</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Use Command + C to copy.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">groupId</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">operating-systems</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">win</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Windows</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Use Ctrl + V to paste.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">mac</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">macOS</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Use Command + V to paste.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">Windows</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">macOS</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz">Use Ctrl + C to copy.</div><div role="tabpanel" class="tabItem_yuxz" hidden="">Use Command + C to copy.</div></div></div><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">Windows</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">macOS</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz">Use Ctrl + V to paste.</div><div role="tabpanel" class="tabItem_yuxz" hidden="">Use Command + V to paste.</div></div></div></div></div>
<p>若选项卡的选择不需要同步，就设置不同的<code>groupId</code>即可</p>
<div class="language-markup codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markup codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">groupId</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">operating-systems</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">win</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Windows</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Windows in windows.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">mac</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">macOS</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">macOS is macOS.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">groupId</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">non-mac-operating-systems</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">win</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Windows</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Windows is windows.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">unix</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Unix</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Unix is unix.</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">TabItem</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">Tabs</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">Windows</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">macOS</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz">Windows in windows.</div><div role="tabpanel" class="tabItem_yuxz" hidden="">macOS is macOS.</div></div></div><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">Windows</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">Unix</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz">Windows is windows.</div><div role="tabpanel" class="tabItem_yuxz" hidden="">Unix is unix.</div></div></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="折叠块">折叠块<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E6%8A%98%E5%8F%A0%E5%9D%97" class="hash-link" aria-label="折叠块的直接链接" title="折叠块的直接链接">​</a></h2>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">details</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">summary</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Toggle me!</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">summary</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">This is the detailed content</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">br</span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">details</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">summary</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        Nested toggle! Some surprise inside...</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">summary</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">😲😲😲😲😲</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">details</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">details</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<details class="details_MWPH alert alert--info details_fvjc" data-collapsed="true"><summary>Toggle me!</summary><div><div class="collapsibleContent_R17e"><div><div>This is the detailed content</div><br><details class="details_MWPH alert alert--info details_fvjc" data-collapsed="true"><summary><p>Nested toggle! Some surprise inside...</p></summary><div><div class="collapsibleContent_R17e"><div>😲😲😲😲😲</div></div></div></details></div></div></div></details>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="链接">链接<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E9%93%BE%E6%8E%A5" class="hash-link" aria-label="链接的直接链接" title="链接的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="连接到当前文档的其他部分">连接到当前文档的其他部分<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E8%BF%9E%E6%8E%A5%E5%88%B0%E5%BD%93%E5%89%8D%E6%96%87%E6%A1%A3%E7%9A%84%E5%85%B6%E4%BB%96%E9%83%A8%E5%88%86" class="hash-link" aria-label="连接到当前文档的其他部分的直接链接" title="连接到当前文档的其他部分的直接链接">​</a></h3>
<div class="language-markdown codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-markdown codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token url" style="color:#36acaa">[</span><span class="token url content" style="color:#36acaa">高亮</span><span class="token url" style="color:#36acaa">](</span><span class="token url" style="color:#36acaa">#高亮块</span><span class="token url" style="color:#36acaa">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><a href="https://drbear.vercel.app/blog/interest/common_mdx#%E9%AB%98%E4%BA%AE%E5%9D%97">高亮</a></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="连接到另一个文档">连接到另一个文档<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E8%BF%9E%E6%8E%A5%E5%88%B0%E5%8F%A6%E4%B8%80%E4%B8%AA%E6%96%87%E6%A1%A3" class="hash-link" aria-label="连接到另一个文档的直接链接" title="连接到另一个文档的直接链接">​</a></h3>
<p><a href="https://drbear.vercel.app/blog/interest/modified_website">对博客主题的修改</a></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="代码块">代码块<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E4%BB%A3%E7%A0%81%E5%9D%97" class="hash-link" aria-label="代码块的直接链接" title="代码块的直接链接">​</a></h2>
<p>常见的代码块配置有以下几个</p>
<ol>
<li>代码块的题目 <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#code-title" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>代码块的语法高亮  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#syntax-highlighting" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>代码块的行高亮  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#line-highlighting" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>代码块的行数  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#line-numbering" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>可交互的代码块  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#interactive-code-editor" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>多语言代码块（例子：多个tab用不同的语言）  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks#multi-language-support-code-blocks" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
</ol>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">代码块实例<span style="flex:1;text-align:right">jsx</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187 codeBlockLinesWithNumbering_OFgW"><span class="token-line theme-code-block-highlighted-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">isBar</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain">    </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text">Bar</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text">Foo</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_iPqp" style="color:#393A34"><span class="codeLineNumber_F4P7"></span><span class="codeLineContent_pOih"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token maybe-class-name">MyComponent</span><span class="token punctuation" style="color:#393A34">;</span></span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="告示">告示<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E5%91%8A%E7%A4%BA" class="hash-link" aria-label="告示的直接链接" title="告示的直接链接">​</a></h2>
<ol>
<li>告示注意事项  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#usage-with-prettier" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>告示自定义题目  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#specifying-title" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>告示可以嵌套 <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#nested-admonitions" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>告示里面可以用MDX  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#admonitions-with-mdx" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>告示可以用别的方法，如用JSX来实现  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#usage-in-jsx" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
<li>告示可以自定义样式  <a href="https://docusaurus.io/zh-CN/docs/markdown-features/admonitions#customizing-admonitions" target="_blank" rel="noopener noreferrer"><strong>详情</strong></a></li>
</ol>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">note</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">info</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">tip</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">warning</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">danger</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz"><div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">note</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">告示</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">这是一条告示</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">info</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">信息</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">这是一条信息</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">tip</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">提示</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">这是一条提示</span><span class="token plain">    </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">warning</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">警告</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">这是一条警告</span><span class="token plain">  </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">danger</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">危险</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">这是一条危险通知</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">:</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">note</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">info</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">tip</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">warning</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">danger</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz"><div class="theme-admonition theme-admonition-note admonition_kr2c alert alert--secondary"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>告示</div><div class="admonitionContent_QWhA"><p>这是一条告示</p></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="theme-admonition theme-admonition-info admonition_kr2c alert alert--info"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>信息</div><div class="admonitionContent_QWhA"><p>这是一条信息</p></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="theme-admonition theme-admonition-tip admonition_kr2c alert alert--success"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_QWhA"><p>这是一条提示</p></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="theme-admonition theme-admonition-warning admonition_kr2c alert alert--warning"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>警告</div><div class="admonitionContent_QWhA"><p>这是一条警告</p></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="theme-admonition theme-admonition-danger admonition_kr2c alert alert--danger"><div class="admonitionHeading_bxTh"><span class="admonitionIcon_y2bu"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>危险</div><div class="admonitionContent_QWhA"><p>这是一条危险通知</p></div></div></div></div></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="浏览器窗口">浏览器窗口<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3" class="hash-link" aria-label="浏览器窗口的直接链接" title="浏览器窗口的直接链接">​</a></h2>
<ul>
<li>官方浏览器窗口样式</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">官方浏览器窗口样式<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">BrowserWindow</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@site/src/components/BrowserWindow'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">BrowserWindow</span><span class="token plain"> url</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token string" style="color:#e3116c">"https://drbear.vercel.app"</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">欢迎来到小熊博士的小窝！</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">BrowserWindow</span><span class="token operator" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y">https://drbear.vercel.app</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><p>欢迎来到小熊博士的小窝！</p></div></div>
<ul>
<li><a href="https://www.shaking.site/" target="_blank" rel="noopener noreferrer">shake博主</a>设计的浏览器窗口样式</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">shake博主设计的浏览器窗口样式<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">BrowserWindow</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@site/src/components/BrowserWindow'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">BrowserWindow</span><span class="token plain"> url</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token string" style="color:#e3116c">"https://drbear.vercel.app"</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">欢迎来到小熊博士的小窝！</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">BrowserWindow</span><span class="token operator" style="color:#393A34">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="browserWindow_n4ow"><div class="browserWindowHeader_Rps0"><div class="buttons_sM68"><span class="dot_Ke0C" style="background:#f25f58"></span><span class="dot_Ke0C" style="background:#fbbe3c"></span><span class="dot_Ke0C" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_dAEO"><a href="https://drbear.vercel.app/" target="_blank">https://drbear.vercel.app</a></div><div class="browserWindowMenuIcon_riuu"><div><span class="bar_rBx6"></span><span class="bar_rBx6"></span><span class="bar_rBx6"></span></div></div></div><div class="browserWindowBody_iYdh"><p>欢迎来到小熊博士的小窝！</p><span class="cursor_rX4K"></span></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="标题和目录">标题和目录<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E6%A0%87%E9%A2%98%E5%92%8C%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="标题和目录的直接链接" title="标题和目录的直接链接">​</a></h2>
<p>标题就用markdown的标准语法即可，而目录有自动生成的方法。可以查看<a href="https://docusaurus.io/zh-CN/docs/markdown-features/toc#inline-table-of-contents" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="资源">资源<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E8%B5%84%E6%BA%90" class="hash-link" aria-label="资源的直接链接" title="资源的直接链接">​</a></h2>
<p>图片、文件、内嵌图片</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="其他">其他<a href="https://drbear.vercel.app/blog/interest/common_mdx#%E5%85%B6%E4%BB%96" class="hash-link" aria-label="其他的直接链接" title="其他的直接链接">​</a></h2>
<p>后续内容用到了再补充</p>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="website" term="website"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[对博客主题的修改]]></title>
        <id>https://drbear.vercel.app/blog/interest/modified_website</id>
        <link href="https://drbear.vercel.app/blog/interest/modified_website"/>
        <updated>2024-03-25T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[修改博客主题]]></summary>
        <content type="html"><![CDATA[<p>由于docusaurus进行了更新，我就顺便更新了我的博客版本，还从官方的网站展示中找到了“愧怍”博主的主题，然后我就根据这个主题来进行修改得到我现在的博客主题，在修改过程中，我还借鉴了“快慢”博主的主题。可以参考以下链接：</p>
<ul>
<li><a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noopener noreferrer">docusaurus官网</a></li>
<li><a href="https://kuizuo.cn/docs/docusaurus-guides" target="_blank" rel="noopener noreferrer">愧怍博主的主题魔改</a></li>
<li><a href="https://www.shaking.site/docs/Docusaurus-guides" target="_blank" rel="noopener noreferrer">快慢博主的主题魔改</a></li>
</ul>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="前言">前言<a href="https://drbear.vercel.app/blog/interest/modified_website#%E5%89%8D%E8%A8%80" class="hash-link" aria-label="前言的直接链接" title="前言的直接链接">​</a></h2>
<p>修改博客主题对于不懂前端的我而言实在有些费劲，因为总有一些意向不到的错误。并且在最开始搭建博客的时候，我完全没有了解过这一方面内容，因此在修改主题过程中，我得花上不少时间从头开始看docusaurus官方文档上。结果到最后修改主题就花了三天时间，再加上我对博客中文档内容的修改，就花了更多时间了。</p>
<p>现在回过头去想，这可能有点违背我搭建博客的初衷了，博客应该是笔记的载体，重要的在与内容，主题只是锦上添花罢了。因此，在后面很长一段时间，我都会保持这一个主题。</p>
<p>如果你和我的情况一样，不懂前端知识又想折腾一个较为美观的个人博客，我个人认为可以去docusaurus的网站展示中寻找你认为美观并且开源的主题。有很多博主将他们的博客网站主题在上面分享出来了，你可以使用这些主题，并修改成你想要的主题样式。我的主题是“愧怍小站”的主题样式。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="博客的结构">博客的结构<a href="https://drbear.vercel.app/blog/interest/modified_website#%E5%8D%9A%E5%AE%A2%E7%9A%84%E7%BB%93%E6%9E%84" class="hash-link" aria-label="博客的结构的直接链接" title="博客的结构的直接链接">​</a></h2>
<p>当你采用这个主题之后，就可以直接看到这个博客的结构了。</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">├── blog                           </span><span class="token comment" style="color:#999988;font-style:italic"># 博客</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── first-blog.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── docs                           </span><span class="token comment" style="color:#999988;font-style:italic"># 文档/笔记</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── doc.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── data</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── feature.ts                 </span><span class="token comment" style="color:#999988;font-style:italic"># 特点</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── friends.ts                 </span><span class="token comment" style="color:#999988;font-style:italic"># 友链</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── projects.ts                </span><span class="token comment" style="color:#999988;font-style:italic"># 项目</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── skills.ts                  </span><span class="token comment" style="color:#999988;font-style:italic"># 技术栈</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── resources.ts               </span><span class="token comment" style="color:#999988;font-style:italic"># 资源</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── social.ts                  </span><span class="token comment" style="color:#999988;font-style:italic"># 社交链接</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── i18n                           </span><span class="token comment" style="color:#999988;font-style:italic"># 国际化</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── src</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── components                 </span><span class="token comment" style="color:#999988;font-style:italic"># 组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── css                        </span><span class="token comment" style="color:#999988;font-style:italic"># 自定义CSS</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── pages                      </span><span class="token comment" style="color:#999988;font-style:italic"># 自定义页面</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── plugin                     </span><span class="token comment" style="color:#999988;font-style:italic"># 自定义插件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── theme                      </span><span class="token comment" style="color:#999988;font-style:italic"># 自定义主题组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── static                         </span><span class="token comment" style="color:#999988;font-style:italic"># 静态资源文件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── img                        </span><span class="token comment" style="color:#999988;font-style:italic"># 静态图片</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── docusaurus.config.ts           </span><span class="token comment" style="color:#999988;font-style:italic"># 站点的配置信息</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── sidebars.ts                    </span><span class="token comment" style="color:#999988;font-style:italic"># 文档的侧边栏</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── package.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── tsconfig.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">└── pnpm-lock.yaml</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>在后面的内容描述的时候，会出现<code>@site</code>，这个一般指的是博客的根目录，默认和docusaurus.config.mts一个位置.</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改网站的基本配置">修改网站的基本配置<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E7%BD%91%E7%AB%99%E7%9A%84%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="修改网站的基本配置的直接链接" title="修改网站的基本配置的直接链接">​</a></h2>
<p>最基本的配置文件就是<code>docusaurus.config.mts</code>，包括网站的标题，描述，图片，导航栏等等内容。还有一个文件是<code>sidebar.js</code>，这个是用来生成文档侧边栏的，与博客侧边栏没有关系。若只想进行网站的简单修改，除了修改博文内容，就需要修改这两个文件即可。这里可以参考：</p>
<ul>
<li><a href="https://docusaurus.io/docs/api/docusaurus-config" target="_blank" rel="noopener noreferrer">docusaurus.config.js的配置</a></li>
<li><a href="https://docusaurus.io/docs/sidebar" target="_blank" rel="noopener noreferrer">文档的侧边栏</a></li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改网站的主题组件">修改网站的主题组件<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E7%BD%91%E7%AB%99%E7%9A%84%E4%B8%BB%E9%A2%98%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="修改网站的主题组件的直接链接" title="修改网站的主题组件的直接链接">​</a></h2>
<p>我们的网站默认使用了classic主题配置，只是在这个主题的基础上进行了修改。源主题组件位于<code>@docusaurus/theme-classic/src/theme/</code>中。若我们想要修改，可以将主题组件弹出至<code>@site/src/theme/</code>中。在这个文件夹中修改组件内容后，会覆盖源主题组件内容，用自定义的组件内容进行渲染。弹出命令为：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> run swizzle -- </span><span class="token parameter variable" style="color:#36acaa">--list</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>这会列出所有位于<code>@docusaurus/theme-classic/src/theme/</code>下的主题组件，然后我们可以输入自己想要的组件，例如输入doc，就会出现所有与doc有关的主题组件，我们选中想要的组件按下Enter，选择弹出，即可在<code>@site/src/theme/</code>中创建组件副本。更多自定义组件的内容查阅<a href="https://docusaurus.io/docs/swizzling" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改首页">修改首页<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E9%A6%96%E9%A1%B5" class="hash-link" aria-label="修改首页的直接链接" title="修改首页的直接链接">​</a></h2>
<p>利用docusaurus搭建的网站中的自定义页面都在<code>@site/src/pages</code>中。首页自然也在里面，名为<code>index.tsx</code>。从这个文件中，我们可以看到所有首页显示的内容。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">Home</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">JSX</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access maybe-class-name">Element</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">siteConfig</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> customFields</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> tagline </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useDocusaurusContext</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> description </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> customFields </span><span class="token keyword module" style="color:#00009f">as</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> string </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Layout</span><span class="token plain"> title</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">tagline</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> description</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">description</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">main</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 这是首页最第一页，配置在_components/Hero中 */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Hero</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"container-wrapper"</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 这是博客展示在首页的显示 */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">BlogSection</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 这是项目在首页的显示，配置在_components/ProjectSection中*/</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">HomepageProject</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 这是个人特点在首页的显示，配置在_components/FeaturesSection中 */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">FeaturesSection</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">main</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">Layout</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="首页初始页">首页初始页<a href="https://drbear.vercel.app/blog/interest/modified_website#%E9%A6%96%E9%A1%B5%E5%88%9D%E5%A7%8B%E9%A1%B5" class="hash-link" aria-label="首页初始页的直接链接" title="首页初始页的直接链接">​</a></h3>
<p>首页初始页是由Hero组件渲染的，若要初始页的内容，我们需要修改Hero组件的内容，这个组件内容在<code>@site/src/pages/_components/Hero</code>下。</p>
<ul>
<li>若要修改首页初始页的内容，需要修改<code>index.js</code>文件中的内容。</li>
<li>若要修改联系方式，需要修改<code>@site/src/components/SocialLinks</code>中的内容。</li>
<li>若要修改首页初始页的样式，需要修改<code>style.module.scss</code>中的内容。</li>
<li>若要修改首页的图片，需要将想要的图片放入<code>img</code>中，然后在<code>index.js</code>中修改图片的路径为你想要的背景图片即可。</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="首页的展示内容">首页的展示内容<a href="https://drbear.vercel.app/blog/interest/modified_website#%E9%A6%96%E9%A1%B5%E7%9A%84%E5%B1%95%E7%A4%BA%E5%86%85%E5%AE%B9" class="hash-link" aria-label="首页的展示内容的直接链接" title="首页的展示内容的直接链接">​</a></h3>
<p>首页的展示内容的所有配置都在<code>@site/src/pages/_components</code>下。只需要根据目录名字即可判断出来组件的作用，对应进行修改即可。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="关于我页面">“关于我”页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E5%85%B3%E4%BA%8E%E6%88%91%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="“关于我”页面的直接链接" title="“关于我”页面的直接链接">​</a></h3>
<p>首页的自我介绍按钮连接到了一个单独的页面，这个页面就是“关于我”页面，我们可以在<code>@site/src/pages/about.mdx</code>中进行修改。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改文档页面">修改文档页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E6%96%87%E6%A1%A3%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="修改文档页面的直接链接" title="修改文档页面的直接链接">​</a></h2>
<p>文档页面我并没有进行太大修改，仅仅修改了侧边栏的内容和样式。</p>
<ul>
<li>修改侧边栏的内容需要去修改<code>sidebar.js</code>中的内容。</li>
<li>修改侧边栏样式可以在<code>@site/src/theme/docsidebar</code>中进行修改，也可以到<code>@site/src/css.custom.css</code>中进行修改。</li>
</ul>
<p>若是在<code>@site/src/theme/</code> 中没有找到docsidebar组件，这是因为没有将这个组件弹出，查看<a href="https://docusaurus.io/docs/swizzling" target="_blank" rel="noopener noreferrer">swizzle组件</a></p>
<div class="language-css codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">custom.scss<span style="flex:1;text-align:right">css</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-css codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">/* 侧边栏整体 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.menu</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-size</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">/* 侧边栏左侧线条 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.menu__list</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.menu__list</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-bottom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token hexcode color">#e3cece</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-bottom-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token hexcode color">#ffffff00</span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-left</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token hexcode color">#ced9e3</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-radius</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">10</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">margin-left</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">padding-left</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.3</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector" style="color:#00009f">html</span><span class="token selector attribute punctuation" style="color:#393A34">[</span><span class="token selector attribute attr-name" style="color:#00a4db">data-theme</span><span class="token selector attribute operator" style="color:#393A34">=</span><span class="token selector attribute attr-value" style="color:#e3116c">'dark'</span><span class="token selector attribute punctuation" style="color:#393A34">]</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.menu__list</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.menu__list</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-bottom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token hexcode color">#615e5e</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-left</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token hexcode color">#615e5e</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改博客页面">修改博客页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="修改博客页面的直接链接" title="修改博客页面的直接链接">​</a></h2>
<p>若要修改博客页面的内容，我们需要swizzle主题组件，将你想修改的与blog有关的组件弹出，然后进行修改即可。从博客布局组件 BlogLayout 中我们可以看到以下内容</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">src/theme/BlogLayout/index.js<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">BlogLayout</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter literal-property property" style="color:#36acaa">props</span><span class="token parameter operator" style="color:#393A34">:</span><span class="token parameter"> </span><span class="token parameter maybe-class-name">Props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">JSX</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access maybe-class-name">Element</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> sidebar</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> toc</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> children</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">layoutProps </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> props</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> hasSidebar </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> sidebar </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> sidebar</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">items</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Layout</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">layoutProps</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"container margin-vert--md"</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"row"</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">BlogSidebar</span><span class="token plain"> sidebar</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">sidebar</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 这是主体 */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">main</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function" style="color:#d73a49">clsx</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'col'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">// 如果有侧边栏</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token string-property property" style="color:#36acaa">'col--6'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> hasSidebar</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">// 如果没有侧边栏</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token string-property property" style="color:#36acaa">'col--6 col--offset-2'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">!</span><span class="token plain">hasSidebar</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            itemScope</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            itemType</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"h ttp://schema.org/Blog"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">main</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* 右侧文档目录 侧边栏占页面2份，主体6份，文档目录占2份*/</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">toc </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">"col col--2"</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">toc</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">Layout</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>由于博客页面的右侧文档目录的宽度比较小，我想把这个目录宽度加大一些。为了实现这个目标，需要将容器宽度加大，因为右侧文档目录宽度是总宽度 1/5，这是由于设置类名为<code>col--2</code>决定的。</p>
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y"></div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_nfUF"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_wGcw tabs__item--active">博客页面宽度和排版</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_wGcw">文档内容目录</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_yuxz"><div class="language-css codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-css codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">/* 修改博客页面的排版 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.blog-post-page</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.row</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">display</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> flex</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">flex-wrap</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> wrap</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">justify-content</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> center</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">/* 修改容器大小 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.blog-post-page</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.container</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">max-width</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1920</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_yuxz" hidden=""><div class="language-css codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-css codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">/* 这是右侧文档目录的配置 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector" style="color:#00009f">table-of-contents__link--active</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">filter</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> none </span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">var</span><span class="token punctuation" style="color:#393A34">(</span><span class="token variable" style="color:#36acaa">--ifm-color-primary-light</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">opacity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">.8</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">transform</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">scale</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">1.02</span><span class="token punctuation" style="color:#393A34">)</span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">transform-origin</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> left</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.table-of-contents__link</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  // </span><span class="token property" style="color:#36acaa">filter</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">grayscale</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">100</span><span class="token unit">%</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">padding</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.3</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.3</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.3</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-radius</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">10</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">transition</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> filter </span><span class="token number" style="color:#36acaa">0.08</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> background-color </span><span class="token number" style="color:#36acaa">0.08</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">margin-top</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">-0.5</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  // </span><span class="token property" style="color:#36acaa">transition</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> filter </span><span class="token number" style="color:#36acaa">0.2</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> color </span><span class="token number" style="color:#36acaa">0.2</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token hexcode color">#4d4d4d</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">transition</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">.25</span><span class="token unit">s</span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector attribute punctuation" style="color:#393A34">[</span><span class="token selector attribute attr-name" style="color:#00a4db">data-theme</span><span class="token selector attribute operator" style="color:#393A34">=</span><span class="token selector attribute attr-value" style="color:#e3116c">'dark'</span><span class="token selector attribute punctuation" style="color:#393A34">]</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.table-of-contents__link</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token hexcode color">#cbccdc</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.table-of-contents__link</span><span class="token selector pseudo-class" style="color:#00009f">:hover</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">filter</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> none</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">background-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">var</span><span class="token punctuation" style="color:#393A34">(</span><span class="token variable" style="color:#36acaa">--ifm-menu-color-background-active</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">var</span><span class="token punctuation" style="color:#393A34">(</span><span class="token variable" style="color:#36acaa">--ifm-color-primary-darkest</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector class" style="color:#00009f">.table-of-contents</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-size</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.8</span><span class="token unit">rem</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  // </span><span class="token property" style="color:#36acaa">transition</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> filter </span><span class="token number" style="color:#36acaa">0.2</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> background-color </span><span class="token number" style="color:#36acaa">0.2</span><span class="token unit">s</span><span class="token plain"> ease-in-out</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token selector" style="color:#00009f">// a</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  //   </span><span class="token property" style="color:#36acaa">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token hexcode color">#c1defa</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  // </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector" style="color:#00009f">html</span><span class="token selector attribute punctuation" style="color:#393A34">[</span><span class="token selector attribute attr-name" style="color:#00a4db">data-theme</span><span class="token selector attribute operator" style="color:#393A34">=</span><span class="token selector attribute attr-value" style="color:#e3116c">'dark'</span><span class="token selector attribute punctuation" style="color:#393A34">]</span><span class="token selector" style="color:#00009f"> </span><span class="token selector class" style="color:#00009f">.table-of-contents__link</span><span class="token selector pseudo-class" style="color:#00009f">:hover</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">background-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">  </span><span class="token hexcode color">#2e303d</span><span class="token plain"> </span><span class="token important">!important</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改项目页面">修改项目页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="修改项目页面的直接链接" title="修改项目页面的直接链接">​</a></h2>
<ul>
<li>在<code>@site/src/pages/project/</code>中可以修改项目页面</li>
<li>在<code>@site/data/projects.tsx</code>中添加项目的内容。</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改友链页面">修改友链页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E5%8F%8B%E9%93%BE%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="修改友链页面的直接链接" title="修改友链页面的直接链接">​</a></h2>
<ul>
<li>在<code>@site/src/pages/friends/</code>中可以修改友链页面</li>
<li>在<code>@site/data/friends.tsx</code>中添加友链的内容。</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改资源页面">修改资源页面<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E8%B5%84%E6%BA%90%E9%A1%B5%E9%9D%A2" class="hash-link" aria-label="修改资源页面的直接链接" title="修改资源页面的直接链接">​</a></h2>
<ul>
<li>在<code>@site/src/pages/resources/</code>中可以修改资源页面</li>
<li>在<code>@site/data/resources.tsx</code>中添加资源的内容。</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="添加组件">添加组件<a href="https://drbear.vercel.app/blog/interest/modified_website#%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="添加组件的直接链接" title="添加组件的直接链接">​</a></h2>
<p>若想自定义组件，可以在<code>@site/src/components/</code>中定义。我添加了一个高亮组件。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="修改一些css样式">修改一些CSS样式<a href="https://drbear.vercel.app/blog/interest/modified_website#%E4%BF%AE%E6%94%B9%E4%B8%80%E4%BA%9Bcss%E6%A0%B7%E5%BC%8F" class="hash-link" aria-label="修改一些CSS样式的直接链接" title="修改一些CSS样式的直接链接">​</a></h2>
<p>若想修改CSS样式，可以到<code>@site/src/css/custom.scss</code>中修改，也可以到对应组件的<code>style.module.css</code>中修改。在上面也提到一些在<code>custom.scss</code>中修改的内容。</p>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="website" term="website"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[用VScode来编译C++]]></title>
        <id>https://drbear.vercel.app/blog/tools/Vscode-complie-C++</id>
        <link href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++"/>
        <updated>2023-07-19T21:00:00.000Z</updated>
        <summary type="html"><![CDATA[配置 C++ 在 Vscode 上的编译环境]]></summary>
        <content type="html"><![CDATA[<p>在用了一段时间的visual studio之后，觉得visual studio打开以及创建项目都较慢，而我日常写的C++代码比较小，因此转而使用轻量的编辑器Vscode。</p>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="前提">前提<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E5%89%8D%E6%8F%90" class="hash-link" aria-label="前提的直接链接" title="前提的直接链接">​</a></h2>
<p>vscode只是一个文本编辑器，需要编译器才能编译C++文件，我们需要以下工具</p>
<ol>
<li>C++ 扩展插件。</li>
<li>g++(GCC C++ compiler)</li>
<li>gdb Debugger</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="下载c扩展插件">下载C++扩展插件<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E4%B8%8B%E8%BD%BDc%E6%89%A9%E5%B1%95%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="下载C++扩展插件的直接链接" title="下载C++扩展插件的直接链接">​</a></h3>
<p><img loading="lazy" alt="C++插件" src="https://drbear.vercel.app/assets/images/cpp_extension-0044e702050cdca3f4e490011d0044e7.png" width="1096" height="292" class="img_KnJ7"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="下载mingw-w64工具链">下载MinGW-w64工具链<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E4%B8%8B%E8%BD%BDmingw-w64%E5%B7%A5%E5%85%B7%E9%93%BE" class="hash-link" aria-label="下载MinGW-w64工具链的直接链接" title="下载MinGW-w64工具链的直接链接">​</a></h3>
<p>MinGW-w64工具链中包含了g++和gdb Debugger。我们利用MSYS2来下载这个工具链。</p>
<p><span style="background-color:#fbb656;border-radius:0.4rem;color:#fff;padding:0.2rem">Step 1</span>
根据官方提供的 <span style="display:inline-flex;gap:0.25rem"><span></span><a href="https://github.com/msys2/msys2-installer/releases/download/2024-01-13/msys2-x86_64-20240113.exe" target="_blank" rel="noopener noreferrer">下载链接</a></span> 来下载MSYS2，然后跟着下载程序走即可。</p>
<p><span style="background-color:#fbb656;border-radius:0.4rem;color:#fff;padding:0.2rem">Step 2</span>
运行MSYS2程序，在打开的MSYS2终端中输入以下命令，然后都按照默认配置下载即可。</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">pacman </span><span class="token parameter variable" style="color:#36acaa">-S</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">--needed</span><span class="token plain"> base-devel mingw-w64-ucrt-x86_64-toolchain</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><span style="background-color:#fbb656;border-radius:0.4rem;color:#fff;padding:0.2rem">Step 3</span>
将MinGW-w64的bin文件夹路径添加到<strong>PATH</strong>环境变量中</p>
<p><img loading="lazy" alt="PATH" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaMAAAD/CAIAAADTzC6bAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AACAASURBVHic7Z1PaBtJ2sZLH8uShFnGkz2FOQx4WuOYoGEJmEWGMCeTSPFBOUTMyZgcJDaHrHzIsBh8GYNnSQ7qzcGLdAjGJ6McooOjHuPjgMViyEUEJ6NewxzMHIb1ehnI5rLoO1R3dXV1Vf+RW//az+8QnFZ1vW+Vuh9VVUv1pN68efPRRx999NFHv/3tbwkAACSR1K+//jrqHAAAYLD836gTAACAgQOlAwAkHygdACD5QOkAAMkHSgcASD5QOgBA8vmN9Ojz588fPHhA//75558Nw5ifn79+/Tpfptls/vGPf7x27Vqz2Tw9PeVfyuVy//jHP9jBdDrd7XaFEJlMZm5u7vDw8PT09Pbt23xobyw+6O9///tbt255X9rZ2Xn//r33eC6Xu3btmrQ2AMAFQaJ0h4eHmUyGEPL8+XN28ODg4ODggBDCZOjDhw9MQXg12dnZIYQUCgX699dff00Iodp0eHj44cMHqU7xcsnH+umnn05OTviSp6envG5evXqVxiKEMHVm0GQAABccidKdnJyotGNvb49wqvT8+fMrV65cunTJMIwwwU5PT7/88kvpS4VCgVZ++/btw8NDlgM/uNvZ2fnqq6+uXbvGBFSAl2YAAGCISnd4eHj9+nWqNUSmHZ999hlVpS+//DLqrPC///0vf8re3h6Nwg/oWMTnz5+z8Vqz2WTiS3n79u1PP/3ET3sJxnQAAAWi0p2cnJyenl65cuXrr7/mV+t43r59SwgxTdM0zUuXLnU6HaHA1atXL1++zLQynU7funWLLsk1m83Lly9ThaLDN7pOt7e3d/Xq1bm5OVbJzs4Okznvst3169d//fVXqoBMMaVjOsMwaHMi9gwAIDlIfvfKBlB0QCQs86fT6ffv37O1Mypqn332GRMjfmop/P3JJ59cvXr19PSUiRqvdMJ6HJWnvb09vnIB/oEGi8WvBrLHJv32DwAgCYhjuh9++OH09JTOHOkR+iD1+vXrv/zyCz1CleWHH34ghNy6dWtvb489Q1BxeHj46aefUtG8ffv2zs7O7373O0G/6NNY9l+qs7dv3242m9LK6VCR/ff9+/f8mM77tBcAcGERle7WrVvsOenJycmHDx/o0wamNel0mv5BR3YnJyeffPIJ/70Q6dJYp9N58OABfeZACPnqq6+oehJCTk5OqLB2Oh1+InzlyhX6Bxtg0scRxP7ii/AMl01RhTFd310DAEgMktnr4eEhVZx0On1ycsJUiY3p/vWvf9G1vE8//ZSO6YSJJ1vdo4OsK1eufP7553Nzc8Ji3N7e3r///W9+BY1ONg3DoDUIz1h3dnb+8Ic//PLLLycnJ/xxKnw+jfT5gh4A4CIgjunoE4MHDx48f/5c0zRBwih0kEVnrxQqJUzydnZ2Ll26dHp6+uDBA/qQlJ+WMoQnp3t7e5cvX2Zraj///POlS5fYq2/fvn3//r10Gnvt2jX+yYnPt/YAABcT+U6cTCz4OSMdoLHVNKp0/NMJ+pLqy26EEO8DVgr9lgmrmX3pJJPJ0GfBxP0NYcI9ZqXricKPNATw7BWAC078ew77KB0AAIwE7K4OAEg+2MsEAJB8oHQAgOQDpQMAJB8oHQAg+UDpAADJB0oHAEg+UDoAQPKB0gEAkg+UDgCQfH7zv//9b9Q5AADAYMGYDgCQfKB0AIDkA6UDACQfKB0AIPlA6QAAyQdKBwBIPlA6AEDygdIBAJIPlA4AkHygdACA5AOlAwAkHygdACD5QOkAAMkHSgcASD5QOgBA8oHSAQCSD5QOAJB8oHQAgOQDpQMAJB8oHQAg+fwmfNFnf98aWBoAANAPj/60HKZYBKUjhKz95c/95AIAAANg/a9/C1kSs1cAQPKB0gEAkg+UDgCQfKB0AIDkA6UDACQfKB0AIPnEo3RGOZVKpVKped3kDjn/M/X5FKNs8Ae5U1xnhT6Fxfcetk+xT5cdcMXhqwgTy3UySzOoNwAAwyYOpTPKedLq9Xq9brGxRO9no5wnrYOK5hTKVru9Xq/X61Y7eeemL5UyK0sqCZCfks2Sxq7rDFNfr/ebeSrdKNIoNP+0SxbDxCq17NN7tRwJ2RsAgKESg9KZ7zqlQo4QQrSZDCHEurNrOWlprbJWajvyUXhcJWqtk52SKRbJylNOjszdBqlWS9ETN8r5eolXIK1y0CrV847W9RErWm8AAIZCDEqnzWTqTYMQQoxmPTOjRbuztcp2laykXRNMf2Yqa6X6OhNH4+kKKS7OREyaEGI069nqYyHPXKFEOu+Y8EaPdb7eAAAMhDhmr7lai+RTqVQqT1o1Uqb/ehe+KKa+Xs8WF7mZnFbZrmb5kZSI55RcodS2hlqmvl4vrQVMDOt5bjEtvdL2K5uezbaPulzjgmI5ldMWROoNAMBQiOeJRK5mLVTZd7a1VNXKsLlfeyVNhaZR7IpLVgqtU5+Se1zN1td1kxhPV4hnXOaBW0rr9brVbEDx7Gw6QiyncnvkFqI3AABDJdZvmVgzNWepKlco2VNB+/FCT7oyb2tdkz/oc4q1dKc3hfFhFLjRGteEpyvtzIyrxn5j+fUGAGCoxKh0/IqUa6kq1NlU6+qhH6LmCqX2ykrwzNWvisfVbJ17qktMfT5fL3lX1fqJdb7eAADESlxKZ+rz7M7WKtvVDluqCr0Yr1W2AyeWHLnH1SyxRkt9olUO6DdL7CW8RrHbkyXsF4tbBGSiGUNvAABiJHV2dhay6LO/b2F/OgDA+LD+17+F3IkTvwYDACSfhCmd/UMs8WdkAIALTbTd1ceeXK3Xq406CQDAuJGwMR0AAEiIPKb7z3/+M4g8AAAgEh9//HH4wpGVLlLtAAAwDmD2CgBIPlA6AEDygdIBAJIPlA4AkHygdGBUGOW+v9lt6vND3e3PMgw57xfRI6UN75FYGY5jjudNM/V516tSZxzhlw7ug6HseGROOOKLXpcc1ytc6h7znX4cc1TXr6nPn/NOkifTL948vc2PBXmgiL5Ig8XUl1YyLW4HQuJN2yinRCMm9y454yFb57/MJpWhOeaoT05ZZ/d63dl1500QnWjcB1sZfkd2hR2PtHCQS44TN5zHTUTHnNzjqujCQwg1qMhmre2d+sdJpkXyAZe0v3Ip8owfeaAAryKtchDy7YmD7lHb3p2VdZqYtntbfnO30SacXUr3qJ0tLmrDTVtCTJfZJDJ0xxzvyY6Zg1Y5CLutUa4gs60R7HgkhYNdcs5JYG9oi0XvnW3uNkhxe60U3zWYq/W61c452iXNcxBIA8XnizQoxLTTs1nn0usetUulEtum33zX6X/H2BiJ/zKbHEbtmKPNZLwb/wZj6ut19ybo4QqHcck5H8G9oS0KN7F1BS5quQJvz0OHD/Kpvey4N5XFIvv45qa2ZYPQke1Km9Tz9nxQLCDN0wu/pQKfiHPca40rJiwN5O9V5BqPCrG4/nFWDCRJyjKSlDTKqXzd2enf6TQhbW2xyBxIjGa9VHg8a/e+udugG1k7aRvl1LyuS5c5bPL8rrTyxOwTuamzfVTWunguM593cpwZumOO5ORSPS/pNdGJxnVwiWzLpgFub52Awg4ulxwWN+S6SnTHHK0ifKrS21ijmxu7hjf1fLNgzUZdA0/VcQWm/pRsu8rnar1uNUtKLTpJ9xaQ5SlilFP5jr0Ffq9F8s5t7Bw/qGiyBHjkgcL5Inljcf1zUNFUSbK1N2d5RF4yV+u1Stz6iNNpQtrOB4vRrJcKOW2xmKUfoN2jtmQb1/bKUYFWafuA8is5vZYzfpUn5ly1RrOTtUIZ1ANA0rqYLjNpzZPA0BxzAk7u0n15uVvA60TDDrZEAwi5t46isBRngMjihlxQ6ccxJ1fgbxHDcagQr0Fnq/fc4yq3vqI6rmiXVqlVCP0ozkv3r1cUcOcpYjTr2eo26yWWiXDcp37/QGF8kSSxCOH7R5WkNpMh9bxrOKUo6YM7bVvazHed7Gzamd8aTen8w55caIvFrJMAa6az5KJIjCmr0ewUt9cyjV2TTZO9rYvrMpPVPBEMxzFHtBYk3SPBilCrHIQcnxB7HMiV9LPjcRUO65ITB36OOfwEwmg6kyM6UYrJQYx9hpv6PB3Z9hTWaMoC7olOMIoVhcAE5IHi8EVSJkk/j7bJks/wPXCBxJ22NpNpH3WtOaLz/wEs0tlKmu28M41mp7iopWdJY9dgob2ti+syC9Nv48hwHHO0xSLvcmiU8/a1a+rzLm0LufjGPu6jFg7tknNeAhxznEd3RrPusmlslYjzocr+MvWlFW4KpDrOx0/lO9ZIoHvUtgcF5m5DYnerLuD3CDZXKLWteRchwuSI3UaGrpvBCagCBXoVeWOFTNLUdYMQolUOulX6Mawq6Ys77VyhVG8+PWLnif8PqItvC/eoWZmYtlgkjaX1emZGo3+v20LnbV1cl5m35knhLDTffqf3lNjrF87/CCGur2Bw6w7OGEz4jLeLC5/7tLg7BC1TavV63WqWr0+Wj1PYW72Yi8sctieu0bjPk+YZqjdY2q2ScJwd6VazpFRivebKXnVc3izupWypxFKzjrobwhfg81TUz7+rYn9zB6X1t0rqQO7WcmtX3iKyWN4e9SbZ8nahuqTrrXV1r/vya5WI96qXNEao0v7biZ+tVrkivv3MvZ2yE0qtXi/Gy0zabyPj2+/0kPIFx5yRYerz6aM19aqu6vWg8+JmaPGG3bCYmNC0bcblMusPOOZMAIGPNseEoeU5KR0iMKFpXzQS5iMxWeRqvfH+xLQYWp6T0iECE5r2xQJKN7ZolYNelOMA9MFFucwwewUAJB845gAAJhI45gAAgAvMXgEAyQdKBwBIPlA6AEDygdIBAJIPlG5cmTDDlHPY3wAweOCYMyaOOcNnfDIBYODAMWc8HHP6oT+zLqXny8DcvwAYPXDMGQvHnJEwPpkAMGjgmDMOjjmM8IYpguVNsAOLPRdXeb54PHRCuOFIPVMm1FEFJBs45pDRO+ZYRDJMESxviMKBZX2268zSy4ZwFp+J8FIoNxzuuPMWTKijCkg2cMyhjNIxxyKiYYq3CRIHFsc5IL3Slg1cVZ44Id1wvMlMrKMKSDZwzBm5Y04fhJ64u7edl2l3+ExUQYXjk+qoApINHHNG7Zhj6vNUESIbpgThlnWjLP8Q8bGqUbnh+CUzuY4qINHEpXSmPs/ubK2yTeeiKe7QgbUcl0qlUvlO1Z5kapXt2XW2CM9/M8VZ/5INDbTKdpXwXzTxgy+sVQ7oN0ss0o1iN8J6kpOVnZQsz4DeIET64JMtWaZSqSVSLDnHe62MPQvlOol+fviMnHI1a1EglUqlmoVaTnqWkwn/kiqo6rjT1zNNe76cif8DBID+gGPOyBgfS5LxyQSASMAxZwIYH6eV8ckEgAEBH4kRMj5OK+OTCQADAWM6AEDygdIBAJIPHHMAABMJHHMAAMAFZq8AgOQDpQMAJB8oHQAg+UDpAADJZ4yVjv30fYjxxnH3yGh+D4od0ofdmQCMF7Eondw4hsN7s9JTvPeeUR7RZj9sB0nVrz+NstgyTj28pj/yCgILRQSuNwCEIrYxnbMhZYvkxXtZvjNQNise5PYqoruOhNwNMwa6R217xyj5sChXKBHXj0PN3Ua7tGZtzys1/XEwyiluP+FeoRmTPoX23xluZwIwbgxg9pqr9brVjntLTak5S6YoGCqYuw1SrcqscMYBQerM3Ua7VMiFMf2hNj3caDFXi0t14HoDQBgGs06nLRbppttsgie1iZmprPEb3tJtHWfsV11DK8H5hb7GT3XlNi4y9xZJSaOcyjs7kQvGMQyX1DGhCzb9kdr0qJMRjyusc2xTCqn/jmc27XSmylsHgCQztCcS8p2BuG1xTX29XlqTDnVcLi1sNFTPNws9X3sXiXuLvGSu1muVONdYlxMNl63jmuAInY/pTxB+rjQK6xzBAUfesVbP9FT71Xu9dQBIOINTuuxs2r08JDVnYTufG09XiGLgI7i02DhboqtsXLzuLWHdZxQ4Y1VO6IjS9CcAX1cauXWO1AHH07FOz8gb6PHWASDpDEbp5F4HUnMWy4xab3L2hTFAny6EcW8J7T5DCJM6Qeis11SmP7mCzG67r2TkDjjn9N8BIPkMQOnonIyOVdxf4/IxZ1lRzVwJcTu/GLr3llbZuHjdW/p2n7HRFovZ+vpSgxt/Bpv+5B5XyUra5Tc9r5v+rjQq6xypA47Qsc5ior604pVkAC4esSmdYxyzPttVfaFB/qQw97iaJX73I+/80pyRWfnJbVwk7i1Bhi9WlmonGm2xmG23eX1Um/44J1UO+LCpZuGgoqmTUVvnSBxwJB1bIlyzYQ8BwPAdc2DOMiDQseACMr6OOTBnGRDoWAB8GL5jDsxZBgQ6FgAlY/wLfwAAiAkoHQAg+cAxBwAwkcAxBwAAXGD2CgBIPlA6AEDygdIBAJIPlA4AkHygdCNhXN15EotRviidPSnWIsPOM0alUznCeJvkOWLq83G2WtKJ/N6+cfSwyyQo6j0U6M4TE6qLydTnz6mygR5JkZAbKg1AmVTOTfE0Y5BMin6dh8G2MSal83OECe3qEhsKgx57b7dWZiUdw0XtbFHcyUd7hzh3noGi6Hlzt0GykXYgleLrkSSG9FWuoV0h0kD9v49DZPg30fAZbBtjUboAR5jhu7r4R0zPxrrTrrWX6DhehdJ+MHcbpLgd534AMo+kSAztCvELNMbvI7kY1kgDbWMcSqdyhPG3y1Hg73Fjf+aKjjniWX4RhQ2DvZVLk/B69MhzD/Tx4dx5mGuEmIA3fkjrHzEHST+Yuw1SXNTc+xRzZ6la7T+/Y/vOS3I1yoIJkbcxoa6QYHchqwNlneXkGRworB8Td3xe18t8eNfpknyMcmpeN6zjZcOpSXkNSDJXZUXIbll6mDvRJ7p7+1z5nNLnwgjvXeXJM4pQROYsNN9+p/ekcGYzLrrVLHuhVeJnO+IJ3WqWHrDNahS1s5e71Sxx5k+Ss4SIvO8Mv0e5ovISm+iW7CjuiE7GfDOFMq2SEMp+iYsqS8DbHHm3SCsXchD7gQsohnbOUtXmPq5IUdl7zrslKSDk6a1f1V73cWX9XO1ioL7fRz77bjXLCnkuFXk+dnl6aQr9FHxJ+2XF1Sa9M4Oiuy9QTx6eNqreDnZccQFL8lTEU/Htd3pI+Rqk0omF+EtHoXRWx3OvuiSKvSb0nOcsT5+5QrI3QF65lZF9THpvc69LtFLaSudVl9pIEvA2R9Yt8sqlGiFPSmKHFlCbTxROMoJ7z1tAyNNTv6q9imvPU79w+bkC9fk+Csed/0pua1k+svfB+TvoklZeAMIHGF8bL2+B0dkfnIA6NSguDL+svJe0N0/h3QkmvNLFMXsN5QjDz5bSs9TVgdE9atvFJB43cpsYV+UyZxy1j0yuULJ9tSSVm/p8KrVEtu13SgU7M7xLtew5hKR13uacx/qH7weXvVi+TvyNaiPAeXcE9J6yQFTfH0V7g98+IVBM76OKsJeTmGS0SzogK1pb+DZaDwdMfb1uLfRErUHIKswFbIUekP1TLE8kFI4wSrscatTArTflbWMwhceN1CbGwXuWGNGN0ayTzIzoTWNX3j1q2+aE5m6j7T09bK+EcOeRJuBtzvmsf5x+MJp1cSrrPJdQ+ewE++/wHkmBvacu4PfsLZS7kKHrZpi3L9pDvqjGRqHb60fgJX1u7yd/tMUiaTx92lA5kxIivTDCe1epcdrIBMT7R3Ti+ZaJwhFGKOQ8WdEqB44nTCrfqXat8lKPG5VNDBfec5YYkRBnLJPKE/tBsaxyqtupVCqVWjrKnOMxbRh3HlkC3ub0af0j9oPRrLudiXIFTupUPjuq43KPJHnvcSZEPt3rfr+c+ud108ddSHBTCvP2RXvIFyY0b2wknN3X5RR8SUe5APpAq6xl6nVf9ZRdGOG9q3xCD+YRbAzrdKGRLrMOlOFHHE+C+kH1+rD7b2jx4g8UarU6BobWRb4NGmwW4Wsf7jpdaIbv6gIfGcqk9MPQ8owjEG/0y63ADJghdZGpr/tYMA+YQbRxyI45w3d1gY8MZVL6YWh5nj+QVtmenU+l8oQQQrJsBWbgDLyL6Fc+S60RXjHxt3H43mBgDNEqB70oxwEhhHZPZdRJxE+u1uvV/ItM3oWBvUwAAMkHjjkAgIkEjjkAAOACs1cAQPKB0gEAkg+UDgCQfKB0AIDkA6UbCXDMGQPO8XNxMHHAMac/4JjD9edgHHNifb/i4iI41yQTOOb0DRxz7Ld7MI45zs6Z8bxfHrTKQeTd1i6Cc00ygWPO+YONr9NKMhxzcgXFhkij4CI41yQSOObAMcd9lqrV/tPUATrmmPp6nRsCK2xi+nClcQaaRpla3ohzZZkhjpiq9FxVvwUb5YBBEcP+dHDMgWPOABxzvO+WX6vP5UojdW9RGeJInGs85/oZyvilBCICx5ye93qEY45w3kQ45vB649OlsjqDfGFkb4jTEKUhTk99Mas+saV2Nqq/QQTgmCNE9OQCx5wJcczJ1Vqlus8SYHY23bcrTd8MytUFDA445sAxxyo2ro45ucfVrKUrqlbH9Za5wvoZ4oR5BBvcb2CIwDEHjjlj6pjjHK5sVwn9oomi1bG9ZTy+hjghHsGq+g2MhhjW6UIDx5xRAcec8yJbW1anOr7tSBhwzBlZxPFkUvphnPIMMMQZp1RBMHDMuSBMSj+MT56BhjjjkyoIBo45gMAxR07/hjgXu9/GEuxlAgBIPnDMAQBMJHDMAQAAF5i9AgCSD5QOAJB8oHQAgOQDpQMAJJ+JULoLv3n/gLxdWL9K64ehDEgQ8SidZOdUlzpF8pdROe8Mh9FGj5F4TW0iEHQxADACYtldvWyZ5XSLjSV7V3Fxd41w/jJ+zjuDZ7TRfXC8XfytZ0S4H5n77qUhrb8fQ5mQFwMAwyYGpTPfdaytgLSZDCHEurQVt5afv0yA886AGW30hBDtYgBgWMSgdNpMxtrTwWjWMzNaqEu761oEorMblfMOZbcszsOCfW2iGJT4RZe6tARWHt6xJci9xXqVt54pl70d6N/l3rbk7d0lJfXrpmv4qO4Bd6p9XQwADJxYdlevtUje2hmxRsr0X5WimPp6PVtczPFDO6NZL635D5/aK0cFOvm195819ad0O+1ez73/dj3fLPTYnuftlXWybZVJpZpWJaGtyoi9oy6zECB551YPrLy/6E5jCbfDruU2SDc+O6jVQnSgs1kmZ0xGOAcEN3z9fG2+PSCkGuliAGBYxPNEgtoc9Hrs0rZup1aG3dP2jr/pRpHuf+O4TxjNeuDe0/ZwS1ssWlvKapVahdABU96183XJNYawd93OFUpOJTMZ5iMRiNGs23UQYu31bW9LFlh5f9G9jZURogOddTraJe5xa1gfVf8e8KQa4mIAYNjE+i0Ta6rirNXkCiWPMw0bLVh78Zv6unWfhnLesYndJCVCdJU3zZDxdODwCNEDfhcDAMMmRqXjl2RcazWqE7TFImk8fdog9jBD4bwjJX6TFEX0KN400bHu/f6a4OnAIHxdYPzPitgDkS8GAAZKXEpn6vPs0tYq25bVSMBqtFZZy9Tr3G0TynmHMgCTFEX0KN40EeNt220I3QTOeoZIOlDAWadjboqOU5HHBcZbv0XUHujrYgBgkKTOzs5CFn329621v/w53vBGObU+6923GoQFHQguMut//dujPy2HKTnS3dVNfb1eWuvhLu0XdCAA4RiZ0hnlVL5OSi2YjvQJOhCA8IxM6XK1Xq82quBJAB0IQHgmYi8TAAA4F3DMAQBMJHDMAQAAF5i9AgCSD5QOAJB8oHQAgOQDpQMAJJ9JUTqjTPdEmwAbF8UG6HFlHqkeGDgAQAiJeS8T76601vFR3W2y0E6a/EvsqNvnxa8kt0XweVsHQQJgsMSkdH5eM9Y2alzpaLYvLqLZuHhDG+X1WWujvFZmJU2zMPV5e09d56CqJN04mO1z7A3RR+ahKwmoBwAgJxalC/Ca0RaLoe/jmPGE5jLLFUp0ezhzt9G2Nyd3NtSVlSRa5cBqJTsWS+tG2EUAXARicUFUeM2wFSVtsehYJ7htWawjrlmiqc/zxgeu4Z81HHQtVnH/8Uw4XaE9aZPMjEZI96jt7Nkr2/uclRQaTfeFk4dwMrHS9/fEcVfCzWa5DqBH/etxh3bvOy9xvfELJLUkAmAyGc4TCa2yVrKtBwRbFrrBGp0ldouNdNkgWuWgVaqv6yYxyvlOtSvZv5H3UmRDMklV7tAcpj6fr1PHCfNdxy93rqT1X2ubTjaHlISwXHs8bj42Xk8cVyXp2Wz7qEsIIUazk81S5XW01a8elSeO3PXGL5CpL61k7JqwhyaYbAapdPyKUq4g0xs6XLLNdFLplbY1nsrVWpmVdCrf4Zxa3DDbB3O3QYdkiqq8oU19PpVuFLvW7Wsbk0oQStqNokuR3DjKE8JRRpe/DEPmicNVoi0W6UlGs1PcXss0dk1ivut4hM5bj8oTR+F64xdIm8mQeh6PSkAiiMUFMYzXTK5QsuwLRZiXjttQJ2RUc5ezUZBX5QptlFPpozUxjjNfNd91rJmqvCQLX2txrVa3LgJcJdpiMdt5ZxrNTnFRS8+Sxq6x24jTv4JYrjd+gajJ1zZZSsHBEEw6sYzpFF4z7m9+yZ8vujxciFFmK0X5TrUr+p16ozaePmUCoKjKFdrU1+sl0c4g99hxYDWerlDhlJY09XnHinqdn0wKrWOjOFNfWmmHde7iKtEWi6SxtF7PzGj07/VwQqfyxFG63qgDmbpOp/8H3ao9xwVgQoln9hrK6cZ5vsjbsuRqXctRJZVKNQu1nL2ktF3RLEsZ1Wq4tlgk9XqGWTpLqhJDd4/avI2MtdLuuLo4djDSklple3bdnh5nWuoHzCXSdIqFX+TiKtEWi6RtaaS2WCTtkCM6lSeO0vVGGUirzHCNwEIdmGiG+LjujAAABM9JREFU6phj6vPpo7WRrG4PIXQsIUbYRQBMHOEdc4b6azDFc9CEhI4lxAi7CIAEM2QfiVxtZAYvQwgdS4gRdhEAiWVSfuEPAAD9A6UDACQfOOYAACaS4TnmQPUAABMBZq8AgOQDpQMAJB8oHQAg+UDpAADJB0o3Ko43F6Yq+9LDC5vHI0gIgAQTi9Idby5McXjv3/2KePfSU7y39H7FdXi/4q50v+KqnpMFsaT7GC3kTSMmZMHZCwubxwMMDQAIQWxjuuUXZxYvyH3xjl94tEFefi/e6HNz4sHjzSdbzv/2K1P3iVXt6y+eVPYJWXi0Mbf1xJaM/WerZKP2cFpWkpD9ypMvXlsp3Vi9WdlXpBEd93BsvzLFAp3pC/LmhA49/XD/bP/h9LlzBABwDGD2uqCfvd54c9+lddN37nlv9Bv37pHVZ1yx4+9fko2NZft/3TdzG48s5Zh+uK8v0IrmDq2a9l9tzd27M60oSRZ0phgLd5fJm+6xPI3zcbz55M1GTSZNx5vll/dYawYQGgAQlsGs003fuTe39Wqfm15O3xFUjRBC0g+/WXZGaGT/2Sq5dyfNKknfOPScQqYffrN8+PL7Y3K8+WRr+ZuH08qSHPuvtsiN9LQnDX5w5hqoCfNe+hqdWS8sTN1cPSRb96emFjaPj79/Se6RZ65JslVdefXGNw9Za+Q94J33OmnsV6YWNjcrnpoBAJEZ2hOJ6YffLG+9Em/0hbvLtkZxymW/qL9Y3rrvWfxaeLRBVp9tfv+SsHGcoiTleHPh/tbyCzrQk6fhZr8ydf/NhjUfZePCrfuv7p6dne3v75+93pgjyy/OzvYfTv/zx8PD1R/v0nnzBlkt26uGN1/ee+2ayspCW3WenZ29WN66703erpqrGQDQB4NTurkvPnevOi3clUmdvfC2/2zVUS72qn52dvZ6441bxKYffrO8tbp6g5dFeUlyvLkwdfPlvdfc+pk0DZ79V1tzkvmorZXehtpps+HmfuW+dEbrCe3UufBoY86bll319J17cz4ZAwACGIzS0XmoeKcv3OXnqhaWPGzaa25eph/ui2OehbvLZPmuR3iEkvuVqZs/fnMmLvBL0+iXz7/wSNA/N59skcPVm1NTU1NT9+mf1uQz1tAAgNAMQOno5I8OadzfDpM/gFy4u3y4uirMXOm5rvnc3BefKyJKSx5vPtmSj8PcabzpHhNCyPH3Lw+5fOwFtf1Nf2GavnOPTSyPN59szd27s/Bw/4zxYpnMbbx2xrXuHmCjuOPN8uqhRLsBALEQm9Jt3beX1p988Vr1PQn5A8iFRxtzkiHa9MPaF0/sSu+TF+rvXkhL/vPHQy4p9/TXTmP6YW2D0NFX+ccb9uhsQbemwVNTU6/SkqjTd+7NWU8kyPTD/Rc3aBU3V2/4JCnrgWXyioa5uXrjxZlidgwAODfncszpY9em482Fmz9+M/KbeoRpjEkPADDpfPzxx2PqmEPCPftMdhpj0gMAXCiG7JhDCFnQz8ZhODPCNMakBwC4QOAX/gCA5AOlAwAkHzjmAACSz7kccwAAYCLA7BUAkHygdACA5AOlAwAkHygdACD5QOkAAMkHSgcASD5QOgBA8oHSAQCSD5QOAJB8oHQAgOQDpQMAJB8oHQAg+fw/Hd0TNhvDxrwAAAAASUVORK5CYII=" width="419" height="255" class="img_KnJ7"></p>
<p><span style="background-color:#fbb656;border-radius:0.4rem;color:#fff;padding:0.2rem">Step 4</span>
检验MinGW-w64是否正确下载，若正确下载，运行下面的命令时会出现相应的版本信息。</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">gcc </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">g++ </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">gdb </span><span class="token parameter variable" style="color:#36acaa">--version</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="创建新文件并运行">创建新文件并运行<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E5%88%9B%E5%BB%BA%E6%96%B0%E6%96%87%E4%BB%B6%E5%B9%B6%E8%BF%90%E8%A1%8C" class="hash-link" aria-label="创建新文件并运行的直接链接" title="创建新文件并运行的直接链接">​</a></h2>
<p>我们需要在vscode中新建一个<code>.cpp</code>文件。然后点击右上角的运行按钮，选择 <strong>Run C/C++ File</strong>。若是第一次运行这个文件，选择 <strong>g++</strong>。若是要调试这个文件，在文件中加上断点，然后选中 <strong>Debug C/C++ File</strong>。若是第一次调试这个文件，选择 <strong>g++</strong>。</p>
<p><img loading="lazy" alt="g++" src="https://drbear.vercel.app/assets/images/run_Cpp-6a844407e716db8309dc85b169621633.png" width="594" height="171" class="img_KnJ7"></p>
<p>当然我们也可以用终端来运行文件。打开终端之后，进入到编译文件所在目录，以hello.cpp为例子</p>
<p><img loading="lazy" alt="run_in_terminal" src="data:image/png;base64,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" width="295" height="56" class="img_KnJ7"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="配置编译和调试功能">配置编译和调试功能<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%AF%91%E5%92%8C%E8%B0%83%E8%AF%95%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="配置编译和调试功能的直接链接" title="配置编译和调试功能的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="taskjson">task.json<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#taskjson" class="hash-link" aria-label="task.json的直接链接" title="task.json的直接链接">​</a></h3>
<p>vscode在第一次编译C++文件的时候，C++插件会自动创建<code>task.json</code>，这个<code>json</code>文件中包含的内容是：编译器编译时的配置，详细的内容可以查看<a href="https://code.visualstudio.com/docs/cpp/config-mingw#_understanding-tasksjson" target="_blank" rel="noopener noreferrer">官方教程</a></p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">tasks.json<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"tasks"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"cppbuild"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// 刚才选择选择的编译器列表中的描述</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"label"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"C/C++: g++.exe build and debug active file"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// 编译器的路径</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"command"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"D:\\MSYS2\\mingw64\\bin\\g++.exe"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// 传递给 g++ 命令的参数</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"args"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"-fdiagnostics-color=always"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"-g"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"${file}"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"-o"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"${fileDirname}\\${fileBasenameNoExtension}.exe"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"options"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string-property property" style="color:#36acaa">"cwd"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"${fileDirname}"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"problemMatcher"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string" style="color:#e3116c">"$gcc"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"group"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string-property property" style="color:#36acaa">"kind"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"build"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token string-property property" style="color:#36acaa">"isDefault"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// 任务列表中该任务的描述，官方强烈建议修改这个值以区分任务列表中的相似任务</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"detail"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Task generated by Debugger."</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"2.0.0"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>上面传给 g++ 命令的参数仅包括一个文件，若我们想要一次性编译多个文件并链接，可以修改参数：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token string-property property" style="color:#36acaa">"args"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">"-fdiagnostics-color=always"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">"-g"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">"${workspaceFolder}/*.cpp"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">"-o"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">"${workspaceFolder}\\myProgram.exe"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>这样，当我们编译文件的时候，就会将工作目录中的所有以<code>.cpp</code>为后缀的文件一起编译链接，最后在工作目录下生成一个<code>myProgram.exe</code>文件。这里的 workspaceFolder 是一个变量，可以查看<a href="https://code.visualstudio.com/docs/editor/variables-reference" target="_blank" rel="noopener noreferrer">变量参考</a>。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="launchjson">launch.json<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#launchjson" class="hash-link" aria-label="launch.json的直接链接" title="launch.json的直接链接">​</a></h3>
<p>vscode可以设置断点，查看监视来进行debug。同时还可以自定义debug的配置，在debug时会自动创建<code>launch.json</code>文件，这里面包含了debug的配置。详细的内容可以查阅：</p>
<ul>
<li><a href="https://code.visualstudio.com/docs/cpp/cpp-debug" target="_blank" rel="noopener noreferrer">在Vscode中调试C++程序</a></li>
<li><a href="https://code.visualstudio.com/docs/cpp/launch-json-reference" target="_blank" rel="noopener noreferrer">配置调试功能</a></li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">launch.json<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"0.2.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"configurations"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"C/C++: g++.exe build and debug active file"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"cppdbg"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"request"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"launch"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"program"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"${fileDirname}\\${fileBasenameNoExtension}.exe"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"args"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"stopAtEntry"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"cwd"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"${fileDirname}"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"environment"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"externalConsole"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"MIMode"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"gdb"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"miDebuggerPath"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"D:\\MSYS2\\ucrt64\\bin\\gdb.exe"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"setupCommands"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Enable pretty-printing for gdb"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"text"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-enable-pretty-printing"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"ignoreFailures"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Set Disassembly Flavor to Intel"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"text"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-gdb-set disassembly-flavor intel"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token string-property property" style="color:#36acaa">"ignoreFailures"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token string-property property" style="color:#36acaa">"preLaunchTask"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"C/C++: g++.exe build active file"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="c_cpp_propertiesjson">c_cpp_properties.json<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#c_cpp_propertiesjson" class="hash-link" aria-label="c_cpp_properties.json的直接链接" title="c_cpp_properties.json的直接链接">​</a></h3>
<p>可以通过修改<code>c_cpp_properties.json</code>这个文件来修改C++插件配置，也可以通过UI界面来修改，可以查看<a href="https://code.visualstudio.com/docs/cpp/config-mingw#_adding-additional-cc-settings" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<ol>
<li>通过命令行查找<code>C/C++: Edit configurations(UI)</code></li>
<li>按下enter，进入UI配置界面</li>
<li>在界面中修改内容，Vscode会把这些修改自动添加到<code>c_cpp_properties</code>中去</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="参考">参考<a href="https://drbear.vercel.app/blog/tools/Vscode-complie-C++#%E5%8F%82%E8%80%83" class="hash-link" aria-label="参考的直接链接" title="参考的直接链接">​</a></h2>
<ul>
<li><a href="https://code.visualstudio.com/docs/cpp/config-mingw" target="_blank" rel="noopener noreferrer"><strong>VScode官方文档</strong></a></li>
<li><a href="https://code.visualstudio.com/docs/editor/variables-reference" target="_blank" rel="noopener noreferrer"><strong>tasks.json的变量参考</strong></a></li>
<li><a href="https://code.visualstudio.com/docs/cpp/cpp-debug" target="_blank" rel="noopener noreferrer"><strong>在Vscode中调试C++程序</strong></a></li>
<li><a href="https://code.visualstudio.com/docs/cpp/launch-json-reference" target="_blank" rel="noopener noreferrer"><strong>配置调试功能</strong></a></li>
</ul>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="VScode" term="VScode"/>
        <category label="C++" term="C++"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[网站搭建过程]]></title>
        <id>https://drbear.vercel.app/blog/interest/build_website</id>
        <link href="https://drbear.vercel.app/blog/interest/build_website"/>
        <updated>2023-07-13T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[用docusaurus搭建网站]]></summary>
        <content type="html"><![CDATA[<p>在我自学的过程中发现，学了一些内容却不做笔记以及日常不应用的情况下，学过的内容很快就会遗忘，因此我开始做我自己的博客，用于记录我日常学习的笔记和一些疑难问题。这里我使用docusaurus来搭建我自己的博客。相关链接如下：</p>
<ul>
<li><a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noopener noreferrer">docusaurus官方网站</a></li>
</ul>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="一整体布局">一、整体布局<a href="https://drbear.vercel.app/blog/interest/build_website#%E4%B8%80%E6%95%B4%E4%BD%93%E5%B8%83%E5%B1%80" class="hash-link" aria-label="一、整体布局的直接链接" title="一、整体布局的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="11-导航栏navbar布局">1.1. 导航栏navbar布局<a href="https://drbear.vercel.app/blog/interest/build_website#11-%E5%AF%BC%EF%BF%BD%E8%88%AA%E6%A0%8Fnavbar%E5%B8%83%E5%B1%80" class="hash-link" aria-label="1.1. 导航栏navbar布局的直接链接" title="1.1. 导航栏navbar布局的直接链接">​</a></h3>
<p>仅修改 <u>docusaurus.config.mts</u> 中 <u>themeConfig</u> 的 <u>navbar</u> 选项内容即可。配置可以查看<a href="https://docusaurus.io/docs/api/themes/configuration#navbar" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="12-底部footer布局">1.2. 底部footer布局<a href="https://drbear.vercel.app/blog/interest/build_website#12-%E5%BA%95%E9%83%A8footer%E5%B8%83%E5%B1%80" class="hash-link" aria-label="1.2. 底部footer布局的直接链接" title="1.2. 底部footer布局的直接链接">​</a></h3>
<p>仅修改 <u>docusaurus.config.mts</u> 中 <u>themeConfig</u>的 <u>footer</u> 选项内容即可。只是要注意，每一个item都需要有 <code>label</code> 和 <code>to</code> 或 <code>href</code> 属性。详情可查看<a href="https://docusaurus.io/docs/api/themes/configuration#footer-links" target="_blank" rel="noopener noreferrer">官方文档</a>。</p>
<!-- -->
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="二博客">二、博客<a href="https://drbear.vercel.app/blog/interest/build_website#%E4%BA%8C%E5%8D%9A%E5%AE%A2" class="hash-link" aria-label="二、博客的直接链接" title="二、博客的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="21-生成博客">2.1. 生成博客<a href="https://drbear.vercel.app/blog/interest/build_website#21-%E7%94%9F%E6%88%90%E5%8D%9A%E5%AE%A2" class="hash-link" aria-label="2.1. 生成博客的直接链接" title="2.1. 生成博客的直接链接">​</a></h3>
<p>只要在blog目录下新建<code>.md</code>或<code>.mdx</code>文件即可，这里我创建的文档是 <code>.mdx</code> 后缀的，因为这可以使用 <code>.md</code> 文件的语法，也可以在文档中加入React组件。但 docusaurus v3 依赖的 mdx v3.0 版本对于语法的约束更加严格了，可能会出现一些无法 resolve 的依赖问题，可以参考：</p>
<ul>
<li><a href="https://docusaurus.io/zh-CN/docs/migration/v3#common-mdx-problems" target="_blank" rel="noopener noreferrer">mdx 常见问题</a></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="22-博客列表">2.2. 博客列表<a href="https://drbear.vercel.app/blog/interest/build_website#22-%E5%8D%9A%E5%AE%A2%E5%88%97%E8%A1%A8" class="hash-link" aria-label="2.2. 博客列表的直接链接" title="2.2. 博客列表的直接链接">​</a></h3>
<p>博客的首页是博客列表页面，默认情况下，博客列表中的每一篇博客的全部内容都会显示出来。我们可以用<code>{/* truncate */}</code>来隐藏一些内容。在<code>{/* truncate */}</code>下的内容会在博客列表中隐藏，转为显示“阅读更多”。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">--</span><span class="token operator" style="color:#393A34">-</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">title</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">MDX</span><span class="token plain"> blog truncation </span><span class="token maybe-class-name">Example</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">--</span><span class="token operator" style="color:#393A34">-</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token maybe-class-name">All</span><span class="token plain"> these will be part </span><span class="token keyword" style="color:#00009f">of</span><span class="token plain"> the blog post summary</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* truncate */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token maybe-class-name">But</span><span class="token plain"> anything </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> here on down will not be</span><span class="token punctuation" style="color:#393A34">.</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>我们还可以控制博客列表显示多少篇博客的内容，还有一些别的操作，可以参考：</p>
<ul>
<li><a href="https://docusaurus.io/zh-CN/docs/blog#blog-list" target="_blank" rel="noopener noreferrer">博客list</a></li>
<li><a href="https://docusaurus.io/zh-CN/docs/api/plugins/@docusaurus/plugin-content-blog" target="_blank" rel="noopener noreferrer">博客插件</a></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="23-博客作者部分">2.3. 博客作者部分<a href="https://drbear.vercel.app/blog/interest/build_website#23-%E5%8D%9A%E5%AE%A2%E4%BD%9C%E8%80%85%E9%83%A8%E5%88%86" class="hash-link" aria-label="2.3. 博客作者部分的直接链接" title="2.3. 博客作者部分的直接链接">​</a></h3>
<p>docusaurus中有内联作者和全局作者两种表示方法。</p>
<p><strong>（1）内联作者</strong></p>
<p>内联作者是根据 markdown 文档上的 <a href="https://docusaurus.io/zh-CN/docs/api/plugins/@docusaurus/plugin-content-blog#markdown-front-matter" target="_blank" rel="noopener noreferrer">front matter</a> 来生成。</p>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">authors</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> BearProfessor</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/bear</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">doctor</span><span class="token punctuation" style="color:#393A34">?</span><span class="token plain">tab=repositories</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">image_url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//upload.cc/i1/2023/07/14/ni9LyD.png</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">email</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> bear_professor@outlook.com</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">---</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>如果想要得到图片的 URL 地址，就需要用到图床，我是将图片存储在腾讯云的对象存储中。</p>
</blockquote>
<p><strong>（2）全局作者</strong></p>
<p>其实就是把上面的front matter放入一个专门的文件中，需要的时候在front matter中调用即可</p>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">authors.yml<span style="flex:1;text-align:right">yml</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">bear</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 小熊博士</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">title</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 转码ing</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/bear</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">doctor</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">image_url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> /img/logo.webp</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">doc.mdx<span style="flex:1;text-align:right">yml</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">author</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> bear</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">---</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="24-博客日期">2.4. 博客日期<a href="https://drbear.vercel.app/blog/interest/build_website#24-%E5%8D%9A%E5%AE%A2%E6%97%A5%E6%9C%9F" class="hash-link" aria-label="2.4. 博客日期的直接链接" title="2.4. 博客日期的直接链接">​</a></h3>
<p>用<code>date</code>属性即可。这有多种格式，具体的格式可以查看<a href="https://docusaurus.io/zh-CN/docs/blog#blog-post-date" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">date</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 2023</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">07</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">14T18</span><span class="token punctuation" style="color:#393A34">:</span><span class="token number" style="color:#36acaa">00</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">---</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="25-博客侧边栏">2.5. 博客侧边栏<a href="https://drbear.vercel.app/blog/interest/build_website#25-%E5%8D%9A%E5%AE%A2%E4%BE%A7%E8%BE%B9%E6%A0%8F" class="hash-link" aria-label="2.5. 博客侧边栏的直接链接" title="2.5. 博客侧边栏的直接链接">​</a></h3>
<p>在 <u>docusaurus.config.mts</u> 中的 preset 选项中可以设置相应的博客侧边栏，可查看<a href="https://docusaurus.io/zh-CN/docs/blog#blog-sidebar" target="_blank" rel="noopener noreferrer">官方文档</a>。然而，官方文档中也提及——我们可以使用<strong>博客插件</strong>来设置博客侧边栏，在我们网站的主题中也是这么设置的。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="26-博客插件">2.6. 博客插件<a href="https://drbear.vercel.app/blog/interest/build_website#26-%E5%8D%9A%E5%AE%A2%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="2.6. 博客插件的直接链接" title="2.6. 博客插件的直接链接">​</a></h3>
<p>我们的网站主题里面对博客插件进行了一定的配置，可以在<a href="https://docusaurus.io/zh-CN/docs/api/plugins/@docusaurus/plugin-content-blog#configuration" target="_blank" rel="noopener noreferrer">官方博客插件文档</a>中查看每一个键值对的具体含义和一些其他的配置选项。</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">docusaurus.config.mts<span style="flex:1;text-align:right">js</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">config</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Config</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">plugins</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// 把插件名称和配置对象放在一个二元组中，可以对这个插件进行配置。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token string" style="color:#e3116c">'./src/plugin/plugin-content-blog'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 为了实现全局 blog 数据，必须改写 plugin-content-blog 插件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">path</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'blog'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 博客内容目录的文件系统路径，相对于站点目录</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// 直接编辑博客文件，完全忽略这个变量就会禁用编辑链接。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// editUrl: ({ locale, blogDirPath, blogPath, permalink }) =&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">//   `https://github.com/kuizuo/blog/edit/main/${blogDirPath}/${blogPath}`,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">editLocalizedFiles</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">blogDescription</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'学习即是生活'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 用于增进 SEO 的博客页面元描述。</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">blogSidebarCount</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">12</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">blogSidebarTitle</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Blogs'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 博客侧边栏标题</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">postsPerPage</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">12</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">showReadingTime</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token function-variable function" style="color:#d73a49">readingTime</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter"> content</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> frontMatter</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> defaultReadingTime </span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token function" style="color:#d73a49">defaultReadingTime</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> content</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">options</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">wordsPerMinute</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">300</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// 博客订阅源</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// feedOptions: {</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">//   type: 'all',</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">//   title: '小熊博士',</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">//   copyright: `Copyright © ${new Date().getFullYear()} 小熊博士 Built with Docusaurus.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">//   &lt;p&gt;&lt;a href="http://beian.miit.gov.cn/" class="footer_lin"&gt;${beian}&lt;/a&gt;&lt;/p&gt;`,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// },</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token spread operator" style="color:#393A34">...</span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="27-front-matter">2.7. front matter<a href="https://drbear.vercel.app/blog/interest/build_website#27-front-matter" class="hash-link" aria-label="2.7. front matter的直接链接" title="2.7. front matter的直接链接">​</a></h3>
<p>博客也有前言属性，具体有什么项，每一项的值应该是什么类型可以查看<a href="https://docusaurus.io/zh-CN/docs/api/plugins/@docusaurus/plugin-content-blog#markdown-front-matter" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="三文档">三、文档<a href="https://drbear.vercel.app/blog/interest/build_website#%E4%B8%89%E6%96%87%E6%A1%A3" class="hash-link" aria-label="三、文档的直接链接" title="三、文档的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="31-创建文档">3.1 创建文档<a href="https://drbear.vercel.app/blog/interest/build_website#31-%E5%88%9B%E5%BB%BA%E6%96%87%E6%A1%A3" class="hash-link" aria-label="3.1 创建文档的直接链接" title="3.1 创建文档的直接链接">​</a></h3>
<p>我们在docs文件夹下创建的 <code>.md</code> 和 <code>.mdx</code> 文档将会被渲染为文档页面。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="32-文档属性">3.2 文档属性<a href="https://drbear.vercel.app/blog/interest/build_website#32-%E6%96%87%E6%A1%A3%E5%B1%9E%E6%80%A7" class="hash-link" aria-label="3.2 文档属性的直接链接" title="3.2 文档属性的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="321-front-matter">3.2.1 front matter<a href="https://drbear.vercel.app/blog/interest/build_website#321-front-matter" class="hash-link" aria-label="3.2.1 front matter的直接链接" title="3.2.1 front matter的直接链接">​</a></h4>
<p>文件的前言是用于给doc页面提供额外的元数据。示例：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">--</span><span class="token operator" style="color:#393A34">-</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> doc</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">markdown</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">title</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Docs</span><span class="token plain"> </span><span class="token maybe-class-name">Markdown</span><span class="token plain"> </span><span class="token maybe-class-name">Features</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">hide_title</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">hide_table_of_contents</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">sidebar_label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Markdown</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">sidebar_position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">3</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">pagination_label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Markdown</span><span class="token plain"> features</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">custom_edit_url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">github</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">com</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">facebook</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">docusaurus</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">edit</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">main</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">docs</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">api</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">doc</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">markdown</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">md</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">How</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">do</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">I</span><span class="token plain"> find you when </span><span class="token constant" style="color:#36acaa">I</span><span class="token plain"> cannot solve </span><span class="token keyword" style="color:#00009f">this</span><span class="token plain"> problem</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">keywords</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">-</span><span class="token plain"> docs</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">-</span><span class="token plain"> docusaurus</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">image</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token operator" style="color:#393A34">:</span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">i</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">imgur</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">com</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">mErPwqL</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">png</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">slug</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token plain">myDoc</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token literal-property property" style="color:#36acaa">last_update</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">date</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token operator" style="color:#393A34">/</span><span class="token number" style="color:#36acaa">1</span><span class="token operator" style="color:#393A34">/</span><span class="token number" style="color:#36acaa">2000</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">author</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> custom author name</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">--</span><span class="token operator" style="color:#393A34">-</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>若要了解front matter有什么属性，对应什么值，有什么作用，参考<a href="https://docusaurus.io/zh-CN/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="322-文档结构">3.2.2 文档结构<a href="https://drbear.vercel.app/blog/interest/build_website#322-%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84" class="hash-link" aria-label="3.2.2 文档结构的直接链接" title="3.2.2 文档结构的直接链接">​</a></h4>
<p>这里的文档结构并不是说在本地文件夹中的文档结构，而是<strong>指网站中的文档结构</strong>。这里主要涉及到两个属性：id 和 slug</p>
<ol>
<li>当手写侧边栏，或这使用与文档相关的布局或钩子时，ID 会被用来指代某篇文档。</li>
<li>使用 slug 前言可以更改文档的 URL。</li>
</ol>
<p>从上面两个关于这两个前言的描述来看，可以更加明确地体会到，这是配置博客网站的文件结构。当然，查看<a href="https://docusaurus.io/zh-CN/docs/create-doc#organizing-folder-structure" target="_blank" rel="noopener noreferrer">官方文档</a>可以发现：这两个前言属性的默认值是根据文件的本地结构来生成的。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="33-侧边栏">3.3 侧边栏<a href="https://drbear.vercel.app/blog/interest/build_website#33-%E4%BE%A7%E8%BE%B9%E6%A0%8F" class="hash-link" aria-label="3.3 侧边栏的直接链接" title="3.3 侧边栏的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="331-侧边栏的具体类型">3.3.1 侧边栏的具体类型<a href="https://drbear.vercel.app/blog/interest/build_website#331-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E7%9A%84%E5%85%B7%E4%BD%93%E7%B1%BB%E5%9E%8B" class="hash-link" aria-label="3.3.1 侧边栏的具体类型的直接链接" title="3.3.1 侧边栏的具体类型的直接链接">​</a></h4>
<ol>
<li>Doc：链接到一个doc页面</li>
<li>link：可以连接到任意一个页面，无论是内部页面还是外部页面</li>
<li>category：创建一个侧边栏的下拉菜单</li>
<li>autogenerated：自动产生侧边栏切片</li>
</ol>
<p>还有一些其他类型的侧边栏项目，详细内容查看<a href="https://docusaurus.io/docs/sidebar/items" target="_blank" rel="noopener noreferrer">官方文档</a>。而这些侧边栏项目代码可能有<a href="https://docusaurus.io/docs/sidebar/items#using-shorthands" target="_blank" rel="noopener noreferrer">简写的格式</a>。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="332-指定侧边栏的顺序">3.3.2 指定侧边栏的顺序<a href="https://drbear.vercel.app/blog/interest/build_website#332-%E6%8C%87%E5%AE%9A%E4%BE%A7%E8%BE%B9%E6%A0%8F%E7%9A%84%E9%A1%BA%E5%BA%8F" class="hash-link" aria-label="3.3.2 指定侧边栏的顺序的直接链接" title="3.3.2 指定侧边栏的顺序的直接链接">​</a></h4>
<p>侧边栏采用的自动生成Autogenerated，默认是按照字母的顺序来排列的，我们可以用<u>front matter</u>来指定文档的顺序。</p>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">文档的侧边栏顺序<span style="flex:1;text-align:right">yml</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">sidebar_position</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">sidebar_label</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 文档名称</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">title</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 文档标题</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">---</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>我们也可以指定目录的顺序，只要在目录中添加一个 <code>_category_.yml</code>，在其中指定目录顺序即可。</p>
<div class="language-yml codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">_category_.yml<span style="flex:1;text-align:right">yml</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-yml codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">"position: 2.5"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="333-自定义侧边栏">3.3.3 自定义侧边栏<a href="https://drbear.vercel.app/blog/interest/build_website#333-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BE%A7%E8%BE%B9%E6%A0%8F" class="hash-link" aria-label="3.3.3 自定义侧边栏的直接链接" title="3.3.3 自定义侧边栏的直接链接">​</a></h4>
<p>若在网站中，希望出现不同的侧边栏，就需要我们自定义侧边栏项目。</p>
<p>🔔举个例子：在navbar中，有两项导航按钮，分别是“知识大门”和“算法”，它们链接的文档都是在docs文件夹中，但我们想要<strong>点击这两个内容会出现不同的侧边栏</strong>，这就需要在<code>sidebar.js</code>文件中自定义侧边栏（可以定义侧边栏包含什么内容）。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">sidebar.js<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// 我们在下面定义了两个侧边栏项目</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> sidebars </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 这是知识大门导航栏所对应的侧边栏项目</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">knowledge</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string" style="color:#e3116c">'intro'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">//这是指intro.mdx, doc类型的简写</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// .......</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 这是算法导航栏对应的侧边栏项目</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">algorithm</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token string" style="color:#e3116c">'algorithm/intro'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// ......</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>我们还需要将导航栏项目设置为侧边栏链接类型docsidebar，还有一些其他配置，查看<a href="https://docusaurus.io/zh-CN/docs/next/api/themes/configuration#navbar-doc-sidebar" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">docusaurus.config.mts<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token literal-property property" style="color:#36acaa">themeConfig</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">navbar</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">items</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'docSidebar'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">sidebarId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'knowledge'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 这个导航栏项目链接到的侧边栏项目的id</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'right'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'知识大门'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'docSidebar'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">sidebarId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'algorithm'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'right'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'算法'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="334-侧边栏隐藏">3.3.4 侧边栏隐藏<a href="https://drbear.vercel.app/blog/interest/build_website#334-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E9%9A%90%E8%97%8F" class="hash-link" aria-label="3.3.4 侧边栏隐藏的直接链接" title="3.3.4 侧边栏隐藏的直接链接">​</a></h4>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_P25_">docusaurus.config.mts<span style="flex:1;text-align:right">javascript</span></div><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">themeConfig</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">docs</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">sidebar</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">hideable</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="335-autogenerated"><a href="https://docusaurus.io/docs/sidebar/autogenerated" target="_blank" rel="noopener noreferrer">3.3.5 autogenerated</a><a href="https://drbear.vercel.app/blog/interest/build_website#335-autogenerated" class="hash-link" aria-label="335-autogenerated的直接链接" title="335-autogenerated的直接链接">​</a></h4>
<ol>
<li>使用 <code>type:autogenerated</code> 可以自动生成侧边栏，每一个文件夹会生成一个 <code>category</code> 类型的侧边栏，每一个文件会生成一个 <code>doc</code> 类型的侧边栏。</li>
<li>autogenerated产生的侧边栏，无法在 sidebar.js 文件中进行自定义。对于文件而言，可以在 front matter 中进行侧边栏自定义，对于 category 而言，可以在目录中添加_category_.yml   文件，在这个文件中进行声明。</li>
<li>不是 autogenerated 类型的侧边栏，都是从 sidebar.js 中读取侧边栏信息；而对于 autogenerated 类型的侧边栏，则是从文件中读取信息——从文件中读取 front matter ，从文件夹中的_category_.yml 或是_category_.json 读取侧边栏配置信息。如何在文件中定义侧边栏配置信息可以查看<a href="https://docusaurus.io/docs/sidebar/autogenerated#autogenerated-sidebar-metadata" target="_blank" rel="noopener noreferrer">官方文档</a>。</li>
</ol>
<h4 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="336-侧边栏实例">3.3.6 侧边栏实例<a href="https://drbear.vercel.app/blog/interest/build_website#336-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%AE%9E%E4%BE%8B" class="hash-link" aria-label="3.3.6 侧边栏实例的直接链接" title="3.3.6 侧边栏实例的直接链接">​</a></h4>
<p>docusaurus官网给出了自己的侧边栏 sidebar.js 的<a href="https://docusaurus.io/docs/sidebar#complex-sidebars-example" target="_blank" rel="noopener noreferrer">文档</a>，可以结合官方的网站实际表现来看。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_BDBl" id="34-隐藏文件">3.4. 隐藏文件<a href="https://drbear.vercel.app/blog/interest/build_website#34-%E9%9A%90%E8%97%8F%E6%96%87%E4%BB%B6" class="hash-link" aria-label="3.4. 隐藏文件的直接链接" title="3.4. 隐藏文件的直接链接">​</a></h3>
<p>只要将文件命名为带有 _前缀的文件，就不会被Docusaurus显示出来</p>]]></content>
        <author>
            <name>小熊博士</name>
            <uri>https://github.com/bear-doctor</uri>
        </author>
        <category label="website" term="website"/>
    </entry>
</feed>