<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://tudoto.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://tudoto.github.io/" rel="alternate" type="text/html" /><updated>2025-10-19T07:12:40+00:00</updated><id>https://tudoto.github.io/feed.xml</id><title type="html">Tudoto’s website</title><subtitle>An amazing website.</subtitle><author><name>tudoto</name></author><entry><title type="html">10分钟学会git</title><link href="https://tudoto.github.io/%E6%95%99%E7%A8%8B/10%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9Agit/" rel="alternate" type="text/html" title="10分钟学会git" /><published>2024-05-19T00:00:00+00:00</published><updated>2024-05-19T00:00:00+00:00</updated><id>https://tudoto.github.io/%E6%95%99%E7%A8%8B/10%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9Agit</id><content type="html" xml:base="https://tudoto.github.io/%E6%95%99%E7%A8%8B/10%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9Agit/"><![CDATA[<aside class="sidebar__right">
<nav class="toc">
    <header><h4 class="nav__title"><i class="fas fa-file-alt"></i> 目录</h4></header>
<ul class="toc__menu" id="markdown-toc">
  <li><a href="#为什么要学git" id="markdown-toc-为什么要学git">为什么要学git</a></li>
  <li><a href="#git的基本概念" id="markdown-toc-git的基本概念">git的基本概念</a></li>
  <li><a href="#git的基本使用" id="markdown-toc-git的基本使用">git的基本使用</a>    <ul>
      <li><a href="#在本地配置一个github仓库" id="markdown-toc-在本地配置一个github仓库">在本地配置一个github仓库</a></li>
      <li><a href="#修改文件并提交到暂存区" id="markdown-toc-修改文件并提交到暂存区">修改文件，并提交到暂存区</a></li>
      <li><a href="#添加commit信息存入git目录" id="markdown-toc-添加commit信息存入git目录">添加commit信息，存入git目录</a></li>
    </ul>
  </li>
  <li><a href="#git-进阶之路" id="markdown-toc-git-进阶之路">git 进阶之路</a>    <ul>
      <li><a href="#指针的妙用" id="markdown-toc-指针的妙用">指针的妙用</a></li>
      <li><a href="#在不同的commit之间切换" id="markdown-toc-在不同的commit之间切换">在不同的commit之间切换</a></li>
      <li><a href="#工作区暂存区-git-目录的相互切换" id="markdown-toc-工作区暂存区-git-目录的相互切换">工作区、暂存区、 <code class="language-plaintext highlighter-rouge">Git</code> 目录的相互切换</a></li>
    </ul>
  </li>
  <li><a href="#tbc" id="markdown-toc-tbc">TBC</a></li>
</ul>

  </nav>
</aside>

<h1 id="为什么要学git">为什么要学git</h1>

<p>最近QQ同学正在基于<code class="language-plaintext highlighter-rouge">omnet</code>开发自己的工程，让她困惑的是：如何记住自己的每次修改？特别是在大型程序开发中，这并不是一件容易的事情。不过我们可以通过<code class="language-plaintext highlighter-rouge">git</code>来辅助管理代码改动，更妙的是，我们还能将其上传到代码托管网站，如<code class="language-plaintext highlighter-rouge">github</code>，<code class="language-plaintext highlighter-rouge">gitee</code>上，实现多人同时开发。本文将分别从<code class="language-plaintext highlighter-rouge">git</code>的基本概念，<code class="language-plaintext highlighter-rouge">git</code>的使用，将<code class="language-plaintext highlighter-rouge">git</code>上传到<code class="language-plaintext highlighter-rouge">github</code>三个方面阐述git的用法。</p>

<h1 id="git的基本概念">git的基本概念</h1>

<p>什么是<code class="language-plaintext highlighter-rouge">git</code>呢？不严谨的来说，<code class="language-plaintext highlighter-rouge">git</code>实际上是对每次提交做一次快照(<code class="language-plaintext highlighter-rouge">snapshot</code>)，并且管理这一系列快照的工具。</p>

<p><img src="/assets/images/git.png" alt="alt text" />
如上图所示，<code class="language-plaintext highlighter-rouge">github</code>由三个区组成，分别是工作区、暂存区以及 <code class="language-plaintext highlighter-rouge">Git</code> 目录。并且这三个部分可以通过箭头的形式进行转换。</p>

<ul>
  <li>工作区：顾名思义，是工作的区域，我们对代码所有的修改在这个区进行，此时文件的状态为<strong>已修改（modified）</strong>，使用<code class="language-plaintext highlighter-rouge">git add</code> 可以将结果存入暂存区。</li>
  <li>暂存区：使用<code class="language-plaintext highlighter-rouge">git add</code>后，对此时的工作区做快照，存在暂存区，此时文件状态为<strong>已暂存（staged）</strong>。用户可以在工作区继续修改，通过<code class="language-plaintext highlighter-rouge">git add</code>多次更新快照。结束修改后，通过<code class="language-plaintext highlighter-rouge">git commit</code> 添加一些对此次修改的描述，并进行提交。</li>
  <li><code class="language-plaintext highlighter-rouge">Git</code> 目录：当提交完修改后，这笔提交就正式存入了<code class="language-plaintext highlighter-rouge">Git</code> 目录中。可以使用<code class="language-plaintext highlighter-rouge">git log</code>查看每笔提交的具体内容。我们向云端的代码仓上传和下载的也是这个部分的内容。</li>
</ul>

<h1 id="git的基本使用">git的基本使用</h1>

<h2 id="在本地配置一个github仓库">在本地配置一个github仓库</h2>

<ol>
  <li>使用<code class="language-plaintext highlighter-rouge">git -v</code> 查看你本地是否有<code class="language-plaintext highlighter-rouge">git</code>。如果没有，请根据你的平台，对应下载<code class="language-plaintext highlighter-rouge">git</code>工具。</li>
  <li>在合适的位置新建一个文件夹，使用<code class="language-plaintext highlighter-rouge">git init</code>来初始化git仓库。</li>
</ol>

<h2 id="修改文件并提交到暂存区">修改文件，并提交到暂存区</h2>

<ul>
  <li>新建一个文件，这就是我们需要提交的文件</li>
  <li>使用<code class="language-plaintext highlighter-rouge">git status</code>来查看工作区此时的情况
<img src="/assets/images/gitexample.png" alt="alt text" />
可以看到，这里出现了两条信息：</li>
</ul>

<ol>
  <li><code class="language-plaintext highlighter-rouge">Changes not staged for commit</code>:这说明git管理的文件中出现了修改。</li>
  <li><code class="language-plaintext highlighter-rouge">Untracked files</code>: 说明用户新建了文件，并且此文件尚未被<code class="language-plaintext highlighter-rouge">git</code>跟踪，需要手动使用<code class="language-plaintext highlighter-rouge">git add &lt;filename&gt;</code>通知<code class="language-plaintext highlighter-rouge">git</code>对其进行管理。</li>
</ol>

<p>当然，我们还可以通过<code class="language-plaintext highlighter-rouge">git add</code>加上一些选项，全部或部分的对修改进行管理。</p>

<p><strong>以下是这个阶段常用的一些命令：</strong></p>

<table>
  <thead>
    <tr>
      <th>命令</th>
      <th>含义</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>git status</td>
      <td>查看此时工作区的状态</td>
    </tr>
    <tr>
      <td>git diff</td>
      <td>查看此时工作区尚未保存到暂存区的，所有已被追踪的文件的具体变化</td>
    </tr>
    <tr>
      <td>git restore</td>
      <td>丢弃某些修改</td>
    </tr>
    <tr>
      <td>git add <code class="language-plaintext highlighter-rouge">&lt;file&gt;</code></td>
      <td>提交单个文件变化</td>
    </tr>
    <tr>
      <td>git add -A</td>
      <td>提交所有变化</td>
    </tr>
    <tr>
      <td>git add -u</td>
      <td>提交被修改（modified）和被删除（deleted）的文件, 不包括新文件（new</td>
    </tr>
    <tr>
      <td>git add .</td>
      <td>提交新文件（new）和被修改（modified）文件，不包括被删除（deleted）文件</td>
    </tr>
    <tr>
      <td>git add -h</td>
      <td>git add 查看帮助，git add –help可以查看更详细内容</td>
    </tr>
  </tbody>
</table>

<blockquote>
  <p>tips: 在每次提交前使用<code class="language-plaintext highlighter-rouge">git status</code>查看工作区状态是一个好习惯，它能确保我们每次提交不会遗漏修改！</p>
</blockquote>

<h2 id="添加commit信息存入git目录">添加commit信息，存入git目录</h2>

<p>前面已经说到，可以使用<code class="language-plaintext highlighter-rouge">git commit</code>写入评论信息。此处可能需要使用到<code class="language-plaintext highlighter-rouge">vim</code>，<code class="language-plaintext highlighter-rouge">vim</code>是一款常用于<code class="language-plaintext highlighter-rouge">linux</code>，<code class="language-plaintext highlighter-rouge">macos</code>下的文件编辑器，如果你对它的操作不熟悉，请自行谷歌学习。
<img src="/assets/images/gitcommit.png" alt="alt text" />
按照提示输入信息后退出，使用<code class="language-plaintext highlighter-rouge">git log</code>，我们就可以看到刚刚的提交了。
<img src="/assets/images/gitcommit2.png" alt="alt text" /><br />
<strong>当你想多次提交到同一个commit中，请使用git commit –amend。</strong></p>

<h1 id="git-进阶之路">git 进阶之路</h1>
<blockquote>

  <p>学完了上述内容，相信你还有很多疑问。比如说，我已经将某次修改提交到了git目录或是暂存区，但此时发现修改不对，难道要再重新手动把它改回来吗？是否有更便捷的方法呢？或是我想基于一份代码做多种修改，难道需要本地创建多个git仓库？这些问题在开发中每天都会遇到，接下来让我们一一解决它们。</p>

</blockquote>

<h2 id="指针的妙用">指针的妙用</h2>

<p>让我们回到<code class="language-plaintext highlighter-rouge">git log</code>显示的信息。这次让我们关注一些细节。
<img src="/assets/images/gitcommit3.png" alt="alt text" /><br />
可以看到commit后面跟了一串数字，我们把它叫做commit id，这是通过哈希算法得出的哈希值，在这里，我们只要知道这个值是唯一的，也就是说，每笔提交都拥有独一无二的commit id。</p>

<p>为了满足基于一份代码做多种修改的需求，<code class="language-plaintext highlighter-rouge">git</code>提出了<code class="language-plaintext highlighter-rouge">branch</code>的概念。何为<code class="language-plaintext highlighter-rouge">branch</code>，实际上是一个可以移动的指针。使用<code class="language-plaintext highlighter-rouge">git branch testing</code>，新建一个名为<code class="language-plaintext highlighter-rouge">testing</code>的新分支。再次使用<code class="language-plaintext highlighter-rouge">git log</code>查看<code class="language-plaintext highlighter-rouge">git</code>目录,可以看到多了一个<code class="language-plaintext highlighter-rouge">testing</code>的分支。
<img src="/assets/images/gitcommit4.png" alt="alt text" /><br />
此时的<code class="language-plaintext highlighter-rouge">git</code>目录如图所示：<br />
<img src="/assets/images/gitcommit5.png" alt="alt text" /><br />
<code class="language-plaintext highlighter-rouge">98ca9,34ac2,f30ab</code>指代三次<code class="language-plaintext highlighter-rouge">commit</code>的<code class="language-plaintext highlighter-rouge">commit id</code>，提交顺序为<code class="language-plaintext highlighter-rouge">98ca9 -&gt; 34ac2 -&gt; f30ab</code>。</p>

<p><strong>注意:<code class="language-plaintext highlighter-rouge">HEAD</code>是一个特殊的指针，它永远指向当前<code class="language-plaintext highlighter-rouge">branch</code>的最新一笔提交。</strong></p>

<p>接下来使用<code class="language-plaintext highlighter-rouge">git checkout testing</code>切换到已经存在的分支, 可以看到<code class="language-plaintext highlighter-rouge">HEAD</code>指针此时指向了<code class="language-plaintext highlighter-rouge">testing</code>分支。</p>

<p><img src="/assets/images/gitcommit11.png" alt="alt text" /></p>

<p>此时<code class="language-plaintext highlighter-rouge">git</code>目录就变为了：</p>

<p><img src="/assets/images/gitcommit6.png" alt="alt text" /></p>

<p>我们再进行一次提交，会看到此时的<code class="language-plaintext highlighter-rouge">testing</code>指针向前移动，指向了最新一次提交的<code class="language-plaintext highlighter-rouge">commit id</code>。而<code class="language-plaintext highlighter-rouge">master</code>的指针却不会移动。
<img src="/assets/images/gitcommit7.png" alt="alt text" /><br />
让我们使用<code class="language-plaintext highlighter-rouge">git checkout master</code> 切换回<code class="language-plaintext highlighter-rouge">master</code>分支，可以看到<code class="language-plaintext highlighter-rouge">HEAD</code>指向了<code class="language-plaintext highlighter-rouge">master</code>。并且<code class="language-plaintext highlighter-rouge">git log</code>中，最新的<code class="language-plaintext highlighter-rouge">commit</code>不见了。
<img src="/assets/images/gitcommit8.png" alt="alt text" /><br />
由此可以知道，利用<code class="language-plaintext highlighter-rouge">branch</code>的特性，我们可以在任意<code class="language-plaintext highlighter-rouge">commit</code>处创建新的<code class="language-plaintext highlighter-rouge">branch</code>，并且不同的<code class="language-plaintext highlighter-rouge">branch</code>之间互不影响。</p>

<p><img src="/assets/images/gitcommit9.png" alt="alt text" /></p>

<h2 id="在不同的commit之间切换">在不同的commit之间切换</h2>

<p>假设QQ已经进行了三次提交，<code class="language-plaintext highlighter-rouge">commit id</code>为<code class="language-plaintext highlighter-rouge">a - b - c</code>，此时QQ同学突然发现自己需要退回到a时候的状态，她要怎么做呢？前面我们讲到，<code class="language-plaintext highlighter-rouge">git</code>使用<code class="language-plaintext highlighter-rouge">HEAD</code>指针来指示此分支的最后一笔提交，那我们可以将<code class="language-plaintext highlighter-rouge">HEAD</code>和分支的指针都指向某一个<code class="language-plaintext highlighter-rouge">commit id</code>处。而<code class="language-plaintext highlighter-rouge">git reset</code> 就是这样的命令。<br />
针对刚刚的场景，QQ同学可以采用 <code class="language-plaintext highlighter-rouge">git reset --hard a</code>，让指针重新指向<code class="language-plaintext highlighter-rouge">commit id</code>为 a 处，也可以使用<code class="language-plaintext highlighter-rouge">git reset --hard HEAD~2</code>。来让<code class="language-plaintext highlighter-rouge">HEAD</code>的指针回退2个提交。
此外，<code class="language-plaintext highlighter-rouge">git reset</code>不仅可以用来回退，只要你知道<code class="language-plaintext highlighter-rouge">commit id</code>，<code class="language-plaintext highlighter-rouge">HEAD</code>指针也可以重新指向<code class="language-plaintext highlighter-rouge">commit c</code>的位置。<br />
如果你很不幸的忘记了自己是如何移动<code class="language-plaintext highlighter-rouge">HEAD</code>指针的，也没有关系。使用<code class="language-plaintext highlighter-rouge">git reflog</code>可以查看你的每次操作。
<img src="/assets/images/gitcommand.png" alt="alt text" />
第一部分是HEAD每次操作指向的<code class="language-plaintext highlighter-rouge">commit id</code>，这里使用的较短的哈希值，和<code class="language-plaintext highlighter-rouge">git log</code>中的长哈希值是对应的，也等效于<code class="language-plaintext highlighter-rouge">HEAD@{i}</code>，也就是说使用<code class="language-plaintext highlighter-rouge">git reset --hard 99678a8</code> 与<code class="language-plaintext highlighter-rouge">git reset --hard HEAD@{4}</code>是等效的。</p>

<p>第二部分可以看到，<code class="language-plaintext highlighter-rouge">git reflog</code>还显示了当时指向<code class="language-plaintext highlighter-rouge">commit id</code>的对应指针。</p>

<blockquote>
  <p>要注意，git reset的本质是移动指针，请你思考一下，在这种情况下，使用<code class="language-plaintext highlighter-rouge">git reset --hard 87ab2</code>，git目录是怎样变化的呢？
<img src="/assets/images/gitcommit9.png" alt="alt text" /></p>
</blockquote>

<h2 id="工作区暂存区-git-目录的相互切换">工作区、暂存区、 <code class="language-plaintext highlighter-rouge">Git</code> 目录的相互切换</h2>

<ul>
  <li>
    <p><code class="language-plaintext highlighter-rouge">Git</code> 目录回到暂存区<br />
前面我们讲到如何使用<code class="language-plaintext highlighter-rouge">git reset --hard</code>，而其实还有一个非常相似的命令<code class="language-plaintext highlighter-rouge">git reset --soft</code>。它的区别是，此时会将这条<code class="language-plaintext highlighter-rouge">commit</code>的内容回退到暂存区，我们可以重新使用<code class="language-plaintext highlighter-rouge">git commit</code>来将它提交到git目录。</p>
  </li>
  <li>
    <p>暂存区回到工作区<br />
使用<code class="language-plaintext highlighter-rouge">git reset [file]</code>回退单个文件或是<code class="language-plaintext highlighter-rouge">git reset</code>回退所有文件。</p>
  </li>
</ul>

<p><img src="/assets/images/gitref.png" alt="alt text" /></p>

<h1 id="tbc">TBC</h1>

<ul>
  <li>使用github管理你的代码仓库</li>
</ul>]]></content><author><name>tudoto</name></author><category term="教程" /><category term="git" /><category term="中文" /><category term="写给QQ同学的教程" /><summary type="html"><![CDATA[尽量简单的介绍git原理，以及如何使用git管理工程的心得]]></summary></entry><entry><title type="html">初识爬虫：使用puppeteer抓取数据</title><link href="https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%88%9D%E8%AF%86%E7%88%AC%E8%99%AB-%E4%BD%BF%E7%94%A8puppeteer%E6%8A%93%E5%8F%96%E6%95%B0%E6%8D%AE/" rel="alternate" type="text/html" title="初识爬虫：使用puppeteer抓取数据" /><published>2024-05-04T00:00:00+00:00</published><updated>2024-05-04T00:00:00+00:00</updated><id>https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%88%9D%E8%AF%86%E7%88%AC%E8%99%AB%EF%BC%9A%E4%BD%BF%E7%94%A8puppeteer%E6%8A%93%E5%8F%96%E6%95%B0%E6%8D%AE</id><content type="html" xml:base="https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%88%9D%E8%AF%86%E7%88%AC%E8%99%AB-%E4%BD%BF%E7%94%A8puppeteer%E6%8A%93%E5%8F%96%E6%95%B0%E6%8D%AE/"><![CDATA[<aside class="sidebar__right">
<nav class="toc">
    <header><h4 class="nav__title"><i class="fas fa-file-alt"></i> 目录</h4></header>
<ul class="toc__menu" id="markdown-toc">
  <li><a href="#什么是爬虫" id="markdown-toc-什么是爬虫">什么是爬虫</a></li>
  <li><a href="#为什么要使用puppeteer" id="markdown-toc-为什么要使用puppeteer">为什么要使用puppeteer？</a></li>
  <li><a href="#在macos上安装puppeteer" id="markdown-toc-在macos上安装puppeteer">在macos上安装puppeteer</a>    <ul>
      <li><a href="#1-安装node" id="markdown-toc-1-安装node">1. 安装node</a></li>
      <li><a href="#2-初始化puppeteer" id="markdown-toc-2-初始化puppeteer">2. 初始化puppeteer</a></li>
      <li><a href="#3-调试并运行你的第一个demo" id="markdown-toc-3-调试并运行你的第一个demo">3. 调试并运行你的第一个demo</a></li>
    </ul>
  </li>
  <li><a href="#3-puppeteer初实践" id="markdown-toc-3-puppeteer初实践">3. puppeteer初实践</a></li>
</ul>

  </nav>
</aside>

<h2 id="什么是爬虫">什么是爬虫</h2>

<p><strong>让我们通过ai快速认识一下这个概念：</strong></p>
<blockquote>
  <p>爬虫，又称为网页蜘蛛或网络机器人，是一种按照一定规则，自动抓取万维网信息的程序或脚本。它们的主要目的是从互联网上获取数据，包括但不限于网页内容、图片、视频等。爬虫可以帮助用户快速获取大量的网络数据，特别是在数据量大、手动输入过于繁琐的情况下，这些工具能够极大地提高数据采集的效率和准确性。</p>
</blockquote>

<h2 id="为什么要使用puppeteer">为什么要使用puppeteer？</h2>

<p>puppeteer是一款强大的网页自动化工具，它可以自动执行任务，并获取对于网页数据，因此可以用它作为爬虫来使用。谷歌官方的版本是通过js调用的，但是它在<code class="language-plaintext highlighter-rouge">python</code>、<code class="language-plaintext highlighter-rouge">ruby</code>、<code class="language-plaintext highlighter-rouge">go</code>上都有对应的移植版本。相比于老牌的scrapy框架，它的优势是在使用动态加载的当下，前端呈现的内容是由复杂的javascript控制的，对于混淆的程序，还需要去逆向分析很久。puppeteer在牺牲效率的情况下，提供了一种对新手更友好的爬虫思路。</p>

<h2 id="在macos上安装puppeteer">在macos上安装puppeteer</h2>

<h3 id="1-安装node">1. 安装node</h3>

<p>我尝试使用的是javascript版本的puppeteer。因此需要先确保有node环境。 进入官网下载<a href="https://nodejs.org/en/">安装包</a>，系统会自动配置环境。
安装完成后，输入<code class="language-plaintext highlighter-rouge">node -v</code>，确认是否安装成功</p>

<h3 id="2-初始化puppeteer">2. 初始化puppeteer</h3>

<ol>
  <li>新建文件夹，输入<code class="language-plaintext highlighter-rouge">npm init</code>, 安装成功后会生成一个package.json的文件。</li>
  <li>输入<code class="language-plaintext highlighter-rouge">npm i puppeteer</code>进行安装</li>
</ol>

<blockquote>
  <p>在实际操作的时候遇到了报错：<code class="language-plaintext highlighter-rouge">Error: Could not find Chromium</code>
这是因为puppeteer需要依赖Chromium，不确定是网络的问题还是平台的问题，导致Chromium包没有被成功下载。关于这个问题，网上有很多讨论。大部分都是建议手动执行命令，重新安装对应依赖：</p>

  <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd ./node_modules/puppeteer
npm run install
</code></pre></div>  </div>

  <p>不过这个方法对我无效,查阅资料后我选择了另一种解决方法：</p>

  <ol>
    <li><code class="language-plaintext highlighter-rouge">export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true</code> //跳过使用puppeteer来下载Chromium包的步骤</li>
    <li><code class="language-plaintext highlighter-rouge">export PUPPETEER_EXECUTABLE_PATH = [your Chromium path]</code> 或在<code class="language-plaintext highlighter-rouge">/.bashrc</code>中永久设置路径 //手动指定Chromium位置，这里我使用了<code class="language-plaintext highlighter-rouge">brew install --cask chromium</code> 去下载包，路径位于<code class="language-plaintext highlighter-rouge">'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'</code>。
同时，也可以在js文件中加入这个路径，[教程请戳](<a href="https://juejin.cn/">https://juejin.cn/</a> &gt;  post/6844903756857868301)。</li>
  </ol>
</blockquote>

<h3 id="3-调试并运行你的第一个demo">3. 调试并运行你的第一个demo</h3>

<ol>
  <li>在当前目录下新建名为<code class="language-plaintext highlighter-rouge">demo.js</code>的文件，并写入如下内容：</li>
</ol>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">puppeteer</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">puppeteer</span><span class="dl">'</span><span class="p">);</span>

<span class="p">(</span><span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">browser</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">puppeteer</span><span class="p">.</span><span class="nx">launch</span><span class="p">({</span><span class="na">headless</span><span class="p">:</span><span class="kc">false</span><span class="p">});</span>
  <span class="kd">const</span> <span class="nx">page</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">newPage</span><span class="p">();</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">goto</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">);</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">screenshot</span><span class="p">({</span><span class="na">path</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.png</span><span class="dl">'</span><span class="p">});</span>

  <span class="k">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">})();</span>
</code></pre></div></div>

<ol>
  <li>使用<code class="language-plaintext highlighter-rouge">node demo.js</code>命令运行这个文件</li>
  <li>如果一切正常，你会看到程序启动了一个窗口，并马上将其关闭，在<code class="language-plaintext highlighter-rouge">demo.js</code>的同级目录下，会出现一张名为<code class="language-plaintext highlighter-rouge">example.png</code>的截图</li>
</ol>

<h2 id="3-puppeteer初实践">3. puppeteer初实践</h2>

<p>在这里，我打算使用puppteer抓取东大某部门教授及他们的研究方向。接下来，我将一一介绍我是如何做到的。
首先，打开你想使用puppter爬取的网站，选中你想抓取的内容，右键-选择检查，右侧会出现网站的源码，你选中的部分将以灰色高亮，右键-copy-copy selector。</p>

<p><img src="/assets/images/selector.png" alt="selector" /></p>

<p>让我们分析一下复制到的内容：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#free &gt; table &gt; tbody:nth-child(1) &gt; tr:nth-child(2) &gt; td:nth-child(1) &gt; a
</code></pre></div></div>

<p>Selector是CSS规则的一部分，它可以让我们快速精确地选择元素。这个选择器的结构可以分解如下：</p>

<ul>
  <li>#free：选择ID为free的元素。</li>
  <li>table：选择ID为free的元素下的直接子元素table。</li>
  <li>tbody:nth-child(1)：选择table元素下的第一个tbody元素。</li>
  <li>tr:nth-child(2)：选择tbody元素下的第二个tr元素。</li>
  <li>td:nth-child(1)：选择tr元素下的第一个td元素。</li>
  <li>a：选择td元素中的a元素。</li>
</ul>

<p>也许你会想，这个选择器过滤出来的结果一定是唯一的吗，让我们使用devtools提供的终端来验证一下。</p>

<p><img src="/assets/images/selector1.png" alt="selector2" /></p>

<p>如图所示，使用命令<code class="language-plaintext highlighter-rouge">$$('#free &gt; table &gt; tbody:nth-child(1) &gt; tr:nth-child(2) &gt; td:nth-child(1) &gt; a')</code>，确实只给我们返回了一个结构体。<br />
那么按照这个思路，我们删除一些结构，筛选出所有的名单。接下来使用命令<code class="language-plaintext highlighter-rouge">$$eval("table &gt; tbody &gt; tr &gt; td &gt; a", (links) =&gt; links.map((x) =&gt; x.innerText))</code> 试着检查一下返回值吧。<br />
这里我们用到了回调函数<code class="language-plaintext highlighter-rouge">(links) =&gt; links.map((x) =&gt; x.innerText)</code>。这是一个箭头函数，它接收一个参数 <code class="language-plaintext highlighter-rouge">links</code>，这个参数是一个包含所有匹配的<code class="language-plaintext highlighter-rouge"> &lt;a&gt; </code>元素的数组。函数内部使用<code class="language-plaintext highlighter-rouge"> .map() </code>方法遍历这个数组，对每个<code class="language-plaintext highlighter-rouge">&lt;a&gt;</code>元素调用 <code class="language-plaintext highlighter-rouge">.innerText</code> 属性，获取元素的文本内容。这个函数的返回值是一个新的数组，包含了所有<code class="language-plaintext highlighter-rouge">&lt;a&gt;</code>元素<code class="language-plaintext highlighter-rouge">.innerText</code> 属性的文本内容。接下来就是对结果的保存和写入了，这部分内容比较简单，在这里我贴出我的源码。</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">puppeteer</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">puppeteer</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">fs</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">fs</span><span class="dl">'</span><span class="p">);</span>

<span class="p">(</span><span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">browser</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">puppeteer</span><span class="p">.</span><span class="nx">launch</span><span class="p">({</span> <span class="na">headless</span><span class="p">:</span> <span class="kc">false</span> <span class="p">});</span>
  <span class="kd">let</span> <span class="nx">courses</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">cs</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">mi</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ipc</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ice</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">m-i</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ci</span><span class="dl">"</span><span class="p">];</span>
  <span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="kd">let</span> <span class="nx">contents</span> <span class="o">=</span> <span class="p">[];</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">courses</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">page</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">newPage</span><span class="p">();</span>
    <span class="kd">let</span> <span class="nx">course</span> <span class="o">=</span> <span class="nx">courses</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
    <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">goto</span><span class="p">(</span><span class="s2">`https://www.i.u-tokyo.ac.jp/edu/course/</span><span class="p">${</span><span class="nx">course</span><span class="p">}</span><span class="s2">/members.shtml`</span><span class="p">,</span> <span class="p">{</span> <span class="na">waitUntil</span><span class="p">:</span> <span class="dl">'</span><span class="s1">networkidle0</span><span class="dl">'</span> <span class="p">});</span>
    <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">setDefaultTimeout</span><span class="p">(</span><span class="mi">60000</span><span class="p">);</span> <span class="c1">// 增加超时时间</span>
    <span class="kd">let</span> <span class="nx">titles</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">$$eval</span><span class="p">(</span><span class="dl">"</span><span class="s2">table &gt; tbody &gt; tr &gt; td &gt; a</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">links</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">links</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">x</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">x</span><span class="p">.</span><span class="nx">innerText</span><span class="p">));</span>
    <span class="kd">let</span> <span class="nx">content</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">$$eval</span><span class="p">(</span><span class="dl">"</span><span class="s2">table &gt; tbody &gt; tr &gt; td</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">links</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">links</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">x</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">x</span><span class="p">.</span><span class="nx">innerText</span><span class="p">));</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">titles</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
    <span class="nx">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">titles</span><span class="p">);</span>
    <span class="nx">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="nx">fs</span><span class="p">.</span><span class="nx">writeFile</span><span class="p">(</span><span class="dl">"</span><span class="s2">data.json</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="dl">'</span><span class="se">\t</span><span class="dl">'</span><span class="p">),</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">});</span>

  <span class="k">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">})();</span>
</code></pre></div></div>

<p>在这里，我还添加了<code class="language-plaintext highlighter-rouge">waitUntil: 'networkidle0' }</code>的配置选项，当网络连接保持空闲状态超过指定的时间（默认是500毫秒）时，Puppeteer 将认为页面已经加载完成。这可以避免资源未加载完引发的错误行为。同时增加超时时间，防止出现程序卡死。<br />
注意，此处有一些部门的名单无法输出，这是因为对应page的css样式不同，不过由于这只是一个简单的实验，也就不做细化了。</p>]]></content><author><name>tudoto</name></author><category term="教程" /><category term="puppeteer" /><category term="爬虫" /><category term="中文" /><category term="MacOs" /><summary type="html"><![CDATA[使用puppeteer抓取数据]]></summary></entry><entry><title type="html">年轻人的第一个网站：使用Minimal Mistakes一键部署你的website</title><link href="https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%B9%B4%E8%BD%BB%E4%BA%BA%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99-%E4%BD%BF%E7%94%A8MinimalMistakes%E9%83%A8%E7%BD%B2%E4%BD%A0%E7%9A%84website/" rel="alternate" type="text/html" title="年轻人的第一个网站：使用Minimal Mistakes一键部署你的website" /><published>2024-04-21T00:00:00+00:00</published><updated>2024-04-21T00:00:00+00:00</updated><id>https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%B9%B4%E8%BD%BB%E4%BA%BA%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99%EF%BC%9A%E4%BD%BF%E7%94%A8MinimalMistakes%E9%83%A8%E7%BD%B2%E4%BD%A0%E7%9A%84website</id><content type="html" xml:base="https://tudoto.github.io/%E6%95%99%E7%A8%8B/%E5%B9%B4%E8%BD%BB%E4%BA%BA%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99-%E4%BD%BF%E7%94%A8MinimalMistakes%E9%83%A8%E7%BD%B2%E4%BD%A0%E7%9A%84website/"><![CDATA[<aside class="sidebar__right">
<nav class="toc">
    <header><h4 class="nav__title"><i class="fas fa-file-alt"></i> 目录</h4></header>
<ul class="toc__menu" id="markdown-toc">
  <li><a href="#前言" id="markdown-toc-前言">前言</a>    <ul>
      <li><a href="#什么是github-pages" id="markdown-toc-什么是github-pages">什么是github pages</a></li>
      <li><a href="#fork你喜欢的模版" id="markdown-toc-fork你喜欢的模版">fork你喜欢的模版</a></li>
    </ul>
  </li>
  <li><a href="#minimal-mistakes" id="markdown-toc-minimal-mistakes">Minimal Mistakes</a>    <ul>
      <li><a href="#minimal-mistakes的基本架构" id="markdown-toc-minimal-mistakes的基本架构">Minimal Mistakes的基本架构</a></li>
      <li><a href="#修改个人主页资料" id="markdown-toc-修改个人主页资料">修改个人主页资料</a></li>
      <li><a href="#修改导航栏" id="markdown-toc-修改导航栏">修改导航栏</a></li>
      <li><a href="#添加你的第一篇日志" id="markdown-toc-添加你的第一篇日志">添加你的第一篇日志</a></li>
    </ul>
  </li>
  <li><a href="#其他尝试" id="markdown-toc-其他尝试">其他尝试</a>    <ul>
      <li><a href="#打开搜索栏" id="markdown-toc-打开搜索栏">打开搜索栏</a></li>
      <li><a href="#支持读者评论" id="markdown-toc-支持读者评论">支持读者评论</a></li>
      <li><a href="#修改网站字体" id="markdown-toc-修改网站字体">修改网站字体</a></li>
    </ul>
  </li>
  <li><a href="#总结" id="markdown-toc-总结">总结</a></li>
  <li><a href="#todo-list" id="markdown-toc-todo-list">todo list</a></li>
</ul>

  </nav>
</aside>

<h2 id="前言">前言</h2>

<p>如果你是一个新手，且完全不想折腾，其实更好的选择是购买一个云服务器，三大云都提供wordpress的镜像。WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。它可以让用户在无需接触代码的情况下，通过可视化模块搭建网站(想想我们曾经装扮过的qq空间)，且内置模版很多，运维起来也很轻松。但是每年都需要续费，这对我来说是一笔不小的费用，遂转投github。</p>

<h3 id="什么是github-pages">什么是github pages</h3>

<p>在<code class="language-plaintext highlighter-rouge">github</code>的官方介绍中，是这么描述<code class="language-plaintext highlighter-rouge">github pages</code>的：
<code class="language-plaintext highlighter-rouge">GitHub Pages</code> 是一种静态站点托管服务，它直接从 <code class="language-plaintext highlighter-rouge">GitHub</code> 上的存储库获取 <code class="language-plaintext highlighter-rouge">HTML、CSS</code> 和 <code class="language-plaintext highlighter-rouge">JavaScript</code> 文件，可以选择通过构建过程运行文件，然后发布网站。您可以在 <code class="language-plaintext highlighter-rouge">GitHub</code> 的<code class="language-plaintext highlighter-rouge">github.io</code>域或您自己的自定义域上托管您的网站。</p>

<p>翻译过来就是，我们需要在<code class="language-plaintext highlighter-rouge">github</code>上创建一个库，<code class="language-plaintext highlighter-rouge">github</code>识别到你的库后，会帮你生成属于自己的网站，听起来是不是so easy？ 振作精神，接下来打开电脑，让我们开始正式搭建我们的网站吧。</p>

<h3 id="fork你喜欢的模版">fork你喜欢的模版</h3>

<p>首先，你需要一个github账号。然后在github上找到一个你喜欢的模版，点击fork，复制一份到你的仓库，仓库名为<code class="language-plaintext highlighter-rouge">username.github.io</code>，其中<code class="language-plaintext highlighter-rouge">username</code>替换为你的GitHub用户名。</p>

<p>静静等待几分钟，让github为你创建你的个人网站。一切顺利的话，你可以在<code class="language-plaintext highlighter-rouge">username.github.io</code>的网址发现你fork过来的网页已经可以进行访问了。</p>

<h2 id="minimal-mistakes">Minimal Mistakes</h2>

<p>本站是使用<code class="language-plaintext highlighter-rouge">Minimal Mistakes</code>搭建的。它是一个免费的<code class="language-plaintext highlighter-rouge">jellky</code>编写的主题。我们可以在这个基础上，通过修改小部分代码，实现自己的个人网站。在这一步，你可以通过github网页进行修改。当然，更好的方式是将代码clone到本地，使用git进行每次提交的管理。 todo：git教程</p>

<h3 id="minimal-mistakes的基本架构">Minimal Mistakes的基本架构</h3>

<p>以下是官方示例(test目录下)的文件树：</p>

<p>├── Gemfile<br />
├── _config.yml<br />
├──_data<br />
│   ├── authors.yml<br />
│   └── navigation.yml<br />
├── _pages<br />
├──_pets<br />
├── _portfolio<br />
├──_posts<br />
├── _recipes<br />
└── assets<br />
│   └── images<br />
└── index.html</p>

<p>文件夹的概述如下：</p>

<table>
  <thead>
    <tr>
      <th>文件/目录</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>_config.yml</td>
      <td>存储配置数据。也包括你的个人信息。</td>
    </tr>
    <tr>
      <td>_layouts</td>
      <td>预置的网站模板。</td>
    </tr>
    <tr>
      <td>_posts</td>
      <td>你的博客内容。这些文件的命名约定很重要，必须遵循以下格式： YEAR-MONTH-DAY-title.MARKUP.</td>
    </tr>
    <tr>
      <td>_data</td>
      <td>Jekyll 引擎将自动加载此目录中的所有数据文件（使用.yml、 .yaml、.json或格式.csv和 .tsv扩展名），其中navigation.yml 规定了导航栏的信息。</td>
    </tr>
    <tr>
      <td>_sass</td>
      <td>这些是可以导入到您的 sass 部分main.scss ，然后将其处理成单个样式表 main.css，该样式表定义您的站点要使用的样式。</td>
    </tr>
    <tr>
      <td>assets</td>
      <td>对文章中出现的其他资源(如图片)做统一管理。</td>
    </tr>
  </tbody>
</table>

<p>在对整个框架有了一定了解后，我们可以开始着手进行修改了。</p>

<h3 id="修改个人主页资料">修改个人主页资料</h3>

<p>打开<code class="language-plaintext highlighter-rouge">_config.yml</code>,对其中一些属性做修改：</p>

<table>
  <thead>
    <tr>
      <th>属性</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>minimal_mistakes_skin</td>
      <td>设置背景样式，这理我选择的是dark</td>
    </tr>
    <tr>
      <td>locale</td>
      <td>设置网页的主要语言</td>
    </tr>
    <tr>
      <td>title</td>
      <td>设置网站的名字</td>
    </tr>
    <tr>
      <td>subtitle</td>
      <td>出现在网站题头下方的简洁标语</td>
    </tr>
    <tr>
      <td>name</td>
      <td>网站的作者</td>
    </tr>
    <tr>
      <td>description</td>
      <td>网站介绍</td>
    </tr>
  </tbody>
</table>

<p>在<code class="language-plaintext highlighter-rouge">site Author</code>一栏中，你可以修改你的<code class="language-plaintext highlighter-rouge">profiler</code>。
完成以上这些，你就可以让这个主页属于你了。当然，在<code class="language-plaintext highlighter-rouge">_config.yaml</code>中，还支持站内搜索，读者评论等拓展功能，更多内容请参考<a href="https://mmistakes.github.io/minimal-mistakes/docs/configuration/">官方教程</a>.</p>

<h3 id="修改导航栏">修改导航栏</h3>

<p>在<code class="language-plaintext highlighter-rouge">navigation.yml</code>中修改<code class="language-plaintext highlighter-rouge">main</code>的内容。<code class="language-plaintext highlighter-rouge">title</code>中填入你想要的标题名，在<code class="language-plaintext highlighter-rouge">_pages</code>中创建<code class="language-plaintext highlighter-rouge">md</code>文件，并把路径填入<code class="language-plaintext highlighter-rouge">url</code>中。如果一切都没有问题的话，在刷新网站后，你会看到你定义的导航栏信息</p>

<h3 id="添加你的第一篇日志">添加你的第一篇日志</h3>

<p>在<code class="language-plaintext highlighter-rouge">_posts</code>目录下创建一篇<code class="language-plaintext highlighter-rouge">YEAR-MONTH-DAY-title.md</code>的文章，注意此处的日期很重要，<code class="language-plaintext highlighter-rouge">minimal mistakes</code>会根据时间自动为你的文章进行排序。
文章由两部分组成：<br />
一部分是由两条虚线组成的，其中包含了文章的布局、添加的tag等一系列信息。另一部分就是文章的本体啦。
以下是我整理的一些常见的关键字：</p>

<table>
  <thead>
    <tr>
      <th>属性</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>title</td>
      <td>文章标题</td>
    </tr>
    <tr>
      <td>categories</td>
      <td>文章分类</td>
    </tr>
    <tr>
      <td>layout</td>
      <td>文章的布局</td>
    </tr>
    <tr>
      <td>excerpt</td>
      <td>文章简介</td>
    </tr>
    <tr>
      <td>tags</td>
      <td>tag</td>
    </tr>
    <tr>
      <td>permalink</td>
      <td>为文章设置永久链接</td>
    </tr>
    <tr>
      <td>last_modified_at</td>
      <td>上次修改的时间</td>
    </tr>
  </tbody>
</table>

<h2 id="其他尝试">其他尝试</h2>

<h3 id="打开搜索栏">打开搜索栏</h3>

<p>位于<code class="language-plaintext highlighter-rouge">config.yml</code>中：</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">search                   </span><span class="pi">:</span> <span class="no">true</span> <span class="c1"># true, false (default)</span>
<span class="na">search_full_content      </span><span class="pi">:</span> <span class="no">true</span> <span class="c1"># true, false (default)</span>
<span class="na">search_provider          </span><span class="pi">:</span> <span class="s">lunr</span> <span class="c1"># lunr (default), algolia, google</span>
<span class="na">lunr</span><span class="pi">:</span>
  <span class="na">search_within_pages    </span><span class="pi">:</span> <span class="no">true</span> <span class="c1"># true, false (default)</span>
</code></pre></div></div>

<h3 id="支持读者评论">支持读者评论</h3>

<p>同样位于<code class="language-plaintext highlighter-rouge">config.yml</code>中：</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">comments</span><span class="pi">:</span>
  <span class="na">provider               </span><span class="pi">:</span> <span class="s">disqus</span> <span class="c1"># false (default), "disqus", "discourse", "facebook", "staticman", "staticman_v2", "utterances", "giscus", "custom"</span>
  <span class="na">disqus</span><span class="pi">:</span>
    <span class="na">shortname            </span><span class="pi">:</span> <span class="s2">"</span><span class="s">yourshortname"</span> <span class="c1"># https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-</span>
</code></pre></div></div>

<p><code class="language-plaintext highlighter-rouge">disqus</code>是一个第三方网站，需要注册一个账号，选择“I want to install Disqus on my site”，填写完相应信息后，会得到一个shortname，对应填入上述shortname参数中。</p>

<h3 id="修改网站字体">修改网站字体</h3>

<p>位于<code class="language-plaintext highlighter-rouge"> _reset.scss </code>中，将原本的</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">html {</span>
  <span class="s">/* apply a natural box layout model to all elements */</span>
  <span class="s">box-sizing</span><span class="err">:</span> <span class="s">border-box;</span>
  <span class="s">background-color</span><span class="err">:</span> <span class="s">$background-color;</span>
  <span class="s">font-size</span><span class="err">:</span> <span class="s">16px;</span>

  <span class="s">@include breakpoint($medium) {</span>
    <span class="s">font-size</span><span class="err">:</span> <span class="s">18px;</span>
  <span class="s">}</span>

  <span class="s">@include breakpoint($large) {</span>
    <span class="s">font-size</span><span class="err">:</span> <span class="s">20px;</span>
  <span class="s">}</span>

  <span class="s">@include breakpoint($x-large) {</span>
    <span class="s">font-size</span><span class="err">:</span> <span class="s">22px;</span>
  <span class="s">}</span>

  <span class="s">-webkit-text-size-adjust</span><span class="err">:</span> <span class="s">100%;</span>
  <span class="s">-ms-text-size-adjust</span><span class="err">:</span> <span class="s">100%;</span>
<span class="err">}</span>
</code></pre></div></div>

<p>修改为：</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">html {</span>
  <span class="s">/* apply a natural box layout model to all elements */</span>
  <span class="s">box-sizing</span><span class="err">:</span> <span class="s">border-box;</span>
  <span class="s">background-color</span><span class="err">:</span> <span class="s">$background-color;</span>
  <span class="s">font-size</span><span class="err">:</span> <span class="s">16px;</span>

  <span class="s">-webkit-text-size-adjust</span><span class="err">:</span> <span class="s">100%;</span>
  <span class="s">-ms-text-size-adjust</span><span class="err">:</span> <span class="s">100%;</span>
<span class="err">}</span>
</code></pre></div></div>

<h2 id="总结">总结</h2>

<p>经过上述努力，你应该已经掌握了搭建网站的基本技能。如果你还想掌握进阶的功能，可以阅读jekyll和minimal mistak的官网。如果你还有什么疑问和心得，欢迎在评论区和我交流。</p>

<h2 id="todo-list">todo list</h2>

<ul>
  <li>markdown插入图片的体验真让人不爽，如何让每张图片大小都赏心悦目。</li>
  <li>支持中文英文切换</li>
</ul>]]></content><author><name>tudoto</name></author><category term="教程" /><category term="Minimal Mistakes" /><category term="website" /><category term="中文" /><category term="写给QQ同学的教程" /><summary type="html"><![CDATA[介绍Minimal Mistakes的使用方法，以及书写语法]]></summary></entry></feed>