<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <author>
    <name>Cedric</name>
  </author>
  <generator uri="https://hexo.io/">Hexo</generator>
  <id>https://cedriclee85.github.io/</id>
  <link href="https://cedriclee85.github.io/" rel="alternate"/>
  <link href="https://cedriclee85.github.io/atom.xml" rel="self"/>
  <rights>All rights reserved 2026, Cedric</rights>
  <subtitle>随手笔记</subtitle>
  <title>Cedric</title>
  <updated>2026-08-25T05:42:37.955Z</updated>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="sublime" scheme="https://cedriclee85.github.io/tags/sublime/"/>
    <content>
      <![CDATA[<p>Sublime Text 的安装、配置及插件安装说明文档。</p><h2 id="Download"><a href="#Download" class="headerlink" title="Download"></a>Download</h2><p><strong><a href="https://appnee.com/sublime-text-portable-full-versions/">下载地址</a></strong></p><h2 id="禁用软件更新"><a href="#禁用软件更新" class="headerlink" title="禁用软件更新"></a>禁用软件更新</h2><ol><li><p>设置中添加以下配置：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;update_check&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure></li><li><p><code>hosts</code> 文件(路径见下面表格)中添加以下内容</p><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Disable Sublime Text’s update check</span><br><span class="line"><span class="number">127</span>.<span class="number">0</span>.<span class="number">0</span>.<span class="number">1</span>    www.sublimetext.com</span><br><span class="line"><span class="number">127</span>.<span class="number">0</span>.<span class="number">0</span>.<span class="number">1</span>    license.sublimehq.com</span><br><span class="line"><span class="number">127</span>.<span class="number">0</span>.<span class="number">0</span>.<span class="number">1</span>    <span class="number">45</span>.<span class="number">55</span>.<span class="number">255</span>.<span class="number">55</span></span><br><span class="line"><span class="number">127</span>.<span class="number">0</span>.<span class="number">0</span>.<span class="number">1</span>    <span class="number">45</span>.<span class="number">55</span>.<span class="number">41</span>.<span class="number">223</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>OS</th><th>$PATH</th></tr></thead><tbody><tr><td>Windows</td><td><code>C:\Windows\System32\drivers\etc\hosts</code></td></tr><tr><td>Mac</td><td><code>/Private/etc/hosts</code></td></tr><tr><td>Linux</td><td><code>/etc/hosts</code></td></tr></tbody></table></li></ol><h2 id="Color-Scheme"><a href="#Color-Scheme" class="headerlink" title="Color Scheme"></a>Color Scheme</h2><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Mariana</span><br></pre></td></tr></table></figure><h2 id="Theme"><a href="#Theme" class="headerlink" title="Theme"></a>Theme</h2><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Default Dark</span><br></pre></td></tr></table></figure><h2 id="Sidebar-TabLabel-设置"><a href="#Sidebar-TabLabel-设置" class="headerlink" title="Sidebar &#x2F; TabLabel 设置"></a>Sidebar &#x2F; TabLabel 设置</h2><p>假设您正在使用默认主题之一，您可以尝试在用户包中创建包含以下内容的 <code>Default.sublime-theme</code> 和&#x2F;或 <code>Adaptive.sublime-theme</code> 文档</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_container&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.tint&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">20</span><span class="punctuation">,</span> <span class="number">30</span><span class="punctuation">,</span> <span class="number">40</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.opacity&quot;</span><span class="punctuation">:</span> <span class="number">1.0</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.draw_center&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.inner_margin&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">0</span><span class="punctuation">,</span> <span class="number">0</span><span class="punctuation">,</span> <span class="number">1</span><span class="punctuation">,</span> <span class="number">0</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;content_margin&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">0</span><span class="punctuation">,</span> <span class="number">0</span><span class="punctuation">,</span> <span class="number">1</span><span class="punctuation">,</span> <span class="number">0</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_tree&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;row_padding&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">8</span><span class="punctuation">,</span> <span class="number">3</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;indent&quot;</span><span class="punctuation">:</span> <span class="number">12</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;indent_offset&quot;</span><span class="punctuation">:</span> <span class="number">17</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;indent_top_level&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.tint&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">27</span><span class="punctuation">,</span> <span class="number">43</span><span class="punctuation">,</span> <span class="number">52</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;layer0.opacity&quot;</span><span class="punctuation">:</span> <span class="number">1.0</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;dark_content&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_heading&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.size&quot;</span><span class="punctuation">:</span> <span class="number">13</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;color&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">178</span><span class="punctuation">,</span> <span class="number">204</span><span class="punctuation">,</span> <span class="number">214</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.bold&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;shadow_color&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">35</span><span class="punctuation">,</span> <span class="number">35</span><span class="punctuation">,</span> <span class="number">35</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;shadow_offset&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">0</span><span class="punctuation">,</span> <span class="number">1</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_heading&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;parents&quot;</span><span class="punctuation">:</span></span><br><span class="line">        <span class="punctuation">[</span></span><br><span class="line">            <span class="punctuation">&#123;</span> <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;tree_row&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;attributes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;selected&quot;</span><span class="punctuation">]</span> <span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;shadow_color&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">160</span><span class="punctuation">,</span> <span class="number">174</span><span class="punctuation">,</span> <span class="number">192</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.size&quot;</span><span class="punctuation">:</span> <span class="number">12</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;color&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">108</span><span class="punctuation">,</span> <span class="number">134</span><span class="punctuation">,</span> <span class="number">146</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.bold&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.italic&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;parents&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span><span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;tree_row&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;attributes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;selected&quot;</span><span class="punctuation">]</span><span class="punctuation">&#125;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;color&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="number">0</span><span class="punctuation">,</span> <span class="number">188</span><span class="punctuation">,</span> <span class="number">212</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;parents&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span><span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;tree_row&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;attributes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;expandable&quot;</span><span class="punctuation">]</span><span class="punctuation">&#125;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;settings&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;bold_folder_labels&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.bold&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;sidebar_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;attributes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;transient&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.italic&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;tab_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.size&quot;</span><span class="punctuation">:</span> <span class="number">12</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;quick_panel_label&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;label_control&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;class&quot;</span><span class="punctuation">:</span> <span class="string">&quot;tool_tip_label_control&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;font.face&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Microsoft YaHei UI&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><ol><li><p>主菜单依次点击: <code>Preferences</code> &gt; <code>Browse Packages</code></p></li><li><p>打开 <code>/User</code> 文件夹</p></li><li><p>新建 txt 文档并命名为： <code>Default.sublime-theme</code>；</p><p>如果 Theme 选择的是默认的 <code>Adaptive</code>，txt 文档命名为：<code>Adaptive.sublime-theme</code></p></li><li><p>将上面的代码粘贴到文档中</p></li><li><p>将 <code>font.face</code> 的值改为一个你系统中有的字体名称</p></li><li><p>以 UTF-8 编码格式保存这个文档</p></li><li><p>一切正常的话, ST 的 <strong>Sidebar</strong> &#x2F; <strong>TabLabel</strong> 样式应该会立即更新</p></li></ol><h2 id="Install-Package-Control"><a href="#Install-Package-Control" class="headerlink" title="Install Package Control"></a>Install Package Control</h2><p>安装包管理器。</p><ol><li><code>Ctrl+Shift+P</code> 调出 <code>Command Palette</code></li><li>输入 <code>ipc</code> (Install Package Control 的首字母)</li><li>选择 <code>Install Package Control</code> 开始安装</li><li>完成</li></ol><h2 id="安装-SublimeLinter-代码检查工具"><a href="#安装-SublimeLinter-代码检查工具" class="headerlink" title="安装 SublimeLinter 代码检查工具"></a>安装 <code>SublimeLinter</code> 代码检查工具</h2><h3 id="一、安装-SublimeLinter"><a href="#一、安装-SublimeLinter" class="headerlink" title="一、安装 SublimeLinter"></a>一、安装 <code>SublimeLinter</code></h3><ol><li><code>Ctrl+Shift+P</code> 调出 <code>Command Palette</code></li><li>输入 <code>install</code> 进入 <code>Package Control: Install Package</code></li><li>输入 <code>SublimeLinter</code>，选择 <code>SublimeLinter</code> 进行安装</li></ol><h3 id="二、安装-SublimeLinter-contrib-htmlhint"><a href="#二、安装-SublimeLinter-contrib-htmlhint" class="headerlink" title="二、安装 SublimeLinter-contrib-htmlhint"></a>二、安装 <code>SublimeLinter-contrib-htmlhint</code></h3><p>可以把 <code>sublimeLinter-contrib-htmlhint</code> 看成是 <code>SublimeLinter</code> 的一个插件，<code>sublimeLinter-contrib-htmlhint</code> 调用 <code>htmlhint</code> 来进行语法检查。</p><ol><li>打开 CMD 命令窗口输入命令 <code>npm install -g htmlhint@latest</code> 安装 <strong>htmlhint</strong>；</li><li>在 Sublime 中按下 <code>Ctrl+Shift+P</code> &gt; 输入 <code>pci</code> 安装插件 &gt; 搜索 <code>SublimeLinter-contrib-htmlhint</code> 回车安装</li></ol><h3 id="三、安装-jshint-和-csslint"><a href="#三、安装-jshint-和-csslint" class="headerlink" title="三、安装 jshint 和 csslint"></a>三、安装 <code>jshint</code> 和 <code>csslint</code></h3><ol><li>打开 CMD 命令窗口安装 <code>jshint</code>、<code>csslint</code>，输入命令安装 <code>npm install -g jshint csslint</code>；</li><li>在 Sublime 中按下 <code>Ctrl+Shift+P</code> 使用 <code>Package Control</code> 安装 <code>SublimeLinter-csslint</code> 和 <code>SublimeLinter-jshint</code></li></ol><h3 id="四、安装-SublimeLinter-contrib-markdownlint"><a href="#四、安装-SublimeLinter-contrib-markdownlint" class="headerlink" title="四、安装 SublimeLinter-contrib-markdownlint"></a>四、安装 <code>SublimeLinter-contrib-markdownlint</code></h3><ol><li>打开 CMD 命令窗口安装 <code>markdownlint</code>，输入命令安装 <code>npm install -g markdownlint-cli</code>；</li><li>在 Sublime 中按下 <code>Ctrl+Shift+P</code> 使用 <code>Package Control</code> 安装 <code>SublimeLinter-contrib-markdownlint</code></li></ol><blockquote><p>其它代码检查工具请查看：<a href="https://packagecontrol.io/search/SublimeLinter">Package Control-SublimeLinter</a></p></blockquote><h3 id="五、配置文件"><a href="#五、配置文件" class="headerlink" title="五、配置文件"></a>五、配置文件</h3><h4 id="配置文件名"><a href="#配置文件名" class="headerlink" title="配置文件名"></a>配置文件名</h4><p>为插件编写配置文件，四种类型的配置文件名依次为：</p><ul><li><code>.htmlhintrc</code></li><li><code>.jshintrc</code></li><li><code>.csslintrc</code></li><li><code>.markdownlintrc</code></li></ul><h4 id="自定义配置文件"><a href="#自定义配置文件" class="headerlink" title="自定义配置文件"></a>自定义配置文件</h4><p>也可以提供一个自定义的配置文件在args参数中设置，例如：</p><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;args&quot;: <span class="section">[&quot;--config&quot;, &quot;C:\\Users\\Username\\htmlhint.conf&quot;]</span></span><br></pre></td></tr></table></figure><p>文件的名字可以随意定，只要内容配置 <code>htmlhint</code> 规则就可以。</p><h4 id="配置文件内容"><a href="#配置文件内容" class="headerlink" title="配置文件内容"></a>配置文件内容</h4><p>具体的配置参数可参见github上对应项目，下面配置仅供参考：</p><ol><li><p><strong><code>.htmlhintrc</code></strong></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;tagname-lowercase&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;attr-lowercase&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;attr-value-double-quotes&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;attr-value-not-empty&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;attr-no-duplication&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;doctype-first&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;tag-pair&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;tag-self-close&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;spec-char-escape&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;id-unique&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;src-not-empty&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title-require&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">/*规范类*/</span></span><br><span class="line">    <span class="attr">&quot;doctype-html5&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;id-class-value&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;style-disabled&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;inline-style-disabled&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;inline-script-disabled&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;space-tab-mixed-disabled&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;id-class-ad-disabled&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;href-abs-or-rel&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;attr-unsafe-chars&quot;</span><span class="punctuation">:</span><span class="literal"><span class="keyword">false</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li><li><p><strong><code>.jshintrc</code></strong></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;curly&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;eqeqeq&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;forin&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;freeze&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// 全局变量需要手动加到配置文件的globals属性里</span></span><br><span class="line">    <span class="attr">&quot;globals&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;latedef&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;maxerr&quot;</span><span class="punctuation">:</span> <span class="number">200</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;nonew&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;shadow&quot;</span><span class="punctuation">:</span> <span class="string">&quot;inner&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;singleGroups&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;undef&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;unused&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">&quot;evil&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;expr&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;proto&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;scripturl&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;sub&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">&quot;browser&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;devel&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;jquery&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;nonstandard&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;typed&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;worker&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li><li><p><strong><code>.csslintrc</code></strong></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;box-model&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;adjoining-classes&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;box-sizing&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;compatible-vendor-prefixes&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gradients&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;text-indent&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;fallback-colors&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;star-property-hack&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;underscore-property-hack&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;bulletproof-font-face&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;font-faces&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;import&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;regex-selectors&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;universal-selector&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;unqualified-attributes&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;overqualified-elements&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;duplicate-background-images&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;floats&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;font-sizes&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;ids&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;important&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;outline-none&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;qualified-headings&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;unique-headings&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li><li><p><strong><code>.markdownlintrc</code></strong></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;default&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;headings&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;atx&quot;</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;first-heading-h1&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;line_length&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;line_length&quot;</span><span class="punctuation">:</span> <span class="number">120</span><span class="punctuation">,</span> <span class="attr">&quot;tables&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;whitespace&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;br_spaces&quot;</span><span class="punctuation">:</span> <span class="number">2</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;ul&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;indent&quot;</span><span class="punctuation">:</span> <span class="number">4</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;ol&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ordered&quot;</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;fenced-code-language&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;blanks-around-fences&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;html&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;allowed_elements&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">      <span class="string">&quot;a&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;details&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;kbd&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;p&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;strong&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;summary&quot;</span></span><br><span class="line">    <span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="1-用户级配置"><a href="#1-用户级配置" class="headerlink" title="1. 用户级配置"></a>1. 用户级配置</h4><p>也可理解为全局配置，对所有项目有效。</p><ol><li><p>将四种类型的配置文件存放到目录 <code>D:\sublimelinter</code> 中，内容见<a href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9">配置文件内容</a></p></li><li><p>依次选择 Sublime Text 的菜单：<code>Preferences</code> &gt; <code>Package Settings</code> &gt; <code>SublimeLinter</code> &gt; <code>Settings</code> 打开 <code>SublimeLinter.sublime-settings</code></p></li><li><p>将以下配置拷贝到右侧用户配置文档中：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// SublimeLinter Settings - User</span></span><br><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">   <span class="comment">// &quot;debug&quot;: true,</span></span><br><span class="line">   <span class="attr">&quot;lint_mode&quot;</span><span class="punctuation">:</span> <span class="string">&quot;load_save&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;linters&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;csslint&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;disable&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;--config&quot;</span><span class="punctuation">,</span> <span class="string">&quot;D:\\sublimelinter\\.csslintrc&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;errors&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ids,display-property-grouping,duplicate-properties,empty-rules,errors,known-properties,vendor-prefix&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;excludes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;ignore&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;warnings&quot;</span><span class="punctuation">:</span> <span class="string">&quot;adjoining-classes,box-model,box-sizing,compatible-vendor,duplicate-background,fallback-colors,floats,font-faces,font-sizes,gradients,import,important,outline-none,overqualified-elements,qualified-headings,regex-selectors,rules-count,shorthand,star-property,text-indent,underscore-property,unique-headings,universal-selector,zero-units&quot;</span></span><br><span class="line">      <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;htmlhint&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;@disable&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;--config&quot;</span><span class="punctuation">,</span> <span class="string">&quot;D:\\sublimelinter\\.htmlhintrc&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;excludes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;jshint&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;@disable&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;--config&quot;</span><span class="punctuation">,</span> <span class="string">&quot;D:\\sublimelinter\\.jshintrc&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;excludes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;markdownlint&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;@disable&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;--config&quot;</span><span class="punctuation">,</span> <span class="string">&quot;D:\\sublimelinter\\.markdownlintrc&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;excludes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">   <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;linux&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;osx&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="comment">// user relative directory</span></span><br><span class="line">        <span class="comment">// (～ == C:/Users/Username)</span></span><br><span class="line">        <span class="attr">&quot;windows&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;show_marks_in_minimap&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;styles&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;mark_style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;squiggly_underline&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="2-项目级配置"><a href="#2-项目级配置" class="headerlink" title="2. 项目级配置"></a>2. 项目级配置</h4><p>三个配置文件(项目级一般不需要配置 <code>.markdownlintrc</code>)需要放在工程目录的最顶层（至少应包含所有需要检测的代码文件），sublime 会自动找到这些配置文件并使其生效。</p><h2 id="Syncing"><a href="#Syncing" class="headerlink" title="Syncing"></a>Syncing</h2><p>要在不同计算机之间正确同步已安装的插件，你不应该同步整个 <code>Packages/</code> 和 <code>Installed Packages/</code> 文件夹。</p><p>原因是某些插件针对不同的操作系统有不同的版本。通过跨操作系统同步插件的实际内容，您可能会发现这些插件已经损坏。</p><p><strong>正确的解决方案</strong>是：</p><ol><li><p>在所有计算机上安装 <strong><code>Package Control</code></strong></p></li><li><p>然后仅同步 <strong><code>Packages/User/</code></strong> 文件夹</p><p>此文件夹包含 <code>Package Control.sublime-settings</code> 文件(包含已安装的插件列表)，如果将此文件复制到另一台计算机，则下次启动 Sublime Text 时，<code>Package Control</code> 将安装任何缺失插件的正确版本。</p></li></ol><blockquote><p>也可以通过 Git、Dropbox 来同步，具体方法请查看<a href="https://packagecontrol.io/docs/syncing">这里</a>。</p></blockquote><h2 id="其它插件列表"><a href="#其它插件列表" class="headerlink" title="其它插件列表"></a>其它插件列表</h2><ul><li><p>Emmet</p> <figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ul#nav&gt;li.item$*<span class="number">4</span>&gt;a&#123;Item $&#125;</span><br></pre></td></tr></table></figure><p> 输出：</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;item1&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Item 1<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;item2&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Item 2<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;item3&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Item 3<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;item4&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Item 4<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>Terminus</p></li><li><p>MarkdownPreview</p></li><li><p>MarkdownEditing</p></li><li><p>JavaScript Completions</p></li><li><p>JsFormat</p></li><li><p>JsPrettier</p></li><li><p>CSS3</p></li><li><p>CSScomb</p></li><li><p>CSS Format</p></li><li><p>Alignment</p></li><li><p>ConvertToUTF8</p><p>转UTF-8快捷键设置:<br>进入目录 <code>/Packages/ConvertToUTF8/</code> 下找到对应操作系统的 <code>Default.sublime-keymap</code> 文件，设置快捷键</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Windows</span></span><br><span class="line"><span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span> <span class="attr">&quot;keys&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;ctrl+shift+c&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="attr">&quot;command&quot;</span><span class="punctuation">:</span> <span class="string">&quot;convert_to_utf8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="attr">&quot;encoding&quot;</span><span class="punctuation">:</span> <span class="string">&quot;GBK&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;stamp&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0&quot;</span> <span class="punctuation">&#125;</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span> <span class="attr">&quot;keys&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;ctrl+shift+g&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="attr">&quot;command&quot;</span><span class="punctuation">:</span> <span class="string">&quot;convert_to_utf8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="attr">&quot;encoding&quot;</span><span class="punctuation">:</span> <span class="string">&quot;UTF-8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;stamp&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0&quot;</span> <span class="punctuation">&#125;</span> <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Mac</span></span><br><span class="line"><span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span> <span class="attr">&quot;keys&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;super+shift+c&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="attr">&quot;command&quot;</span><span class="punctuation">:</span> <span class="string">&quot;convert_to_utf8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="attr">&quot;encoding&quot;</span><span class="punctuation">:</span> <span class="string">&quot;GBK&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;stamp&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0&quot;</span> <span class="punctuation">&#125;</span> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span> <span class="attr">&quot;keys&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;super+shift+g&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="attr">&quot;command&quot;</span><span class="punctuation">:</span> <span class="string">&quot;convert_to_utf8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;args&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="attr">&quot;encoding&quot;</span><span class="punctuation">:</span> <span class="string">&quot;UTF-8&quot;</span><span class="punctuation">,</span> <span class="attr">&quot;stamp&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0&quot;</span> <span class="punctuation">&#125;</span> <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure></li><li><p>HTML-CSS-JS Prettify</p><p>配置node.js路径:</p><ol><li>依次点击菜单：<code>Preferences</code> &gt; <code>Package Settings</code> &gt; <code>HTML-CSS-JS Prettify</code> &gt; <code>Plugin Options - Default</code></li><li>修改 Windows 的 <code>node.exe</code> 路径</li></ol> <figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">   <span class="attr">&quot;node_path&quot;</span><span class="punctuation">:</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;windows&quot;</span><span class="punctuation">:</span> <span class="string">&quot;C:/nvm/nodejs/node.exe&quot;</span> <span class="comment">// 设置为 node.exe的实际路径</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li><li><p>A File Icon</p></li><li><p>AutoFileName</p></li><li><p>ColorHelper</p></li><li><p>Vue Syntax Highlight</p></li><li><p>LSP-vue</p></li></ul>]]>
    </content>
    <id>https://cedriclee85.github.io/2024/06/03/README-for-SublimeText-Install-and-Configure/</id>
    <link href="https://cedriclee85.github.io/2024/06/03/README-for-SublimeText-Install-and-Configure/"/>
    <published>2024-06-03T02:19:14.000Z</published>
    <summary>Sublime Text 的安装、配置及插件安装说明文档。🚢重点讲述 SublimeLinter 的安装及配置；如何在不同计算机之间正确同步配置信息及已安装的插件。</summary>
    <title>安装、配置 SublimeText 及其插件</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="git" scheme="https://cedriclee85.github.io/tags/git/"/>
    <content>
      <![CDATA[<p>工作中我们有时可能会在同一台电脑上使用多个 git 账号，例如：</p><ul><li>公司的 <strong>gitLab</strong> 账号</li><li>个人的 <strong>gitHub</strong> 账号</li></ul><p>怎样才能在使用 gitLab 与 gitHub 时，切换成对应的账号，并且免密？</p><p>这时我们需要使用 ssh（git可以选择使用 https 方式、ssh 方式两种方式通信，但使用 https 方式时，每次 <code>fetch</code> 和 <code>push</code> 代码都需要输入账号和密码），下文将以windows为例。</p><h2 id="一，生成ssh密钥并配置"><a href="#一，生成ssh密钥并配置" class="headerlink" title="一，生成ssh密钥并配置"></a>一，生成ssh密钥并配置</h2><p>分别对 gitLab 和 gitHub 生成对应的密钥（默认情况下本地生成的秘钥位于 <code>C:/Users/用户名/.ssh/</code>）</p><h3 id="1，生成-gitLab-密钥并配置"><a href="#1，生成-gitLab-密钥并配置" class="headerlink" title="1，生成 gitLab 密钥并配置"></a>1，生成 gitLab 密钥并配置</h3><ul><li><p>电脑开始菜单中找到已安装的 Git Bash 并打开，输入命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&quot;公司邮箱地址&quot;</span> -f ~/.ssh/gitlab_rsa</span><br></pre></td></tr></table></figure><p>按回车，再按3次enter键，生成对应的 gitLab 密钥：<code>gitlab_rsa</code>和 <code>gitlab_rsa.pub</code></p></li><li><p>将 gitLab 公钥即 <code>gitlab_rsa.pub</code>（Windows下路径为 <code>C:/Users/用户名/.ssh/</code>）中的内容配置到公司的gitlab上，点击右上角的用户头像 &gt; <code>Preferences</code> &gt; <code>SSH Keys</code></p></li></ul><h3 id="2，生成-gitHub-密钥并配置"><a href="#2，生成-gitHub-密钥并配置" class="headerlink" title="2，生成 gitHub 密钥并配置"></a>2，生成 gitHub 密钥并配置</h3><ul><li><p>在gitbash中输入命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&quot;github邮箱地址&quot;</span> -f ~/.ssh/github_rsa</span><br></pre></td></tr></table></figure></li><li><p>生成对应的 gitHub 密钥：<code>github_rsa</code> 和 <code>github_rsa.pub</code></p></li><li><p>将 gitHub 公钥即 <code>github_rsa.pub</code> 中的内容配置到自己的github上，点击右上角的用户头像 &gt; <code>Settings</code> &gt; <code>SSH and GPG Keys</code> &gt; <code>New SSH key</code></p></li></ul><h3 id="3，配置git，访问不同-host-时使用不同的密钥"><a href="#3，配置git，访问不同-host-时使用不同的密钥" class="headerlink" title="3，配置git，访问不同 host 时使用不同的密钥"></a>3，配置git，访问不同 host 时使用不同的密钥</h3><ul><li><p>进入密钥生成的位置（<code>C:/Users/用户名/.ssh/</code>），手动创建一个 <code>config</code> 文件（注意这个 <code>config</code> 文件要无后缀）。</p></li><li><p>在新建的 <code>config</code> 文件里面配置如下内容：</p><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自己的github账号配置(HostName 需去掉&quot;https://&quot;)</span></span><br><span class="line">Host github.com</span><br><span class="line">  port 22</span><br><span class="line">    User git</span><br><span class="line">    HostName github.com</span><br><span class="line">    PreferredAuthentications publickey</span><br><span class="line">    IdentityFile C:\Users\用户名\.ssh\github_rsa</span><br><span class="line"></span><br><span class="line"><span class="comment"># 公司的gitlab账号配置(HostName为公司的gitlab地址)</span></span><br><span class="line">Host gitlab.com</span><br><span class="line">    port 22</span><br><span class="line">    User git</span><br><span class="line">    <span class="comment"># HostName 可以配置域名或 IP (需去掉 &quot;https://&quot;)</span></span><br><span class="line">    HostName gitlab.xxx.com / xxx.xxx.xxx.xxx</span><br><span class="line">    User git</span><br><span class="line">    PreferredAuthentications publickey</span><br><span class="line">    IdentityFile C:\Users\用户名\.ssh\gitlab_rsa</span><br></pre></td></tr></table></figure><blockquote><p>字段配置简单说明：</p><ul><li><strong>Host</strong> - Host 可以看作是一个你要识别的模式，对识别的模式，配置对应的主机名和ssh 文件</li><li><strong>Port</strong> - 自定义的端口。默认为22，可不配置</li><li><strong>User</strong> - 自定义的用户名，默认为 git，可不配置</li><li><strong>HostName</strong> - 真正连接的服务器地址</li><li><strong>PreferredAuthentications</strong> - 指定优先使用哪种方式验证，支持密码和秘钥验证方式</li><li><strong>IdentityFile</strong> - 指定本次连接使用的密钥文件</li></ul></blockquote></li></ul><h2 id="二，验证是否设置成功"><a href="#二，验证是否设置成功" class="headerlink" title="二，验证是否设置成功"></a>二，验证是否设置成功</h2><p>在 <code>C:/Users/用户名/.ssh</code> 中，右键点击 <code>Open Git Bash here</code>，分别输入命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 测试github</span></span><br><span class="line">ssh -T git@github.com</span><br><span class="line"></span><br><span class="line"><span class="comment"># 测试gitlab(ps: xxx的意思是公司用的是Gitlab的私有域名)</span></span><br><span class="line">ssh -T git@gitlab.xxx.com</span><br><span class="line"></span><br><span class="line"><span class="comment"># 没有Gitlab的私有域名，则直接使用 git@gitlab.com</span></span><br><span class="line">ssh -T git@gitlab.com</span><br></pre></td></tr></table></figure><p>显示如下信息则说明配置成功</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># for GitHub</span></span><br><span class="line">Hi 用户名! You<span class="string">&#x27;ve successfully authenticated, but GitHub does not provide shell access.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># for GitLab</span></span><br><span class="line"><span class="string">Welcome to GitLab, @用户名!</span></span><br></pre></td></tr></table></figure><h2 id="三，git仓库配置"><a href="#三，git仓库配置" class="headerlink" title="三，git仓库配置"></a>三，git仓库配置</h2><h3 id="1，简介"><a href="#1，简介" class="headerlink" title="1，简介"></a>1，简介</h3><p>在git中，我们使用git config 命令用来配置git的配置文件，git配置级别主要有以下3类：</p><ul><li><strong>仓库级别 local</strong> 【优先级最高】 - 对应的配置文件是当前仓库下的 <code>.git/config</code> 【在当前目录下 <code>.git</code> 目录默认是隐藏的，所以在文件管理器中我们要打开显示隐藏文件】</li><li><strong>用户级别 global</strong>【优先级次之】 - 对应的配置文件是用户宿主目录下的 <code>~/.gitconfig</code> 【宿主目录：<code>C:\Users\用户名</code>】</li><li><strong>系统级别 system</strong>【优先级最低】 - 对应的配置文件是 git 安装目录下的 <code>/etc/gitconfig</code></li></ul><p>简单了解后我们就可以进行配置了</p><h3 id="2，配置"><a href="#2，配置" class="headerlink" title="2，配置"></a>2，配置</h3><ul><li><p>用户级别配置</p><p>用户级别是配置公司 gitLab 账号还是自己的 gitHub 账号，可以自由选择。因为平常使用公司的代码频率较高，所以我选择将 gitLab 账号配置成用户级别。Git Bash下执行如下命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&#x27;用户名&#x27;</span> <span class="comment">#公司账号名称</span></span><br><span class="line">git config --global user.email <span class="string">&#x27;邮箱&#x27;</span> <span class="comment">#公司账号邮箱</span></span><br></pre></td></tr></table></figure></li><li><p>仓库级别配置</p><p>local（仓库级别）配置成 gitHub 的账号。选择一个文件夹作为 gitHub 的本地仓库，在该文件夹里鼠标右键 &gt; <code>Open Git Bash here</code>，执行命令：<strong><code>git init</code></strong></p><p>再执行命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --<span class="built_in">local</span> user.name <span class="string">&#x27;用户名&#x27;</span> <span class="comment">#github账号名称</span></span><br><span class="line">git config --<span class="built_in">local</span> user.email <span class="string">&#x27;邮箱&#x27;</span> <span class="comment">#github账号邮箱</span></span><br></pre></td></tr></table></figure><p>之后自己的 gitHub 的代码都应该在这个仓库下进行 <code>pull</code>、<code>push</code> 操作。</p></li></ul><h3 id="3，克隆项目代码"><a href="#3，克隆项目代码" class="headerlink" title="3，克隆项目代码"></a>3，克隆项目代码</h3><p>克隆自己 gitHub 的项目代码至本地仓库。在2.2中的本地仓库打开 Git Bash，输入命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> git@github.com:cedriclee85/scrappy-notes.git <span class="comment"># github项目地址(clone with ssh)</span></span><br></pre></td></tr></table></figure><p>这样就可以对克隆的项目进行git其他的操作了。</p><p>至此，我们就可以在这台电脑上同时使用 gitHub 与 gitLab 进行代码的设置就完成了。</p>]]>
    </content>
    <id>https://cedriclee85.github.io/2024/06/03/configure-both-github-gitlab-on-one-pc/</id>
    <link href="https://cedriclee85.github.io/2024/06/03/configure-both-github-gitlab-on-one-pc/"/>
    <published>2024-06-03T02:07:19.000Z</published>
    <summary>
      <![CDATA[工作中我们有时可能会在同一台电脑上使用多个 git 账号，例如：公司的 gitLab 账号；个人的 gitHub 账号。<br /><br />🚀怎样才能在使用 gitLab 与 gitHub 时，切换成对应的账号，并且免密？<br /><br />🚦这时我们需要使用 ssh🚝（git可以选择使用 https 方式、ssh 方式两种方式通信，但使用 https 方式时，每次 <code>fetch</code> 和 <code>push</code> 代码都需要输入账号和密码），本文将以windows为例。]]>
    </summary>
    <title>同一台电脑同时使用 gitHub 和 gitLab</title>
    <updated>2026-08-25T05:42:37.957Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="sublime" scheme="https://cedriclee85.github.io/tags/sublime/"/>
    <content>
      <![CDATA[<p><code>Alt + R</code> : 开启正则表达式功能<br><code>Alt + Enter</code>: 找到匹配目标后全部选择<br><code>Ctrl + R</code>：前往 method（mac 下 <code>⌘ + R</code>）<br><code>Ctrl + M</code>：跳转到对应括号<br><code>Ctrl + Shift + ↑/↓</code>：与上&#x2F;下一行交换位置</p><p><code>Ctrl + D</code>：选择单词，重复可增加选择下一个相同的单词<br><code>Ctrl + L</code>：选择行，重复可依次增加选择下一行</p><p><code>Ctrl + Shift + P</code>：打开命令面板</p><p><code>Ctrl + P</code>：搜索项目中的文件（mac 下 <code>⌘ + P</code>），在里面输入：<br><code>admi@auto</code> 可以定位到相应文件夹(admin.html)下的相应方法（auto）。</p><p><code>Ctrl + G</code>：跳转到第几行<br><code>Ctrl + W</code>：关闭当前打开文件<br><code>Ctrl + Shift + W</code>：关闭所有打开文件<br><code>Ctrl + Shift + V</code>：粘贴并格式化<br><code>Ctrl + Shift + L</code>：选择多行<br><code>Ctrl + Shift + Enter</code>：在当前行前插入新行<br><code>Ctrl + X</code>：删除当前行<br><code>Ctrl + U</code>：软撤销，撤销光标位置<br><code>Ctrl + Shift + J</code>：选择标签内容<br><code>Ctrl + F</code>：查找内容<br><code>Ctrl + Shift + F</code>：查找并替换<br><code>Ctrl + H</code>：替换<br><code>Ctrl + N</code>：新建窗口<br><code>Ctrl + K + B</code>：开关侧栏<br><code>Ctrl + Shift + M</code>：选中当前括号内容，重复可选择括号本身<br><code>Ctrl + F2</code>：设置&#x2F;删除标记<br><code>Ctrl + /</code>：注释当前行<br><code>Ctrl + Shift + /</code>：当前位置(对选中内容)插入块注释<br><code>Ctrl + Alt + /</code>：块注释，并 Focus 到首行，写注释说明用的<br><code>Ctrl + Shift + A</code>：选择当前标签前后，修改标签用的<br><code>F11</code>：全屏<br><code>Shift + F11</code>：全屏免打扰模式，只编辑当前文件<br><code>Alt + F3</code>：选择所有相同的词<br><code>Alt + .</code>：闭合标签<br><code>Alt + Shift + 数字</code>：分屏显示<br><code>Alt + 数字</code>：切换到第 N 个文件<br><code>Shift + 右键拖动</code>：上下拖动设置多个光标位并在多行选中相同长度内容，用来更改或插入列内容<br><code>鼠标的前进后退键</code>：可切换 Tab 文件<br><code>Ctrl + 左键点击</code>：选择多个位置<br><code>Ctrl + shift + D</code>: 复制并粘贴光标所在行<br><code>Ctrl + shift + T</code>: 恢复已经关闭的标签页</p><h2 id="Editing"><a href="#Editing" class="headerlink" title="Editing"></a>Editing</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + X</code> Delete line<br><code>Ctrl + ↩</code> Insert line after<br><code>Ctrl + ⇧ + ↩</code> Insert line before<br><code>Ctrl + ⇧ + ↑</code> Move line&#x2F;selection up<br><code>Ctrl + ⇧ + ↓</code> Move line&#x2F;selection down<br><code>Ctrl + L</code> Select line - Repeat to select next lines<br><code>Ctrl + D</code> Select word - Repeat select others occurrences<br><code>Ctrl + M</code> Jump to closing parentheses Repeat to jump to opening parentheses<br><code>Ctrl + ⇧ + M</code> Select all contents of the current parentheses<br><code>Ctrl + KK</code> Delete from cursor to end of line<br><code>Ctrl + K + ⌫</code> Delete from cursor to start of line<br><code>Ctrl + ]</code> Indent current line(s)<br><code>Ctrl + [</code> Un-indent current line(s)<br><code>Ctrl + ⇧ + D</code> Duplicate line(s)<br><code>Ctrl + J</code> Join line below to the end of the current line<br><code>Ctrl + /</code> Comment&#x2F;un-comment current line<br><code>Ctrl + ⇧ + /</code> Block comment current selection<br><code>Ctrl + Y</code> Redo, or repeat last keyboard shortcut command<br><code>Ctrl + ⇧ + V</code> Paste and indent correctly<br><code>Ctrl + Space</code> Select next auto-complete suggestion<br><code>Ctrl + U</code> soft undo; jumps to your last change before undoing change when repeated</p><p><strong>Windows</strong><br><code>Ctrl + Alt + Up</code> Column selection up<br><code>Ctrl + Alt + Down</code> Column selection down</p><p><strong>Linux</strong><br><code>Alt + ⇧ + Up</code> Column selection up<br><code>Alt + ⇧ + Down</code> Column selection up</p><h2 id="Navigation-Goto-Anywhere"><a href="#Navigation-Goto-Anywhere" class="headerlink" title="Navigation&#x2F;Goto Anywhere"></a>Navigation&#x2F;Goto Anywhere</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + P</code> Quick-open files by name<br><code>Ctrl + R</code> Goto symbol<br><code>Ctrl + ;</code> Goto word in current file<br><code>Ctrl + G</code> Goto line in current file</p><h2 id="General"><a href="#General" class="headerlink" title="General"></a>General</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + ⇧ + P</code> Command prompt<br><code>Ctrl + KB</code> Toggle side bar<br><code>Ctrl + ⇧ + Alt + P</code> Show scope in status bar</p><h2 id="Find-Replace"><a href="#Find-Replace" class="headerlink" title="Find&#x2F;Replace"></a>Find&#x2F;Replace</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + F</code> Find<br><code>Ctrl + H</code> Replace<br><code>Ctrl + ⇧ + F</code> Find in files</p><h2 id="Tabs"><a href="#Tabs" class="headerlink" title="Tabs"></a>Tabs</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + ⇧ + t</code> Open last closed tab<br><code>Ctrl + PgUp</code> Cycle up through tabs<br><code>Ctrl + PgDn</code> Cycle down through tabs<br><code>Ctrl + ⇆</code> Find in files<br><code>Alt + [NUM]</code> Switch to tab number [NUM] where [NUM] &lt;&#x3D; number of tabs</p><h2 id="Split-window"><a href="#Split-window" class="headerlink" title="Split window"></a>Split window</h2><p><em>Keypress Command:</em></p><p><code>Alt + ⇧ + 2</code> Split view into two columns<br><code>Alt + ⇧ + 1</code> Revert view to single column<br><code>Alt + ⇧ + 5</code> Set view to grid (4 groups)<br><code>Ctrl + [NUM]</code> Jump to group where num is 1-4<br><code>Ctrl + ⇧ + [NUM]</code> Move file to specified group where num is 1-4</p><h2 id="Bookmarks"><a href="#Bookmarks" class="headerlink" title="Bookmarks"></a>Bookmarks</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + F2</code> Toggle bookmark<br><code>F2</code> Next bookmark<br><code>⇧ + F2</code> Previous bookmark<br><code>Ctrl + ⇧ + F2</code> Clear bookmarks</p><h2 id="Text-manipulation"><a href="#Text-manipulation" class="headerlink" title="Text manipulation"></a>Text manipulation</h2><p><em>Keypress Command:</em></p><p><code>Ctrl + KU</code> Transform to Uppercase<br><code>Ctrl + KL</code> Transform to Lowercase</p>]]>
    </content>
    <id>https://cedriclee85.github.io/2020/07/06/sublime-practical-skills-win/</id>
    <link href="https://cedriclee85.github.io/2020/07/06/sublime-practical-skills-win/"/>
    <published>2020-07-06T00:59:08.000Z</published>
    <summary>Sublime 常用快捷键(Windows)🚀</summary>
    <title>Sublime实用技巧(Win)</title>
    <updated>2026-08-25T05:42:37.966Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="sublime" scheme="https://cedriclee85.github.io/tags/sublime/"/>
    <content>
      <![CDATA[<h3 id="Ready-Works"><a href="#Ready-Works" class="headerlink" title="Ready Works"></a>Ready Works</h3><ol><li>Install <a href="https://www.sublimetext.com/3">Sublime Text 3</a></li><li>Install <em>SublimeLinter</em></li><li><a href="https://tidybatchfiles.info/tidy.zip">Download tidy.zip</a> from <a href="https://tidybatchfiles.info/">HTML Tidy for Windows</a></li><li>Install <em>SublimeLinter HTML Tidy</em></li></ol><p>Step 2 and 4 install from <code>Package Control: Install Package</code>. Not introduce here.</p><h3 id="Configure"><a href="#Configure" class="headerlink" title="Configure"></a>Configure</h3><ul><li><p>解压第3步下载的文件得到 <code>tidy.exe</code>，拷贝到目录<code>C:/Users/Username/tidy</code>，其它目录也可以。</p></li><li><p>依次打开：<code>Preferences &gt; Package Settings &gt; SublimeLinter &gt; Settings</code></p></li><li><p>下滑找到 <code>paths</code> 节点，如下：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;linux&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;osx&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;windows&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li><li><p>拷贝 <code>tidy.exe</code> 所在的目录到 <code>windows</code> 项：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;linux&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;osx&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;windows&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;~/tidy&quot;</span><span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：路径 <code>&quot;~/tidy&quot;</code> 是相对用户目录的路径，即 <code>C:/Users/Username</code>，路径不包含 <code>tidy.exe</code> 程序本身。当然，用<strong>绝对路径</strong>或<strong>其它目录</strong>也是可以的（如：<code>d:/tidy</code>）。</p></blockquote></li><li><p>Done!!</p></li></ul><hr><p><a href="https://jecosolutions.com/linting-html-with-sublime-text-3-sublimelinter-html-tidy-for-windows-and-sublimelinter-html-tidy-on-windows/">阅读原文</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2019/08/11/Configure-SublimeLinter-html-tidy/</id>
    <link href="https://cedriclee85.github.io/2019/08/11/Configure-SublimeLinter-html-tidy/"/>
    <published>2019-08-11T08:47:19.000Z</published>
    <summary>为 sublime 配置 html 格式检查工具：tidy</summary>
    <title>Configure SublimeLinter-html-tidy</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="Mac" scheme="https://cedriclee85.github.io/tags/Mac/"/>
    <content>
      <![CDATA[<h2 id="How-to-Adjust-the-Icon-Grid-Count-of-Launchpad-in-Mac-OS-X"><a href="#How-to-Adjust-the-Icon-Grid-Count-of-Launchpad-in-Mac-OS-X" class="headerlink" title="How to Adjust the Icon Grid Count of Launchpad in Mac OS X"></a>How to Adjust the Icon Grid Count of Launchpad in Mac OS X</h2><p>replacing the <code>X</code> numbers for the appropriate columns and grid icon counts</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock springboard-columns -int X;defaults write com.apple.dock springboard-rows -int X;defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock</span><br></pre></td></tr></table></figure><p>For example, to set the Launchpad grid to <code>8 × 7</code> you’d use the following syntax:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock springboard-columns -int 7;defaults write com.apple.dock springboard-rows -int 8;defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock</span><br></pre></td></tr></table></figure><p>If you want to return to the default setting, just change the column and row counts back to what yours was originally. <strong>The default on my MacBook Pro Retina display is a 5 x 7 grid</strong>, but yours may be different depending on screen size and screen resolution.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock springboard-columns -int 7;defaults write com.apple.dock springboard-rows -int 5;defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock</span><br></pre></td></tr></table></figure><p><strong>The commands</strong> for customizing the Launchpad layout <strong>can also be split apart</strong> if desired like so:</p><h2 id="Set-the-Launchpad-Column-Icon-Count"><a href="#Set-the-Launchpad-Column-Icon-Count" class="headerlink" title="Set the Launchpad Column Icon Count"></a>Set the Launchpad Column Icon Count</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock springboard-columns -int 7</span><br></pre></td></tr></table></figure><h2 id="Set-the-Launchpad-Row-App-Icon-Count"><a href="#Set-the-Launchpad-Row-App-Icon-Count" class="headerlink" title="Set the Launchpad Row App Icon Count"></a>Set the Launchpad Row App Icon Count</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock springboard-rows -int 8</span><br></pre></td></tr></table></figure><h2 id="Reset-Launchpad"><a href="#Reset-Launchpad" class="headerlink" title="Reset Launchpad"></a>Reset Launchpad</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaults write com.apple.dock ResetLaunchPad -bool TRUE;</span><br></pre></td></tr></table></figure><h2 id="Relaunch-the-Dock-with-killall"><a href="#Relaunch-the-Dock-with-killall" class="headerlink" title="Relaunch the Dock with killall"></a>Relaunch the Dock with killall</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">killall Dock</span><br></pre></td></tr></table></figure><p>You can also choose to just set a custom row or just a custom column count, but you must <strong>reset and refresh the Launchpad</strong>, and finally killall Dock to relaunch the Dock in Mac OS X and have the changes to take effect regardless of how you customize it.</p>]]>
    </content>
    <id>https://cedriclee85.github.io/2019/05/10/Change-Lanunchpad-Icon-Size/</id>
    <link href="https://cedriclee85.github.io/2019/05/10/Change-Lanunchpad-Icon-Size/"/>
    <published>2019-05-10T06:35:18.000Z</published>
    <summary>How to Adjust the Icon Grid Count of Launchpad in Mac OS X？</summary>
    <title>Change Lanunchpad Icon Size</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="mysql" scheme="https://cedriclee85.github.io/tags/mysql/"/>
    <content>
      <![CDATA[<h2 id="CONTENT"><a href="#CONTENT" class="headerlink" title="CONTENT"></a>CONTENT</h2><p>For homebrew version 2.1.2</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">brew -v <span class="comment"># =&gt; Homebrew 2.1.2</span></span><br></pre></td></tr></table></figure><p>Install the current version of mysql.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Install current mysql version</span></span><br><span class="line">brew install mysql</span><br><span class="line"></span><br><span class="line"><span class="comment"># Start agent for current version of mysql (including on login)</span></span><br><span class="line"><span class="built_in">ln</span> -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents</span><br><span class="line">launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist</span><br></pre></td></tr></table></figure><p>Install the older version of mysql.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Find older mysql versions</span></span><br><span class="line">brew search mysql</span><br><span class="line"></span><br><span class="line"><span class="comment"># Install older mysql version</span></span><br><span class="line">brew install mysql@5.6</span><br><span class="line"></span><br><span class="line"><span class="comment"># Start agent for older version of mysql (including on login)</span></span><br><span class="line"><span class="built_in">ln</span> -sfv /usr/local/opt/mysql@5.6/*.plist ~/Library/LaunchAgents</span><br><span class="line">launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql@5.6.plist</span><br></pre></td></tr></table></figure><p>Then to switch to the older version.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Unlink current mysql version</span></span><br><span class="line">brew <span class="built_in">unlink</span> mysql</span><br><span class="line"></span><br><span class="line"><span class="comment"># Check older mysql version</span></span><br><span class="line"><span class="built_in">ls</span> /usr/local/Cellar/mysql@5.6 <span class="comment"># =&gt; 5.6.43</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Link the older version</span></span><br><span class="line">brew switch mysql@5.6 5.6.43</span><br><span class="line"><span class="comment"># If the above didn&#x27;t working, try this:</span></span><br><span class="line">brew <span class="built_in">link</span> mysql@5.6 --force</span><br></pre></td></tr></table></figure><p>And to switch back to the current version.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Unlink older mysql version</span></span><br><span class="line">brew <span class="built_in">unlink</span> mysql@5.6</span><br><span class="line"></span><br><span class="line"><span class="comment"># Check current mysql version</span></span><br><span class="line"><span class="built_in">ls</span> /usr/local/Cellar/mysql <span class="comment"># =&gt; 8.0.16</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Link the current version</span></span><br><span class="line">brew switch mysql 8.0.16</span><br></pre></td></tr></table></figure><p>To verify which mysql version you’re on at any time.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Check which version of mysql is currently symlinked</span></span><br><span class="line"><span class="built_in">ls</span> -l /usr/local/bin/mysql <span class="comment"># =&gt; /usr/local/bin/mysql@ -&gt; ../Cellar/mysql56/5.6.43/bin/mysql</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Or using the mysql command</span></span><br><span class="line">mysql --version</span><br></pre></td></tr></table></figure><p>And to unload a mysql agent for a given version.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Stop agent for current version of mysql</span></span><br><span class="line">launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist</span><br><span class="line"><span class="built_in">rm</span> ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist</span><br><span class="line"></span><br><span class="line"><span class="comment"># Stop agent for older version of mysql</span></span><br><span class="line">launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mysql@5.6.plist</span><br><span class="line"><span class="built_in">rm</span> ~/Library/LaunchAgents/homebrew.mxcl.mysql@5.6.plist</span><br></pre></td></tr></table></figure><hr><h2 id="Caution"><a href="#Caution" class="headerlink" title="Caution"></a>Caution</h2><blockquote><p><em>jpmelguizo:</em><br>Went with <a href="mailto:&#109;&#121;&#115;&#113;&#x6c;&#64;&#53;&#x2e;&#x36;">mysql@5.6</a> and I’m getting: <code>ERROR 2002 (HY000): Can&#39;t connect to local MySQL server through socket &#39;/tmp/mysql.sock&#39; (2)</code> Although brew services list says <a href="mailto:&#x6d;&#121;&#x73;&#113;&#108;&#x40;&#53;&#x2e;&#54;">mysql@5.6</a> is started, there’s no mysqld process running and no mysql.sock file anywhere. Any ideas on how to fix it? should I just go with the deprecated mysql56 instead?</p></blockquote><blockquote><p><em>jsweeney:</em></p><p><strong>NOTICE</strong>: If you see <code>\@</code>, it is just <code>@</code>, remove the backslash(<code>\</code>) when you copy.<br>I also had your problem. My issue was that the mysql@5.6 was trying to boot the mysql 5.7 database (installed in the default <code>/usr/local/var</code> folder). If you want to run both in parallel on their own distinct databases, there are a few more steps to do.</p><ol><li>Create a new (separate) data directory and database for the 5.6 version<br> Run <code>/usr/local/Cellar/mysql\@5.6/5.6.36/bin/mysql_install_db --user=root --datadir=/usr/local/var/mysql56</code><blockquote><ol start="2"><li>Change the configuration to start the 5.6 version pointing to this database<br>  Edit <code>/usr/local/Cellar/mysql\@5.6/5.6.36/homebrew.mxcl.mysql\@5.6.plist</code> to change both <code>/usr/local/var/mysql</code> instances to <code>/usr/local/var/mysql56</code> (I didn’t put the <code>@</code> in the folder name just in case it would cause issues).<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">plist</span> <span class="attr">version</span>=<span class="string">&quot;1.0&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">dict</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">key</span>&gt;</span>KeepAlive<span class="tag">&lt;/<span class="name">key</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">true</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">key</span>&gt;</span>Label<span class="tag">&lt;/<span class="name">key</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">string</span>&gt;</span>homebrew.mxcl.mysql@5.6<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">key</span>&gt;</span>ProgramArguments<span class="tag">&lt;/<span class="name">key</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">array</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span>&gt;</span>/usr/local/opt/mysql@5.6/bin/mysqld_safe<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span>&gt;</span>--bind-address=127.0.0.1<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span>&gt;</span>--datadir=/usr/local/var/mysql56<span class="tag">&lt;/<span class="name">string</span>&gt;</span> <span class="comment">&lt;!-- &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; HERE --&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">array</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">key</span>&gt;</span>RunAtLoad<span class="tag">&lt;/<span class="name">key</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">true</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">key</span>&gt;</span>WorkingDirectory<span class="tag">&lt;/<span class="name">key</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">string</span>&gt;</span>/usr/local/var/mysql56<span class="tag">&lt;/<span class="name">string</span>&gt;</span> <span class="comment">&lt;!-- &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; AND HERE --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dict</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">plist</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li>Change the port of the 5.6 server - if ever you want to start both at the same time.<br>Edit <code>/usr/local/Cellar/mysql\@5.6/5.6.36/my.cnf</code>, uncomment <code>port</code> and change it to some other value than <code>3306</code>.<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># These are commonly set, remove the # and set as required.</span></span><br><span class="line"><span class="comment"># basedir = .....</span></span><br><span class="line"><span class="comment"># datadir = .....</span></span><br><span class="line">port = 3356</span><br><span class="line"><span class="comment"># server_id = .....</span></span><br><span class="line"><span class="comment"># socket = .....</span></span><br></pre></td></tr></table></figure>NOTE A little caveat about connecting to the MySQL instances after such a setup. Using any kind of driver will &gt; work out of the box if you set the correct port. However, at the command line, <code>mysql</code> ignores the <code>--port</code> &gt; value by default, so you need something like this&gt;<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql -uroot --port=3356 --protocol=TCP</span><br></pre></td></tr></table></figure>See this article for more details: <a href="https://dev.mysql.com/doc/refman/5.7/en/connecting.html">https://dev.mysql.com/doc/refman/5.7/en/connecting.html</a></li></ol></blockquote></li></ol></blockquote><hr><p>mysql_downgrade:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Kill rails server and guard</span></span><br><span class="line">bin/spring stop</span><br><span class="line">brew services stop mysql</span><br><span class="line">brew uninstall mysql</span><br><span class="line">brew install mysql@5.5</span><br><span class="line">brew <span class="built_in">link</span> mysql@5.5 --force</span><br><span class="line">brew services start mysql@5.5</span><br><span class="line">rbenv uninstall 2.3.3</span><br><span class="line">rbenv install 2.3.3</span><br><span class="line">gem install bundle</span><br><span class="line">gem install rubocop-rspec rubocop scss_lint rails_best_practices <span class="comment"># (optional)</span></span><br><span class="line">bundle install</span><br><span class="line">be rails db:migrate:reset</span><br></pre></td></tr></table></figure><hr><p>via:<br>from: <a href="https://gist.github.com/benlinton/d24471729ed6c2ace731">https://gist.github.com/benlinton/d24471729ed6c2ace731</a><br>mysql_downgrade: <a href="https://gist.github.com/6temes/3c52f8a472f61d9676e7218a98812286">https://gist.github.com/6temes/3c52f8a472f61d9676e7218a98812286</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2019/05/08/Multiple-MySQL-Versions-with-Homebrew/</id>
    <link href="https://cedriclee85.github.io/2019/05/08/Multiple-MySQL-Versions-with-Homebrew/"/>
    <published>2019-05-08T03:20:10.000Z</published>
    <summary>用 Homebrew 管理多版本的 MySQL</summary>
    <title>Multiple MySQL Versions with Homebrew</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="linux" scheme="https://cedriclee85.github.io/tags/linux/"/>
    <category term="vim" scheme="https://cedriclee85.github.io/tags/vim/"/>
    <content>
      <![CDATA[<h2 id="文本流"><a href="#文本流" class="headerlink" title="文本流"></a>文本流</h2><p>在计算机中，所谓的数据就是<em>0</em>或1的二进制序列，但严格来说，Unix以<strong>字节</strong>（byte）来作为数据的单位，也就是说这个序列每八位（bit）为一个单位。八位的二进制数字，会落在十进制从0到255的范围内。利用ASCII编码，可以把这一个字节转换成为256个字符中的一个。所以，在Unix中，数据完全可以用字符的形式表示出来，也就是所谓的文本（text）。</p><p>实际上，如果以位为单位的话，机器会更容易读懂和传输。但Unix系统坚持用字节为单位来表示数据。原因在于，相对于以位为单位的二进制数据，以字节为单位文本直接就人类可读（human readable）。这样的话，无论是计算机配置信息，还是别人写的一首诗，用户都可以直接读懂。当然，并不是所有的数据都是设计来让人读懂的。很多编译好的可执行文件中包含的内容，只有机器能读懂。打开这个文件，尽管也能看到一个个字符，但这些字符并不能组成什么有意义的文本。但Unix系统不会给这种“读不懂”的文件开后门。所有文件都是统一的形式，就能以相同的方法存储，也能共用一套处理工具，从而减少程序开发的难度。</p><p>存储文本的文件，就相当于一个个存储数据的房子。在Unix的设计哲学中，一向有“万物皆文件”（Everything is a file）的说法。大部分的文件都对应了存储设备，也就是树莓派的SD卡上的信息。就连表示文件位置的目录，也是一种文件。此外，程序的配置信息，也都存储在文件中。对于Unix系统来说，文件可以广义的认为是可以提供或接收数据的对象。既然这样，Unix系统干脆把提供或接收数据的硬件也表示成文件。这其中，既有外部连接的USB设备，也包括树莓派内部的内存等硬件。在&#x2F;dev目录下，就可以找到很多这样代表硬件的文件。</p><p>但托瓦兹对“万物皆文件”的说法作出过纠正，改为“万物皆文本流”（<a href="http://yarchive.net/comp/linux/everything_is_file.html">Everything is a stream of bytes</a>）。系统运行时，数据并不是在一个文件里定居。数据会在CPU的指挥下不断地流动，就好像一个勤劳的上班族。有时数据需要到办公室上班，因此被读入到内存，有时会去酒店休假，传送到外部设备。有的时候，数据需要搬个家，转移到另一个文件。在这样跑来跑去的过程中，数据像是排着队走路的人流，我们叫它<strong>文本流（text stream</strong>，或者byte stream）。然而，计算机不同设备之间的连接方法差异很大，从内存到文件的连接像是爬山，从内存到外设像是游过一条河。为此，Unix定义了<strong>流 (stream)</strong>，作为连接操作系统各处的<strong>公路</strong>标准。有了“流”，无论是从内存到外设，还是从内存到文件，所有的数据公路都是相同的格式。至于公路下面是石头还是土地，就都交给操作系统处理，不劳用户操心。</p><p>(说句题外话，如果看过骇客帝国的话，一定会对文本流印象深刻。)</p><p><img src="/2019/03/26/linux-text-stream/2012091402482228.jpg" alt="骇客帝国"></p><h2 id="标准输入，标准输出，标准错误与重新定向"><a href="#标准输入，标准输出，标准错误与重新定向" class="headerlink" title="标准输入，标准输出，标准错误与重新定向"></a>标准输入，标准输出，标准错误与重新定向</h2><p>当Unix执行一个程序的时候，会自动打开三个流，<strong>标准输入</strong>(standard input)，<strong>标准输出</strong>(standard output)，<strong>标准错误</strong>(standard error)。比如说你打开命令行的时候，默认情况下，命令行的标准输入连接到键盘，标准输出和标准错误都连接到屏幕。对于一个程序来说，尽管它总会打开这三个流，但它会根据需要使用，并不是一定要使用。</p><p>想象一下敲击一个</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">ls</span></span></span><br></pre></td></tr></table></figure><p>键盘敲击的文本流(“ls\n”，\n是回车时输入的字符，表示换行)命令行 (命令行实际上也是一个程序)。命令行随后调用&#x2F;bin&#x2F;ls得到结果(“a.txt”)，最后这个输出的文本流(“a.txt”)流到屏幕，显示出来，比如说：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a.txt</span><br></pre></td></tr></table></figure><p>假设说我们不想让文本流流到屏幕，而是流到另一个文件，我们可以采用<strong>重新定向</strong>(redirect)的机制。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">ls</span> &gt; a.txt</span></span><br></pre></td></tr></table></figure><p><strong>重新定向标准输出</strong>。这里的<code>&gt;</code>就是提醒命令行，让它知道我现在想变换文本流的方向了，我们不让标准输出输出到屏幕，而是要到a.txt这个文件 (好像火车轨道换轨)。此时，计算机会新建一个a.txt的文件，并将命令行的标准输出指向这个文件。</p><p>有另一个符号:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">ls</span> &gt;&gt; a.txt</span></span><br></pre></td></tr></table></figure><p>这里<code>&gt;&gt;</code>的作用也是<strong>重新定向标准输出</strong>。如果<code>a.txt</code>已经存在的话，<code>ls</code>产生的文本流会附加在<code>a.txt</code>的结尾，而不会像<code>&gt;</code>那样每次都新建<code>a.txt</code>。</p><p>我们下面介绍<strong>命令echo</strong>：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">echo</span> IamVamei</span></span><br></pre></td></tr></table></figure><p><code>echo</code> 的作用是<strong>将文本流导向标准输出</strong>。在这里，echo的作用就是将IamVamei输出到屏幕上。如果是</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">echo</span> IamVamei &gt; a.txt</span></span><br></pre></td></tr></table></figure><p>a.txt中就会有IamVamei这个文本。</p><p>我们也可以用<code>&lt;</code>符号来<strong>改变标准输入</strong>。比如<code>cat</code>命令，它可以<strong>从标准输入读入文本流，并输出到标准输出</strong>:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cat</span> &lt; a.txt</span></span><br></pre></td></tr></table></figure><p>我们将cat标准输入指向a.txt，文本会从文件流到cat，然后再输出到屏幕上。当然，我们还可以同时重新定向标准输出:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cat</span> &lt; a.txt &gt; b.txt</span></span><br></pre></td></tr></table></figure><p>这样，a.txt的内容就复制到了b.txt中。</p><p>我们还可以使用<code>&gt;&amp;</code>来同时重新定向标准输出和标准错误。假设我们并没有一个目录void。那么</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cd</span> void &gt; a.txt</span></span><br></pre></td></tr></table></figure><p>会在屏幕上返回错误信息。因为此时标准错误依然指向屏幕。当我们使用:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cd</span> void &gt;&amp; a.txt</span></span><br></pre></td></tr></table></figure><p>错误信息被导向a.txt。</p><p>如果只想重新定向标准错误，可以使用<code>2&gt;</code>:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cd</span> void 2&gt; a.txt &gt; b.txt</span></span><br></pre></td></tr></table></figure><p>标准错误对应的总是<strong>2号</strong>，所以有以上写法。标准错误输出到a.txt，标准输出输出到b.txt。</p><h2 id="管道-pipe"><a href="#管道-pipe" class="headerlink" title="管道 (pipe)"></a>管道 (pipe)</h2><p>理解了以上的内容之后，<strong>管道</strong>的概念就易如反掌。管道可以将一个命令的输出导向另一个命令的输入，从而让两个(或者更多命令)像流水线一样连续工作，不断地处理文本流。在命令行中，我们用<code>|</code>表示管道：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">$</span><span class="language-bash"><span class="built_in">cat</span> &lt; a.txt | <span class="built_in">wc</span></span></span><br></pre></td></tr></table></figure><p><code>wc</code>命令代表<strong>word count</strong>，用于<strong>统计</strong>文本中的<strong>行</strong>、<strong>词</strong>以及<strong>字符</strong>的总数。a.txt中的文本先流到cat，然后从cat的标准输出流到wc的标准输入，从而让wc知道自己要处理的是a.txt这个字符串。</p><p>Linux的各个命令实际上高度专业化，并尽量相互独立。每一个都只专注于一个小的功能。但通过pipe，我们可以将这些功能合在一起，实现一些复杂的目的。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>文本流，标准输入，标准输出，标准错误</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cat, echo, wc</span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_">&gt;</span><span class="language-bash">, &gt;&gt;, &lt;, |</span></span><br></pre></td></tr></table></figure><hr><p>reference:<br><a href="http://www.cnblogs.com/vamei/archive/2012/09/14/2683756.html">http://www.cnblogs.com/vamei/archive/2012/09/14/2683756.html</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2019/03/26/linux-text-stream/</id>
    <link href="https://cedriclee85.github.io/2019/03/26/linux-text-stream/"/>
    <published>2019-03-26T01:36:07.000Z</published>
    <summary>
      <![CDATA[🏗️本文解释了文本、流、文本流、标准输入、标准输出、标准错误与重新定向、管道 (pipe)等概念。<br /><br />托瓦兹对<b>“万物皆文件”</b>的说法作出过纠正，改为<b>“万物皆文本流”💧（Everything is a stream of bytes）</b>。系统运行时，数据并不是在一个文件里定居。数据会在CPU的指挥下不断地流动，就好像一个勤劳的上班族。有时数据需要到办公室上班，因此被读入到内存，有时会去酒店休假，传送到外部设备。有的时候，数据需要搬个家，转移到另一个文件。在这样跑来跑去的过程中，数据像是排着队走路的人流，我们叫它<b>文本流（text stream</b>，或者byte stream）。然而，计算机不同设备之间的连接方法差异很大，从内存到文件的连接像是爬山，从内存到外设像是游过一条河。🛶为此，Unix定义了<b>流 (stream)</b>，作为连接操作系统各处的<b>公路</b>标准。有了“流”，无论是从内存到外设，还是从内存到文件，所有的数据公路都是相同的格式。至于公路下面是石头还是土地，就都交给操作系统处理，不劳用户操心。<br /><br />理解了以上的概念之后，<b>管道</b>的概念就易如反掌。管道可以将一个命令的输出导向另一个命令的输入，从而让两个(或者更多命令)像流水线一样连续工作，不断地处理文本流。在命令行中，我们用 <code>|</code> 表示管道。]]>
    </summary>
    <title>Linux文本流</title>
    <updated>2026-08-25T05:42:37.959Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="python" scheme="https://cedriclee85.github.io/tags/python/"/>
    <content>
      <![CDATA[<h2 id="安装Python2"><a href="#安装Python2" class="headerlink" title="安装Python2"></a>安装Python2</h2><p>Mac系统已经默认带有Python2.7了，所以无需安装它。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">which</span> python</span><br><span class="line"><span class="comment"># 输出如下：</span></span><br><span class="line"><span class="comment"># /usr/bin/python</span></span><br></pre></td></tr></table></figure><h2 id="安装Python3"><a href="#安装Python3" class="headerlink" title="安装Python3"></a>安装Python3</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 安装 python3</span></span><br><span class="line">brew install python3</span><br><span class="line"></span><br><span class="line"><span class="built_in">which</span> python3</span><br><span class="line"><span class="comment"># 输出如下：</span></span><br><span class="line"><span class="comment"># /usr/local/bin/python3</span></span><br></pre></td></tr></table></figure><h2 id="不同版本Python路径"><a href="#不同版本Python路径" class="headerlink" title="不同版本Python路径"></a>不同版本Python路径</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/System/Library/Frameworks/Python.framework/Versions/2.7  <span class="comment"># 系统默认</span></span><br><span class="line">/usr/local/Cellar/python  <span class="comment"># brew安装</span></span><br></pre></td></tr></table></figure><h2 id="配置Python2-和Python3"><a href="#配置Python2-和Python3" class="headerlink" title="配置Python2 和Python3"></a>配置Python2 和Python3</h2><ol><li><p>指定对应路径，控制台输入：<code>vi ~/.zshrc</code></p><p>按一下键盘 <code>I</code> 键，变成可编辑状态后，在末尾加上如下内容：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Setting PATH for Python 2.7</span></span><br><span class="line">PATH=<span class="string">&quot;/System/Library/Frameworks/Python.framework/Versions/2.7/bin:<span class="variable">$&#123;PATH&#125;</span>&quot;</span></span><br><span class="line"><span class="built_in">export</span> PATH</span><br><span class="line"><span class="comment"># Setting PATH for Python 3.7.2_2(修改为实际安装的版本号，下同)</span></span><br><span class="line">PATH=<span class="string">&quot;/usr/local/Cellar/python/3.7.2_2/bin:<span class="variable">$&#123;PATH&#125;</span>&quot;</span></span><br></pre></td></tr></table></figure><p>编辑完后，按 <code>esc</code> 退出编辑状态，然后输入 <code>:wq</code> 并回车，这样就保存了所修改的 <code>~/.zshrc</code> 文件</p></li><li><p>添加alias（zsh 环境可以省略这一步），控制台输入：<code>vi ~/.zshrc</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">alias</span> python2=<span class="string">&#x27;/System/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7&#x27;</span></span><br><span class="line"><span class="built_in">alias</span> python3=<span class="string">&#x27;/usr/local/Cellar/python/3.7.2_2/bin/python3.7&#x27;</span></span><br><span class="line"><span class="comment"># alias python=python3</span></span><br></pre></td></tr></table></figure></li><li><p>上述步骤的修改，虽然保存了，但是系统还没让其生效，所以我们需要source一下。控制台输入：<code>source ~/.zshrc</code>  然后按回车键。最后关闭终端，重新打开，即生效。</p></li><li><p>输入对应的命令，即可自由选择使用对应的Python版本。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ python <span class="comment"># (或者 python2)，进入python2 环境</span></span><br><span class="line">Python 2.7.10 (default, Oct  6 2017, 22:29:07)</span><br><span class="line">[GCC 4.2.1 Compatible Apple LLVM 9.0.0 (clang-900.0.31)] on darwin</span><br><span class="line">Type <span class="string">&quot;help&quot;</span>, <span class="string">&quot;copyright&quot;</span>, <span class="string">&quot;credits&quot;</span> or <span class="string">&quot;license&quot;</span> <span class="keyword">for</span> more information.</span><br><span class="line">&gt;&gt;&gt;</span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ python3 <span class="comment"># 进入python3 环境</span></span><br><span class="line">Python 3.7.2 (default, Feb 12 2019, 08:16:38)</span><br><span class="line">[Clang 10.0.0 (clang-1000.11.45.5)] on darwin</span><br><span class="line">Type <span class="string">&quot;help&quot;</span>, <span class="string">&quot;copyright&quot;</span>, <span class="string">&quot;credits&quot;</span> or <span class="string">&quot;license&quot;</span> <span class="keyword">for</span> more information.</span><br><span class="line">&gt;&gt;&gt;</span><br></pre></td></tr></table></figure></li><li><p>退出Python控制台</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 方法 1：</span></span><br><span class="line">quit()</span><br><span class="line"></span><br><span class="line"><span class="comment"># 方法 2：</span></span><br><span class="line">exit()</span><br><span class="line"></span><br><span class="line"><span class="comment"># 方法 3：</span></span><br><span class="line">ctrl + D</span><br></pre></td></tr></table></figure></li></ol>]]>
    </content>
    <id>https://cedriclee85.github.io/2019/03/03/switch-python-version/</id>
    <link href="https://cedriclee85.github.io/2019/03/03/switch-python-version/"/>
    <published>2019-03-03T02:47:49.000Z</published>
    <summary>Mac系统已经默认带有Python2.7了，所以无需安装它。用 brew 安装 python3</summary>
    <title>Mac中安装配置Python2、Python3及自由切换</title>
    <updated>2026-08-25T05:42:37.966Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="epub" scheme="https://cedriclee85.github.io/tags/epub/"/>
    <content>
      <![CDATA[<blockquote><p>工具准备：<a href="https://calibre-ebook.com/">Calibre</a>，Calibre 中文轉換插件 <a href="https://github.com/Hopkins1/TradSimpChinese">TradSimpChinese</a></p></blockquote><h2 id="编辑书籍-Edit-Book-简介"><a href="#编辑书籍-Edit-Book-简介" class="headerlink" title="编辑书籍&#x2F;Edit Book 简介"></a><em>编辑书籍&#x2F;Edit Book</em> 简介</h2><p>打开 Calibre，软件右上角工具栏中即可找到<em>编辑书籍&#x2F;Edit Book</em></p><ul><li>左侧：文件浏览，双击任何一个文件可在中间区域查看文件源码或图片</li><li>右侧：文件预览区，查看html页面预览效果</li></ul><h2 id="让-ibooks-支持内置字体"><a href="#让-ibooks-支持内置字体" class="headerlink" title="让 ibooks 支持内置字体"></a>让 ibooks 支持内置字体</h2><p>第一步，修改 content.opf 文件，新增一行：<code>&lt;meta property=&quot;ibooks:specified-fonts&quot;&gt;true&lt;/meta&gt;</code></p><p>第二步，创建xml文件: <code>com.apple.ibooks.display-options.xml</code>，内容如下：</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">display_options</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">platform</span> <span class="attr">name</span>=<span class="string">&quot;*&quot;</span>&gt;</span> <span class="comment">&lt;!-- allowed values for platform &quot;iphone&quot;, &quot;ipad&quot;, or &quot;*&quot; for all --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">name</span>=<span class="string">&quot;specified-fonts&quot;</span>&gt;</span>true<span class="tag">&lt;/<span class="name">option</span>&gt;</span> <span class="comment">&lt;!-- must be set to &quot;true&quot; for embedded fonts --&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">platform</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">display_options</span>&gt;</span></span><br></pre></td></tr></table></figure><p>第三步，点击 calibre 中的 <em>编辑书籍&#x2F;Edit Book</em> 打开 <em>Edit Book</em> 工具，点击 <em>新增文件&#x2F;New File</em>：</p><ul><li>在弹窗中输入 <code>meta-inf/com.apple.ibooks.display-options.xml</code></li><li>点击 <em>导入文件(图片&#x2F;字体等)&#x2F;Import resource file</em>，定位到第二步创建的xml文件选择打开，点 <em>确定</em> 后xml文件就添加好了。</li></ul><p>第四步，点击 <em>工具栏</em> 中的 <em>管理字体(TTF)</em> &gt; <em>安装字体</em>，添加字体后可通过重命名更改字体路径：<code>Fonts/FontName.ttf</code></p><p>第五步，在样式表中添加内置字体：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;FontName&quot;</span>; <span class="comment">/* FontName 可设定为任意名字 */</span></span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">../Path/FontName.ttf</span>); <span class="comment">/* 注意将 Path 和 FontName 修改为你创建的路径名和字体名称 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="竖排，从右向左翻页"><a href="#竖排，从右向左翻页" class="headerlink" title="竖排，从右向左翻页"></a>竖排，从右向左翻页</h2><p>第一步，修改 content.opf 文件，新增一行：<code>&lt;meta content=&quot;vertical-rl&quot; name=&quot;primary-writing-mode&quot;/&gt;</code></p><p>第二步，修改 content.opf 文件， 给 spine 标签增加一属性：<code>page-progression-direction=&quot;rtl&quot;</code></p><p>第三步，修改样式表，为 body 增加一属性： <code>writing-mode: vertical-rl</code>;</p><blockquote><p>有时需要<strong>局部横排</strong>显示，例如图片的说明文字可以横排显示在图片下方，可为说明文字单独设置css：writing-mode: horizontal-tb</p></blockquote><h2 id="添加弹注效果"><a href="#添加弹注效果" class="headerlink" title="添加弹注效果"></a>添加弹注效果</h2><p><img src="/2018/11/05/making-epub-tips/flowing_footnote.png" alt="footnote"></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="attr">xmlns:epub</span>=<span class="string">&quot;http://www.idpf.org/2007/ops&quot;</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;chapter.xhtml#myNote&quot;</span> <span class="attr">epub:type</span>=<span class="string">&quot;noteref&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">aside</span> <span class="attr">id</span>=<span class="string">&quot;myNote&quot;</span> <span class="attr">epub:type</span>=<span class="string">&quot;footnote&quot;</span>&gt;</span>Text in popup<span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意，必须有这几个属性：</p><ul><li>html 标签: <code>xmlns:epub=&quot;http://www.idpf.org/2007/ops&quot;</code></li><li>a (注释序号)：<code>epub:type=&quot;noteref&quot;</code></li><li>aside (注释)：<code>epub:type=&quot;footnote&quot;</code></li></ul><p>aside 标签会自动隐藏，如果希望注释正常显示出来，可用 <code>div</code> &#x2F; <code>p</code> 等标签替代。<br>ios 中为整屏弹注，多看等其它阅读器不支持这种方式。</p></blockquote><h2 id="繁体标点替换"><a href="#繁体标点替换" class="headerlink" title="繁体标点替换"></a>繁体标点替换</h2><ul><li><code>“</code> 替换成 <code>「</code></li><li><code>”</code> 替换成 <code>」</code></li><li><code>‘</code> 替换成 <code>『</code></li><li><code>’</code> 替换成 <code>』</code></li></ul><h2 id="修改语言"><a href="#修改语言" class="headerlink" title="修改语言"></a>修改语言</h2><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dc:language</span>&gt;</span>zh-Hans<span class="tag">&lt;/<span class="name">dc:language</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><strong>繁体</strong>：<code>zh-Hant</code></li><li>大陆繁体：<code>zh-Hant-CN</code></li><li>香港繁体：<code>zh-Hant-HK</code></li><li>澳门繁体：<code>zh-Hant-MO</code></li><li>新加坡繁体：<code>zh-Hant-SG</code></li><li>台湾繁体：<code>zh-Hant-TW</code></li><li><strong>简体</strong>：<code>zh-Hans</code></li><li>大陆简体：<code>zh-Hans-CN</code></li><li>香港简体：<code>zh-Hans-HK</code></li><li>澳门简体：<code>zh-Hans-MO</code></li><li>新加坡简体：<code>zh-Hans-SG</code></li><li>台湾简体：<code>zh-Hans-TW</code></li></ul><h2 id="body-样式设置参考"><a href="#body-样式设置参考" class="headerlink" title="body 样式设置参考"></a>body 样式设置参考</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5%</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: justify;</span><br><span class="line">    <span class="attribute">writing-mode</span>: vertical-rl;</span><br><span class="line">    -webkit-<span class="attribute">writing-mode</span>:vertical-rl;</span><br><span class="line">    -epub-<span class="attribute">writing-mode</span>: vertical-rl;</span><br><span class="line">    -epub-<span class="attribute">line-break</span>: auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="epub目录树结构"><a href="#epub目录树结构" class="headerlink" title="epub目录树结构"></a>epub目录树结构</h2><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">├── META-INF</span><br><span class="line">│   ├── com.apple.ibooks.display-options.xml</span><br><span class="line">│   └── container.xml</span><br><span class="line">├── OEBPS</span><br><span class="line">│   ├── Fonts</span><br><span class="line">│   │   └── kangxidict.ttf</span><br><span class="line">│   ├── Images</span><br><span class="line">│   │   ├── Image00000.jpg</span><br><span class="line">│   │   ├── Image00001.jpg</span><br><span class="line">│   │   ├── ...</span><br><span class="line">│   │   └── Image00200.jpg</span><br><span class="line">│   ├── OEBPS</span><br><span class="line">│   │   └── cover.jpg</span><br><span class="line">│   ├── Styles</span><br><span class="line">│   │   ├── flow0001.css</span><br><span class="line">│   │   ├── flow0002.css</span><br><span class="line">│   │   ├── ...</span><br><span class="line">│   │   └── flow0005.css</span><br><span class="line">│   ├── Text</span><br><span class="line">│   │   ├── text00000.html</span><br><span class="line">│   │   ├── text00001.html</span><br><span class="line">│   │   ├── ...</span><br><span class="line">│   │   └── text00090.html</span><br><span class="line">│   ├── content.opf</span><br><span class="line">│   └── toc.ncx</span><br><span class="line">└── mimetype</span><br></pre></td></tr></table></figure><hr><p>reference:<br><a href="http://guidohenkel.com/2015/04/custom-fonts-in-ibooks/">Custom Fonts</a><br><a href="https://help.apple.com/itc/booksassetguide/en.lproj/static.html">Pop-up Footnotes</a>（Section: <strong>Pop-up Footnotes</strong>）<br><a href="https://bookfere.com/post/204.html">如何把 Kindle 电子书的横排文字改成竖排</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/11/05/making-epub-tips/</id>
    <link href="https://cedriclee85.github.io/2018/11/05/making-epub-tips/"/>
    <published>2018-11-05T09:30:46.000Z</published>
    <summary>简要介绍如何制作 epub 文档</summary>
    <title>epub电子书制作杂录</title>
    <updated>2026-08-25T05:42:37.965Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="vim" scheme="https://cedriclee85.github.io/tags/vim/"/>
    <content>
      <![CDATA[<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:[addr]s/源字符串/目的字符串/[option]</span><br></pre></td></tr></table></figure><p>全局替换命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:%s/源字符串/目的字符串/g</span><br></pre></td></tr></table></figure><blockquote><p>源字符串可以用正则表达式，特殊变量需要转义（加<code>\</code>，比如: <code>\(</code>）<br>目的字符串引用方式：</p><ul><li><code>\0</code> 或 <code>&amp;</code>：表达式匹配的全部文本；</li><li><code>\1</code>：编号为 1 的捕获分组匹配的文本；</li><li><code>\2</code>：编号为 1 的捕获分组匹配的文本；</li><li><code>\L</code>：将之后的所有字符转换为小写；</li><li><code>\U</code>：将之后的所有字符转换为大写；</li><li><code>\E</code> 或 <code>\e</code>：<code>\U</code> 和 <code>\L</code> 的作用结束；</li><li><code>\l</code>：将此后一个字符转换为小写；</li><li><code>\u</code>：将此后一个字符转换为大写。</li></ul></blockquote><h2 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h2><p><strong><code>[addr]</code>  表示检索范围，省略时表示当前行。</strong></p><ul><li><code>1,20</code>：表示从第1行到20行；</li><li><code>%</code>：   表示整个文件，同 <code>1,$</code>；</li><li><code>. ,$</code>：从当前行到文件尾；</li></ul><p><strong><code>s</code> : 表示替换操作</strong></p><p><strong><code>[option]</code> : 表示操作类型</strong></p><ul><li><code>g</code> 表示全局替换;</li><li><code>c</code> 表示进行确认</li><li><code>p</code> 表示替代结果逐行显示（Ctrl + L恢复屏幕）;</li><li>省略<code>option</code>时仅对每行第一个匹配串进行替换;</li><li>如果在源字符串和目的字符串中出现特殊字符，需要用 <code>\</code> 转义 如 <code>\t</code></li></ul><h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"># ==================================================</span><br><span class="line">#将That <span class="built_in">or</span> this 换成 This <span class="built_in">or</span> that</span><br><span class="line">:%s/\(That\) <span class="built_in">or</span> \(this\)/\<span class="keyword">u</span>\<span class="number">2</span> <span class="built_in">or</span> \<span class="keyword">l</span>\<span class="number">1</span>/</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#将句尾的child换成children</span><br><span class="line">:%s/child\([ ,.;!:?]\)/children\<span class="number">1</span>/g</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#将mgi/r/abox换成mgi/r/asquare</span><br><span class="line">:g/mg\([ira]\)box/s//mg//my\<span class="number">1</span>square/g    &lt;=&gt;  :g/mg[ira]box/s/box/square/g</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#将多个空格换成一个空格</span><br><span class="line">:%s/  */ /g</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#使用空格替换句号或者冒号后面的一个或者多个空格</span><br><span class="line">:%s/\([:.]\)  */\<span class="number">1</span> /g</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#删除所有空行</span><br><span class="line">:g/^$/d</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#删除所有的空白行和空行</span><br><span class="line">:g/^[  ][  ]*$/d</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#在每行的开始插入两个空白</span><br><span class="line">:%s/^/&gt;  /</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#在接下来的<span class="number">6</span>行末尾加入.</span><br><span class="line">:.,<span class="number">5</span>/$/./</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#颠倒文件的行序</span><br><span class="line">:g/.*/m0O  &lt;=&gt; :g/^/m0O</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#寻找不是数字的开始行,并将其移到文件尾部</span><br><span class="line">:g!/^[<span class="number">0</span>-<span class="number">9</span>]/<span class="keyword">m</span>$ &lt;=&gt; g/^[^<span class="number">0</span>-<span class="number">9</span>]/<span class="keyword">m</span>$</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#将文件的第<span class="number">12</span>到<span class="number">17</span>行内容复制<span class="number">10</span>词放到当前文件的尾部</span><br><span class="line">:<span class="number">1</span>,<span class="number">10</span>g/^/<span class="number">12</span>,<span class="number">17</span>t$</span><br><span class="line">#~~~~重复次数的作用</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">#将chapter开始行下面的第二行的内容写道begin文件中</span><br><span class="line">:g/^chapter/.+<span class="number">2</span><span class="keyword">w</span>&gt;&gt;begin</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">:/^part2/,/^part3/g/^chapter/.+<span class="number">2</span><span class="keyword">w</span>&gt;&gt;begin</span><br><span class="line"></span><br><span class="line"># ==================================================</span><br><span class="line">:/^part2/,/^part3/g/^chapter/.+<span class="number">2</span><span class="keyword">w</span>&gt;&gt;begin|+t$</span><br></pre></td></tr></table></figure>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/09/10/vim-replacement/</id>
    <link href="https://cedriclee85.github.io/2018/09/10/vim-replacement/"/>
    <published>2018-09-10T02:37:32.000Z</published>
    <summary>在 vim 中批量替换文本</summary>
    <title>vim 批量替换命令</title>
    <updated>2026-08-25T05:42:37.967Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="Mac" scheme="https://cedriclee85.github.io/tags/Mac/"/>
    <category term="agent" scheme="https://cedriclee85.github.io/tags/agent/"/>
    <content>
      <![CDATA[<h2 id="方法1"><a href="#方法1" class="headerlink" title="方法1"></a>方法1</h2><p>在终端中直接运行命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> http_proxy=http://proxyAddress:port</span><br></pre></td></tr></table></figure><p>这个办法的好处是简单直接，并且影响面很小（只对当前终端有效）。</p><h2 id="方法2"><a href="#方法2" class="headerlink" title="方法2"></a>方法2</h2><p>把代理服务器地址写入shell配置文件.bashrc或者.zshrc<br>直接在.bashrc或者.zshrc添加下面内容</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> http_proxy=<span class="string">&quot;http://localhost:port&quot;</span></span><br><span class="line"><span class="built_in">export</span> https_proxy=<span class="string">&quot;http://localhost:port&quot;</span></span><br></pre></td></tr></table></figure><p>以使用shadowsocks代理为例，ss的代理端口为1080,那么应该设置为</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> http_proxy=<span class="string">&quot;http://127.0.0.1:1080&quot;</span></span><br><span class="line"><span class="built_in">export</span> https_proxy=<span class="string">&quot;http://127.0.0.1:1080&quot;</span></span><br></pre></td></tr></table></figure><p>localhost就是一个域名，域名默认指向 <code>127.0.0.1</code>，两者是一样的。<br>然后按 <code>ESC</code> 退出编辑模式，输入 <code>:wq</code> 保存文件，接着在终端中执行 <code>source ~/.bashrc</code> 启用设置修改<br>或者退出当前终端再起一个终端。 这个办法的好处是把代理服务器永久保存了，下次就可以直接用了。</p><h2 id="方法3"><a href="#方法3" class="headerlink" title="方法3"></a>方法3</h2><p>改相应工具的配置，比如 apt 的配置</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> vim /etc/apt/apt.conf</span><br></pre></td></tr></table></figure><p>在文件末尾加入下面这行</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Acquire::http::Proxy <span class="string">&quot;http://proxyAddress:port&quot;</span></span><br></pre></td></tr></table></figure><p>保存 <code>apt.conf</code> 文件即可。关于 apt 的代理设置可以参考<a href="http://askubuntu.com/questions/349702/apt-conf-acquirehttpproxy-proxyserverport-seems-not-to-be-used-ubuntu-13">这里</a><br>关于 git 的代理设置看这里:<del><a href="http://blog.fazero.cc/2015/07/11/%E7%94%A8shadowsocks%E5%8A%A0%E9%80%9Fgit-clone/">用shadowsocks加速git clone</a></del> (此链接已失联)</p><h2 id="方法4"><a href="#方法4" class="headerlink" title="方法4"></a>方法4</h2><p><del><a href="http://blog.fazero.cc/2015/08/31/%E5%88%A9%E7%94%A8proxychains%E5%9C%A8%E7%BB%88%E7%AB%AF%E4%BD%BF%E7%94%A8socks5%E4%BB%A3%E7%90%86/">利用proxychains在终端使用socks5代理</a></del> (此链接已失联)</p><h2 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h2><p>如果代理服务器需要登陆，这时可以直接把用户名和密码写进去</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http_proxy=http://userName:password@proxyAddress:port</span><br></pre></td></tr></table></figure>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/07/02/Mac-Terminal-agent/</id>
    <link href="https://cedriclee85.github.io/2018/07/02/Mac-Terminal-agent/"/>
    <published>2018-07-02T01:23:33.000Z</published>
    <summary>Mac 终端代理设置 ✔️</summary>
    <title>MAC下终端走代理的几种方法</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="google" scheme="https://cedriclee85.github.io/tags/google/"/>
    <category term="search" scheme="https://cedriclee85.github.io/tags/search/"/>
    <content>
      <![CDATA[<h2 id="搜索入门"><a href="#搜索入门" class="headerlink" title="搜索入门"></a>搜索入门</h2><h3 id="多个关键字"><a href="#多个关键字" class="headerlink" title="多个关键字"></a>多个关键字</h3><p><strong>搜索结果要求包含两个及以上关键字</strong>，以<code>空格</code>分隔；</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">搜索引擎 历史</span><br></pre></td></tr></table></figure><h3 id="不包含特定关键字"><a href="#不包含特定关键字" class="headerlink" title="不包含特定关键字"></a>不包含特定关键字</h3><p><strong>搜索结果不包含某些特定资讯</strong>，用减号<code>-</code>操作；</p><figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">搜索引擎 历史 <span class="punctuation">-</span>文化 <span class="punctuation">-</span>中国历史 <span class="punctuation">-</span>世界历史</span><br><span class="line"><span class="comment">// 注意：减号后面没有空格</span></span><br></pre></td></tr></table></figure><h3 id="或搜索"><a href="#或搜索" class="headerlink" title="或搜索"></a>或搜索</h3><p><strong>搜索结果至少包含多个关键字中的任意一个</strong>，用大写的<code>OR</code>操作；</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">搜索引擎 历史 archie OR 蜘蛛 OR lycos OR yahoo -文化</span><br><span class="line">// 至少包含 <span class="selector-attr">[archie]</span>、<span class="selector-attr">[蜘蛛]</span>、<span class="selector-attr">[lycos]</span>、<span class="selector-attr">[yahoo]</span>中的一个，不包含<span class="selector-attr">[文化]</span></span><br></pre></td></tr></table></figure><h3 id="通配符"><a href="#通配符" class="headerlink" title="通配符"></a>通配符</h3><p>目前可以用<code>*</code>来代替单个字元，而且必须用英文的双引号<code>””</code>引起来；</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">“以*治国”</span><br></pre></td></tr></table></figure><h3 id="字母大小写不敏感"><a href="#字母大小写不敏感" class="headerlink" title="字母大小写不敏感"></a>字母大小写不敏感</h3><p><code>GOD</code>和<code>god</code>搜索的结果是一样的；</p><h3 id="搜整个短语或句子"><a href="#搜整个短语或句子" class="headerlink" title="搜整个短语或句子"></a>搜整个短语或句子</h3><p>关键字可以是单词（中间没有空格），也可以是短语（中间有空格）。但是，用短语做关键字，必须加英文引号<code>””</code>，否则空格会被当作<code>与</code>操作符。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">“world war <span class="selector-tag">I</span>”</span><br></pre></td></tr></table></figure><h3 id="忽略字元及强制搜索"><a href="#忽略字元及强制搜索" class="headerlink" title="忽略字元及强制搜索"></a>忽略字元及强制搜索</h3><p>搜索引擎忽略的字元以及强制搜索，如<code>i</code>、<code>com</code>、<code>www</code>等，以及一些符号如<code>*</code>、<code>.</code>等，作忽略处理。</p><figure class="highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">www的历史 <span class="built_in">int</span>ernet</span><br><span class="line"><span class="comment">// 搜索结果中不会有与[www]相关的结果</span></span><br></pre></td></tr></table></figure><blockquote><p>搜索引擎实际上把<code>www的历史</code>这个短语分成三部分：<code>www</code>、<code>的</code>、<code>历史</code>，分别来检索，这就是<strong>搜索引擎的分词</strong>。所以尽管你输入了连续的<code>www的历史</code>，但搜索引擎还是把这个短语当成三个关键字分别检索。</p></blockquote><p>要对忽略的关键字进行强制检索，可以用英文双引号<code>””</code>引起来：</p><figure class="highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">“www的历史” <span class="built_in">int</span>ernet</span><br><span class="line"><span class="comment">// 搜索结果中会有与[www]相关的结果</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：大部分常用英文符号（如问号，句号，逗号等）无法成为搜索关键字，加强制也不行。</p></blockquote><h2 id="搜索进阶"><a href="#搜索进阶" class="headerlink" title="搜索进阶"></a>搜索进阶</h2><h3 id="特定网站"><a href="#特定网站" class="headerlink" title="特定网站"></a>特定网站</h3><p>对搜索的网站进行限制——<code>site:</code></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// eg1:</span></span><br><span class="line">搜索引擎 技巧 site:edu<span class="selector-class">.cn</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// eg2:</span></span><br><span class="line">“search engine” tips site:www<span class="selector-class">.zhihu</span><span class="selector-class">.com</span> OR site:www<span class="selector-class">.douban</span>.com</span><br></pre></td></tr></table></figure><p><code>site</code>表示搜索结果局限于某个具体网站或者网站频道，如<code>http://www.zhihu.com</code>、<code>edu.sina.com.cn</code>，或者是某个顶级域名，如<code>com.cn</code>、<code>com</code>等等。如果是要排除某网站或者顶级域名范围内的页面，只需用“–网站&#x2F;顶级域名”。</p><blockquote><p>注意：<code>site:</code>中的冒号后面不能有空格。</p></blockquote><h3 id="特定文档"><a href="#特定文档" class="headerlink" title="特定文档"></a>特定文档</h3><p>在某一类档中查找资讯——<code>filetype:</code></p><figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// eg1:</span><br><span class="line">资产负债表 <span class="keyword">filetype</span>:doc OR <span class="keyword">filetype</span>:xls OR <span class="keyword">filetype</span>:ppt</span><br><span class="line"></span><br><span class="line">// eg2:</span><br><span class="line">冰与火之歌 <span class="keyword">filetype</span>:<span class="keyword">mkv</span> OR <span class="keyword">filetype</span>:mp4</span><br></pre></td></tr></table></figure><p><code>filetype:</code>是Google开发的非常强大实用的一个搜索语法。也就是说，Google不仅能搜索一般的文字页面，还能对某些二进位文档进行检索。</p><h3 id="包含在URL链接中"><a href="#包含在URL链接中" class="headerlink" title="包含在URL链接中"></a>包含在URL链接中</h3><p><strong>搜索的关键字包含在URL链接中</strong>——<code>inurl:</code>、<code>allinurl:</code></p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// eg1:</span></span><br><span class="line"><span class="symbol">inurl:</span>mp3 “这个世界会好吗”</span><br><span class="line"></span><br><span class="line"><span class="comment">// eg2:</span></span><br><span class="line"><span class="symbol">allinurl:</span>”cgi-bin” phf +com</span><br></pre></td></tr></table></figure><p>网页链接中包含第一个关键字<code>mp3</code>，第二个关键字<code>这个世界会好吗</code>出现在链接中或网页文档中。</p><p><code>allinurl</code>返回的网页链接中包含所有关键字。</p><h3 id="包含在网页标题中"><a href="#包含在网页标题中" class="headerlink" title="包含在网页标题中"></a>包含在网页标题中</h3><p><strong>搜索的关键字包含在网页标题中</strong>——<code>intitle:</code>、<code>allintitle:</code></p><p><code>intitle:</code>和<code>allintitle:</code>的用法类似于上面的<code>inurl</code>和<code>allinurl</code>，只是后者对URL进行查询，而前者对网页的标题栏（即<title></title>标签中的内容）进行查询。</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// eg1:</span></span><br><span class="line"><span class="symbol">intitle:</span>重庆 “轨道交通”</span><br><span class="line"></span><br><span class="line"><span class="comment">// eg2:</span></span><br><span class="line"><span class="symbol">allintitle:</span>重庆 “轨道交通”</span><br></pre></td></tr></table></figure><h3 id="包含在网页锚点内"><a href="#包含在网页锚点内" class="headerlink" title="包含在网页锚点内"></a>包含在网页锚点内</h3><p><strong>搜索的关键字包含在网页的“锚”(anchor)点内</strong>——<code>inanchor</code>、<code>allinanchor</code><br>用法与URL和TITLE类似。</p><h3 id="链接到某URL的网页"><a href="#链接到某URL的网页" class="headerlink" title="链接到某URL的网页"></a>链接到某URL的网页</h3><p><strong>搜索所有链接到某个URL位置的网页</strong>——<code>link:</code></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">link:www<span class="selector-class">.zhihu</span><span class="selector-class">.com</span></span><br><span class="line"><span class="comment">// 搜索所有链接到http://www.zhihu.com的网页。</span></span><br></pre></td></tr></table></figure><p>如果你拥有一个个人网站，想知道有多少人对你的网站做了链接，<code>link:</code>可以迅速达到这个目的。</p><p>⚠ <code>link:</code>不能与其他语法混合操作；另外，link只列出Google索引链接很小一部分，而非全部。</p><blockquote><p><strong>link的妙用</strong>：一般来说，做友情链接的网站都有相似的地方。这样，你可以通过友情链接，找到一大批具有相似内容的网站。</p></blockquote><h3 id="页面结构相似的页面"><a href="#页面结构相似的页面" class="headerlink" title="页面结构相似的页面"></a>页面结构相似的页面</h3><p><strong>查找与某个页面结构内容相似的页面</strong>——<code>related:</code></p><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">related:</span>www.zhihu.com</span><br></pre></td></tr></table></figure><h3 id="从缓存页面查询"><a href="#从缓存页面查询" class="headerlink" title="从缓存页面查询"></a>从缓存页面查询</h3><p><strong>从Google伺服器上缓存页面中查询资讯</strong>——<code>cache:</code></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/01/31/search-engine-skills/</id>
    <link href="https://cedriclee85.github.io/2018/01/31/search-engine-skills/"/>
    <published>2018-01-31T01:57:15.000Z</published>
    <summary>善用搜索引擎，改善生命质量🏄</summary>
    <title>搜索引擎常用技巧</title>
    <updated>2026-08-25T05:42:37.965Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="wiki" scheme="https://cedriclee85.github.io/tags/wiki/"/>
    <content>
      <![CDATA[<blockquote><p>直接访问：维基共享资源、维基语录、维基文库获取更多</p></blockquote><p>维基百科是维基媒体基金会旗下最为我们熟知的产品，然而…不过还有一些可以直接访问的项目，同样可以帮助到各位的方方面面。下面做个列表展示出来：</p><ul><li><img src="/2018/01/15/Wiki-Resources/37px-Wikipedia-logo-v2.svg.png" alt="维基百科"> <a href="https://zh.wikipedia.org/wiki/">维基百科</a> 自由的百科全书</li><li><img src="/2018/01/15/Wiki-Resources/35px-Wikisource-logo.svg.png" alt="维基文库"> <a href="https://zh.wikisource.org/wiki/">维基文库</a> 自由内容的图书馆</li><li><img src="/2018/01/15/Wiki-Resources/37px-Wiktionary-logo.svg.png" alt="维基词典"> <a href="https://zh.wiktionary.org/wiki/">维基词典</a> 多语言字词典</li><li><img src="/2018/01/15/Wiki-Resources/40px-Wikibooks-logo.svg.png" alt="维基教科书"> <a href="https://zh.wikibooks.org/wiki/">维基教科书</a> 自由的教科书和手册</li><li><img src="/2018/01/15/Wiki-Resources/55px-Wikinews-logo.svg.png" alt="维基新闻"> <a href="https://zh.wikinews.org/wiki/">维基新闻</a> 自由内容的新闻</li><li><img src="/2018/01/15/Wiki-Resources/40px-Wikispecies-logo.svg.png" alt="维基物种"> <a href="https://species.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5">维基物种</a> 物种目录</li><li><img src="/2018/01/15/Wiki-Resources/35px-Wikivoyage-Logo-v3-icon.svg.png" alt="维基导游"> <a href="https://zh.wikivoyage.org/wiki/%E9%A6%96%E9%A1%B5">维基导游</a> 自由的旅游指南</li><li><img src="/2018/01/15/Wiki-Resources/40px-Wikiversity-logo.svg.png" alt="维基学院"> <a href="https://beta.wikiversity.org/wiki/%E9%A6%96%E9%A1%B5">维基学院</a> 自由的研习社群</li><li><img src="/2018/01/15/Wiki-Resources/35px-Commons-logo.svg.png" alt="维基共享资源"> <a href="https://commons.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5">维基共享资源</a> 自由的多媒体资料库</li><li><img src="/2018/01/15/Wiki-Resources/47px-Wikidata-logo.svg.png" alt="维基数据"> <a href="https://www.wikidata.org/wiki/Wikidata:%E9%A6%96%E9%A1%B5">维基数据</a> 自由的知识库</li><li><img src="/2018/01/15/Wiki-Resources/37px-Wikiquote-logo.svg.png" alt="维基语录"> <a href="https://en.wikiquote.org/wiki/zh:%E9%A6%96%E9%A1%B5">维基语录</a> 语录大全</li><li><img src="/2018/01/15/Wiki-Resources/Wikimedia_Community_Logo.svg.png" alt="元维基"> <a href="https://meta.wikimedia.org/wiki/%E9%A6%96%E9%A1%B5">元维基</a> 协调各维基计划</li></ul>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/01/15/Wiki-Resources/</id>
    <link href="https://cedriclee85.github.io/2018/01/15/Wiki-Resources/"/>
    <published>2018-01-15T02:32:08.000Z</published>
    <summary>
      <![CDATA[<blockquote>
<p>直接访问：维基共享资源、维基语录、维基文库获取更多</p>
</blockquote>
<p>维基百科是维基媒体基金会旗下最为我们熟知的产品，然而…不过还有一些可以直接访问的项目，同样可以帮助到各位的方方面面。下面做个列表展示出来：</p>
<ul]]>
    </summary>
    <title>Wiki_Resources</title>
    <updated>2026-08-25T05:42:37.955Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="Mac" scheme="https://cedriclee85.github.io/tags/Mac/"/>
    <category term="tools" scheme="https://cedriclee85.github.io/tags/tools/"/>
    <content>
      <![CDATA[<p>首先你需要改装下Mac的Terminal，在终端里安装homebrew</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/usr/bin/ruby -e <span class="string">&quot;<span class="subst">$(curl -fsSL &lt;a href=<span class="string">&quot;https://raw.githubusercontent.com/Homebrew/install/master/install&quot;</span></span></span></span><br></pre></td></tr></table></figure><p>你可以方便快捷的通过类似于<code>brew install python3</code>的命令安装诸如MySQL、R亦或是一些你需要的包，其他的命令参见homebrew官网，你可以方便的升级或卸载各种各样的包</p><p>另外在这里推荐你 <code>brew install cask</code></p><p>比如说我们想安装纯洁的chrome浏览器 <code>brew cask install google-chrome</code>就好啦，而且下载速度很快，当然哪天用的不舒服了，uninstall就好</p><p>附上安装和卸载Yandex的图</p><p><img src="/2018/01/14/brew-cask-install-software/165839nk1c2bqgw4qqbcab.png" alt="Terminal-Install yandex"></p><p>安装完后 应用程序栏就会出现</p><p>然后卸载<code>brew cask uninstall yandex</code>，毕竟我的主力浏览器是Safari和Chrome，当然安卓端大力推荐Yandex<br><img src="/2018/01/14/brew-cask-install-software/170054cxxdqoz7ozo5xzc7.png" alt="Terminal-Uninstall yandex"></p><p>非常的方便快捷有没有<br>对了，记得 <code>brew cask cleanup</code>清理缓存及软链</p><p>另外<code>brew cask</code> 和 <code>brew</code>的区别在于 brew主要用来下载一些不带界面的命令行下的工具<br>brew cask主要用来下载一些图形化界面的应用软件，下载好后会自动安装，并能在mac中直接运行使用</p><hr><p>再安利一个小东西 <strong>you-get</strong><br>一个基于 Python 3 的下载工具。使用 You-Get 可以很轻松的下载到网络上的视频、图片及音乐，油管的也可以哦<br><img src="/2018/01/14/brew-cask-install-software/171135m4zaax6ardkp4aka.png" alt="Tool you-get"></p><p>详情请参见<a href="https://you-get.org/">you-get 主页</a></p><p>这里是一个youtube视频下载的实例<br><img src="/2018/01/14/brew-cask-install-software/246E39B3-6EF5-4066-AB16-ACDC94FC4948.png" alt="you-get-download video"></p><p>你可以通过Mac的terminal学习Linux的command line ，如果出现了command not found，这个时候你可以通过homebrew来安装那些缺失的包附上一个链接：<a href="https://billie66.github.io/TLCL/book/">Linux 命令行学习网站</a></p><p>值得一提的一些命令行</p><p>显示&#x2F;不显示 隐藏文件 <code>defaults write com.apple.finder AppleShowAllFiles TRUE/FAUSE</code></p><p>还有如果你把Mac玩坏了，可以参考一下这篇文章：制作正式版 <a href="http://www.jianshu.com/p/a1851d7deee8">macOS 10.12 Sierra 安装 U盘</a>，亲测有效</p><p>哦对了，Mac的终端需要美化，具体步骤可以参考：<a href="http://linfan.info/blog/2012/02/27/colorful-terminal-in-mac/">让Mac OS X的终端多姿多彩</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2018/01/14/brew-cask-install-software/</id>
    <link href="https://cedriclee85.github.io/2018/01/14/brew-cask-install-software/"/>
    <published>2018-01-14T01:56:44.000Z</published>
    <summary>用 brew 安装和管理 Mac 的软件✨</summary>
    <title>brew_cask_install_software</title>
    <updated>2026-08-25T05:42:37.956Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="ios" scheme="https://cedriclee85.github.io/tags/ios/"/>
    <category term="autoplay" scheme="https://cedriclee85.github.io/tags/autoplay/"/>
    <content>
      <![CDATA[<p>iPhone手机音频、视频无法自动播放？</p><p>通过下面的方式可以解决，在iPhone手机微信中正常自动播放。</p><p>必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效，猜测微信接口做了处理~</p><p>测试了90%的iPhone机型，大部分直接调用audio的play方法就可以自动播放了，但是一些奇葩iPhone机不可以。</p><p>另外，微信中不设置静音可以自动播放，但safari中不能。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">preload</span>=<span class="string">&quot;preload&quot;</span> <span class="attr">controls</span> <span class="attr">id</span>=<span class="string">&quot;car_audio&quot;</span> <span class="attr">src</span>=<span class="string">&quot;http://media.xitaoinfo.com/ei_zamenjiehunba.mp3&quot;</span> <span class="attr">loop</span>&gt;</span><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">id</span>=<span class="string">&quot;video&quot;</span> <span class="attr">controls</span> <span class="attr">preload</span>=<span class="string">&quot;auto&quot;</span> <span class="attr">mediagroup</span>=<span class="string">&quot;myVideoGroup&quot;</span> <span class="attr">poster</span>=<span class="string">&quot;http://media.w3.org/2010/05/sintel/poster.png&quot;</span> <span class="attr">muted</span> <span class="attr">autoplay</span> <span class="attr">playsinline</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">source</span> <span class="attr">id</span>=<span class="string">&quot;mp4&quot;</span> <span class="attr">src</span>=<span class="string">&quot;http://media.w3.org/2010/05/sintel/trailer.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">source</span> <span class="attr">id</span>=<span class="string">&quot;webm&quot;</span> <span class="attr">src</span>=<span class="string">&quot;http://media.w3.org/2010/05/sintel/trailer.webm&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/webm&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">source</span> <span class="attr">id</span>=<span class="string">&quot;ogv&quot;</span> <span class="attr">src</span>=<span class="string">&quot;http://media.w3.org/2010/05/sintel/trailer.ogv&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/ogg&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>Your user agent does not support the HTML5 Video element.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 必须加在微信api资源 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://res.wx.qq.com/open/js/jweixin-1.0.0.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">     <span class="comment">//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以</span></span></span><br><span class="line"><span class="language-javascript">     <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;car_audio&#x27;</span>).<span class="title function_">play</span>();</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;WeixinJSBridgeReady&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;car_audio&#x27;</span>).<span class="title function_">play</span>();</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;video&#x27;</span>).<span class="title function_">play</span>();</span></span><br><span class="line"><span class="language-javascript">    &#125;, <span class="literal">false</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>@Nokey 提问：最近又发现一个问题，Android不能同时播放两个音频? @李猜猜回答：因为ready只会触发一次，所以不能播放多个音频。但是如果需要播放多个音频，其实只要调用一下eixinJSBridge进行包裹即可。 示例代码如下</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">playAudio</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (setting.<span class="property">autoplay</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">WeixinJSBridge</span>) &#123;</span><br><span class="line">            <span class="title class_">WeixinJSBridge</span>.<span class="title function_">invoke</span>(<span class="string">&#x27;getNetworkType&#x27;</span>, &#123;&#125;, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">                audio.<span class="title function_">play</span>();</span><br><span class="line">            &#125;, <span class="literal">false</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;WeixinJSBridgeReady&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="title class_">WeixinJSBridge</span>.<span class="title function_">invoke</span>(<span class="string">&#x27;getNetworkType&#x27;</span>, &#123;&#125;, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">                    audio.<span class="title function_">play</span>();</span><br><span class="line">                &#125;);</span><br><span class="line">            &#125;, <span class="literal">false</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        audio.<span class="title function_">play</span>();</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        audio.<span class="title function_">pause</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>reference: <a href="">https://www.w3ctech.com/topic/1165</a></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/11/15/ios-autoplay-video/</id>
    <link href="https://cedriclee85.github.io/2017/11/15/ios-autoplay-video/"/>
    <published>2017-11-15T07:27:04.000Z</published>
    <summary>iPhone 中的音频、视频无法自动播放？⏯️本文旨在解决 iPhone 微信中音频/视频自动播放的问题▶️</summary>
    <title>iOS 微信 音频 视频自动播放</title>
    <updated>2026-08-25T05:42:37.959Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="javascript" scheme="https://cedriclee85.github.io/tags/javascript/"/>
    <content>
      <![CDATA[<h2 id="概览"><a href="#概览" class="headerlink" title="概览"></a>概览</h2><p>说起来 ECMAScript 中什么最有意思，我想莫过于函数了——而有意思的根源，则在于函数实际上是对象。</p><ul><li>函数是对象，函数名是指针；</li><li>每个函数都是 Function 的实例，而且都与其它引用类型一样具有属性和方法；</li><li>由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。</li></ul><h2 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">num1, num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用 Function 构造函数</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">function</span>(<span class="params">num1, num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p><strong>Function 构造函数可以接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数</strong>。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sum = <span class="keyword">new</span> <span class="title class_">Function</span>(<span class="string">&#x27;num1&#x27;</span>, <span class="string">&#x27;num2&#x27;</span>, <span class="string">&#x27;return num1 + num2&#x27;</span>); <span class="comment">// 不推荐</span></span><br></pre></td></tr></table></figure><p>我们不推荐使用这种方法定义函数，因为这种语法会导致解析两次代码（第一次解析常规 ECMAScript 代码，第二次是解析传入构造函数中的字符串），从而影响性能。不过，这种语法对于理解“<strong>函数是对象，函数名是指针</strong>”的概念倒是非常直观的。</p><h2 id="函数名是指针"><a href="#函数名是指针" class="headerlink" title="函数名是指针"></a>函数名是指针</h2><p>由于函数名仅仅是指向函数的指针，因此函数名与包含对象指针的其他变量没有什么不同。换句话说，<strong>一个函数可能会有多个名字</strong>，来看如下的例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sum = <span class="keyword">function</span>(<span class="params">sum1, sum2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> sum1 + sum2;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum</span>(<span class="number">10</span>, <span class="number">20</span>)); <span class="comment">// 30</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> anothersum = sum;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">anothersum</span>(<span class="number">10</span>, <span class="number">20</span>)); <span class="comment">// 30</span></span><br><span class="line"></span><br><span class="line">sum = <span class="literal">null</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">anothersum</span>(<span class="number">10</span>, <span class="number">20</span>)); <span class="comment">// 30</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：<strong>使用不带圆括号的函数是访问函数指针，而非调用函数。</strong></p></blockquote><p>在上面的例子中，anothersum 和 sum 都指向了同一个函数，因此 <code>anothersum()</code> 也可以被调用并返回结果。即使 sum 设置为 null，让它与函数“断绝关系”，但仍然可以正常调用 <code>anothersum()</code>。</p><h2 id="函数没有重载"><a href="#函数没有重载" class="headerlink" title="函数没有重载"></a>函数没有重载</h2><p>如果定义了两个同名的函数，则后一个函数会覆盖前一个函数。将函数名想象为指针，有助于理解为什么 ECMAScript 中没有函数重载的概念。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">addSomeNumber</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num + <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">addSomeNumber</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num + <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="title function_">addSomeNumber</span>(<span class="number">100</span>); <span class="comment">// 300</span></span><br></pre></td></tr></table></figure><p>再看下面这个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> addSomeNumber = <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num + <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">addSomeNumber = <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num + <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="title function_">addSomeNumber</span>(<span class="number">100</span>); <span class="comment">// 300</span></span><br></pre></td></tr></table></figure><p>通过观察从写之后的代码，很容易看清楚到底是怎么回事儿——在创建第二个函数时，实际上覆盖了引用第一个函数的变量 addSomeNumber。</p><h2 id="函数声明与函数表达式"><a href="#函数声明与函数表达式" class="headerlink" title="函数声明与函数表达式"></a>函数声明与函数表达式</h2><p>解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。</p><ul><li>解析器会率先读取函数声明（函数声明提升——function declaration hoisting），并使其在执行任何代码之前可用（可以访问）；</li><li>至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。</li></ul><p>来看两个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum</span>(<span class="number">10</span>,<span class="number">10</span>)); <span class="comment">// 20</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum</span>(<span class="number">10</span>,<span class="number">10</span>)); <span class="comment">// error (unexpected identifier)</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">function</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="作为值的函数"><a href="#作为值的函数" class="headerlink" title="作为值的函数"></a>作为值的函数</h2><p>因为 ECMAScript 中的函数名本身就是变量，所以函数也可以作为值来使用。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">callSomeFunction</span>(<span class="params">someFunction, someArgument</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">someFunction</span>(someArgument);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这个函数接收两个参数。第一个参数应该是一个函数，第二参数应该是要传递给该函数的一个值。然后，就可以像下面的例子一样传递函数了：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add10</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num + <span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result1 = <span class="title function_">callSomeFunction</span>(add10,<span class="number">10</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result1); <span class="comment">// 20</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getGreeting</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;Hello, &quot;</span> + name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result2 = <span class="title function_">callSomeFunction</span>(getGreeting, <span class="string">&#x27;Cedric&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// &quot;Hello, Cedric&quot;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：<code>callSomeFunction(someFunction, someArgument)</code>这里的第一个参数是要访问函数的指针而不执行函数，所以要去掉后面的那对圆括号。所以，这里传递的是 add10 和 getGreeting，而不是执行它们之后的结果。</p></blockquote><p>下面再看一个例子：从一个函数中返回另一个函数，根据某个对象属性对数组进行排序。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">createComparisonFunction</span>(<span class="params">propertyName</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params">object1,object2</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> value1 = object1[propertyName];</span><br><span class="line">        <span class="keyword">var</span> value2 = object2[propertyName];</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(value1 &lt; value2) &#123;</span><br><span class="line">            <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span>(value1 &gt; value2) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> data = [&#123;<span class="attr">name</span>:<span class="string">&#x27;Zachary&#x27;</span>,<span class="attr">age</span>:<span class="number">27</span>&#125;,&#123;<span class="attr">name</span>:<span class="string">&#x27;Cedric&#x27;</span>,<span class="attr">age</span>:<span class="number">32</span>&#125;];</span><br><span class="line"></span><br><span class="line">data.<span class="title function_">sort</span>(<span class="title function_">createComparisonFunction</span>(<span class="string">&#x27;name&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(data[<span class="number">0</span>].<span class="property">name</span>); <span class="comment">// &quot;Cedric&quot;</span></span><br><span class="line"></span><br><span class="line">data.<span class="title function_">sort</span>(<span class="title function_">createComparisonFunction</span>(<span class="string">&#x27;age&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(data[<span class="number">0</span>].<span class="property">name</span>); <span class="comment">// &quot;Zachary&quot;</span></span><br></pre></td></tr></table></figure><p>在默认情况下，<code>sort()</code> 方法会调用每个对象的 <code>toString()</code> 方法以确定它们的次序；但得到的结果往往并不符合人类的思维习惯。因此，我们调用 <code>createComparisonFunction(&#39;name&#39;)</code> 方法创建了一个比较函数，以遍按照每个对象的 name 属性值进行排序。</p><h2 id="函数内部属性"><a href="#函数内部属性" class="headerlink" title="函数内部属性"></a>函数内部属性</h2><ul><li><code>arguments</code></li><li><code>this</code></li></ul><h3 id="arguments"><a href="#arguments" class="headerlink" title="arguments"></a>arguments</h3><p>虽然 arguments 主要用途是保存函数参数，但这个对象还有一个名叫 <code>callee</code> 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。来看一个非常经典的阶乘函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">factorial</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span>(num &lt;= <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> num * <span class="title function_">factorial</span>(num - <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在函数名不会变的情况下这样定义没有问题；但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起，为了消除这种耦合现象，可以像下面这样使用 <code>arguments.callee</code>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">factorial</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span>(num &lt;= <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> num * <span class="variable language_">arguments</span>.<span class="title function_">callee</span>(num - <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> trueFactorial = factorial;</span><br><span class="line"></span><br><span class="line">factorial = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">trueFactorial</span>(<span class="number">5</span>)); <span class="comment">// 120</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">factorial</span>(<span class="number">5</span>)); <span class="comment">// 0</span></span><br></pre></td></tr></table></figure><h3 id="this"><a href="#this" class="headerlink" title="this"></a>this</h3><p><code>this</code> 引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是 window）。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> o = &#123;<span class="attr">color</span>:<span class="string">&#x27;blue&#x27;</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayColor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">color</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">sayColor</span>(); <span class="comment">// &quot;red&quot;</span></span><br><span class="line"></span><br><span class="line">o.<span class="property">sayColor</span> = sayColor;</span><br><span class="line">o.<span class="title function_">sayColor</span>(); <span class="comment">// &quot;blue&quot;</span></span><br></pre></td></tr></table></figure><blockquote><p>一定要牢记，函数的名字仅仅是一个包含指针的变量而已。因此，即使是在不同的环境中执行，全局的 sayColor() 函数与 o.sayColor() 指向的仍然是同一个函数。</p></blockquote><h2 id="函数属性和方法"><a href="#函数属性和方法" class="headerlink" title="函数属性和方法"></a>函数属性和方法</h2><p>ECMAScript 中的函数是对象，因此函数也有属性和方法。</p><h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><p>每个函数都包含两个属性：</p><ul><li><code>length</code> 表示函数希望接收的命名参数的个数</li><li><code>prototype</code> 对于 ECMAScript 中的引用类型而言，prototype 是保存它们所有实例方法的真正所在。换句话说，诸如 <code>toString()</code> 和 <code>toValue()</code> 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。</li></ul><h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><p>每个函数都包含两个非继承而来的方法：</p><ul><li><code>apply()</code></li><li><code>call()</code></li></ul><p>这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。</p><p><code>apply()</code> 方法接收两个参数：一个是在函数中运行的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是 arguments 对象。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">callSum1</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> sum.<span class="title function_">apply</span>(<span class="variable language_">this</span>,<span class="variable language_">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">callSum2</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> sum.<span class="title function_">apply</span>(<span class="variable language_">this</span>,[num1,num2]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">callSum1</span>(<span class="number">10</span>,<span class="number">20</span>)); <span class="comment">// 30</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">callSum2</span>(<span class="number">10</span>,<span class="number">20</span>)); <span class="comment">// 30</span></span><br></pre></td></tr></table></figure><p><code>call()</code> 方法与 <code>apply()</code> 方法的作用相同，它们的区别仅在于接收参数的方式不同。<code>call()</code> 方法的第一个参数同样是 this；变化的是其余参数都直接传递给函数（参数必须逐个列举出来）。看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">callSum</span>(<span class="params">num1,num2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> sum.<span class="title function_">call</span>(<span class="variable language_">this</span>,num1,num2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">callSum</span>(<span class="number">10</span>,<span class="number">20</span>)); <span class="comment">// 30</span></span><br></pre></td></tr></table></figure><p>事实上，传递参数并非 <code>apply()</code> 和 <code>call()</code> 真正的用武之地；它们真正强大的地方是能够扩充函数赖以运行的作用域。来看一个例子：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> o = &#123;<span class="attr">color</span>:<span class="string">&#x27;blue&#x27;</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayColor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">color</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">sayColor</span>(); <span class="comment">// &quot;red&quot;</span></span><br><span class="line"></span><br><span class="line">sayColor.<span class="title function_">call</span>(<span class="variable language_">this</span>); <span class="comment">// &quot;red&quot;</span></span><br><span class="line">sayColor.<span class="title function_">call</span>(<span class="variable language_">window</span>); <span class="comment">// &quot;red&quot;</span></span><br><span class="line">sayColor.<span class="title function_">call</span>(o); <span class="comment">// &quot;blue&quot;</span></span><br></pre></td></tr></table></figure><p>当运行 <code>sayColor.call(o)</code> 时，函数的执行环境就不一样了，因为此时函数体内的 this 对象指向了 o，于是结果显示的是 “blue”。</p><p>使用 <code>call()</code>(或 <code>apply()</code>)来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。</p><ul><li><code>bind()</code> ECMAScript 5 定义的一个方法。这个方法会创建一个函数的实例，其 this 值会被绑定到传给 <code>bind()</code> 函数的值。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> o = &#123;<span class="attr">color</span>:<span class="string">&#x27;blue&#x27;</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayColor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">color</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> objectSayColor = sayColor.<span class="title function_">bind</span>(o);</span><br><span class="line"><span class="title function_">objectSayColor</span>(); <span class="comment">// &quot;blue&quot;</span></span><br></pre></td></tr></table></figure><ul><li><code>toLocaleString()</code></li><li><code>toString()</code></li><li><code>valueOf()</code></li></ul><p>这三个方法始终都返回函数的代码，但不同浏览器返回的格式可能不同；因此我们无法根据它们返回的结果来实现任何重要的功能；不过这些返回的信息在调试代码时倒是很有用。</p>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/10/06/js-function/</id>
    <link href="https://cedriclee85.github.io/2017/10/06/js-function/"/>
    <published>2017-10-06T00:42:46.000Z</published>
    <summary>
      <![CDATA[💬聊一聊 javascript 中的 <code>function</code> ...💬]]>
    </summary>
    <title>js-function</title>
    <updated>2026-08-25T05:42:37.959Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="javascript" scheme="https://cedriclee85.github.io/tags/javascript/"/>
    <category term="RegExp" scheme="https://cedriclee85.github.io/tags/RegExp/"/>
    <content>
      <![CDATA[<h2 id="创建正则"><a href="#创建正则" class="headerlink" title="创建正则"></a>创建正则</h2><h3 id="字面量形式"><a href="#字面量形式" class="headerlink" title="字面量形式"></a>字面量形式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> expression = <span class="regexp">/pattern/</span>flags;</span><br></pre></td></tr></table></figure><ul><li><code>pattern</code>: 可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向应用；</li><li><code>flags</code>:<ul><li><code>g</code> 全局模式(global)，即应用于所有字符串，而非发现第一个匹配项时立即停止；</li><li><code>i</code> 不区分大小写(case-insensitive)模式；</li><li><code>m</code> 多行(multiline)模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。</li></ul></li></ul><p>模式(pattern)中使用的<strong>元字符</strong>都必须转义。正则中的元字符包括：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">( [ &#123; \ ^ $ | ) ? * + .]&#125;</span><br></pre></td></tr></table></figure><h3 id="RegExp-构造函数"><a href="#RegExp-构造函数" class="headerlink" title="RegExp 构造函数"></a>RegExp 构造函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> expression = <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">&#x27;pattern&#x27;</span>, <span class="string">&#x27;flags&#x27;</span>);</span><br></pre></td></tr></table></figure><blockquote><p>注意：传递给 RegExp 构造函数的两个参数都是字符串，所以在某些情况下需要对字符进行双重转义。所有元字符都必须双重转义（例如<code>\n</code>，字符 <code>\</code> 在字符串中通常被转义为 <code>\\</code>，而在正则表达式字符串中就会变成 <code>\\\\</code>。）</p></blockquote><h2 id="RegExp-实例属性"><a href="#RegExp-实例属性" class="headerlink" title="RegExp 实例属性"></a>RegExp 实例属性</h2><ul><li><code>global</code> ：布尔值，表示是否设置了 <code>g</code> 标志；</li><li><code>ignoreCase</code> ：布尔值，表示是否设置了 <code>i</code> 标志；</li><li><code>lastIndex</code> ：整数，表示开始搜索下一个匹配项的字符位置，从 0 算起；</li><li><code>multiline</code> ：布尔值，表示是否设置了 <code>m</code> 标志；</li><li><code>source</code> ：正则的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> pattern1 = <span class="regexp">/\[bc\]at/i</span>;</span><br><span class="line"></span><br><span class="line"><span class="title function_">alert</span>(pattern1.<span class="property">global</span>);  <span class="comment">//false</span></span><br><span class="line"><span class="title function_">alert</span>(pattern1.<span class="property">ignoreCase</span>);  <span class="comment">//true</span></span><br><span class="line"><span class="title function_">alert</span>(pattern1.<span class="property">multiline</span>);  <span class="comment">//false</span></span><br><span class="line"><span class="title function_">alert</span>(pattern1.<span class="property">lastIndex</span>);  <span class="comment">//0</span></span><br><span class="line"><span class="title function_">alert</span>(pattern1.<span class="property">source</span>);  <span class="comment">//&quot;\[bc\]at&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> pattern2 = <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">&quot;\\[bc\\]at&quot;</span>, <span class="string">&quot;i&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="title function_">alert</span>(pattern2.<span class="property">global</span>);  <span class="comment">//false</span></span><br><span class="line"><span class="title function_">alert</span>(pattern2.<span class="property">ignoreCase</span>);  <span class="comment">//true</span></span><br><span class="line"><span class="title function_">alert</span>(pattern2.<span class="property">multiline</span>);  <span class="comment">//false</span></span><br><span class="line"><span class="title function_">alert</span>(pattern2.<span class="property">lastIndex</span>);  <span class="comment">//0</span></span><br><span class="line"><span class="title function_">alert</span>(pattern2.<span class="property">source</span>); <span class="comment">//&quot;\[bc\]at&quot;</span></span><br></pre></td></tr></table></figure><h2 id="RegExp-实例方法"><a href="#RegExp-实例方法" class="headerlink" title="RegExp 实例方法"></a>RegExp 实例方法</h2><h3 id="1-exec"><a href="#1-exec" class="headerlink" title="1. exec()"></a>1. exec()</h3><p><code>exec()</code> 方法用于捕获组，它接收一个参数，即要应用模式的字符串，然后返回包含第一个匹配项的数组；或在没有匹配项的情况下返回 null。</p><p>它返回的数组包含两个额外的属性：<code>index</code> 和 <code>input</code>。</p><ul><li><code>index</code> 表示匹配项在字符串中的位置；</li><li><code>input</code> 表示应用正则表达式的字符串。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> text = <span class="string">&quot;mom and dad and baby&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> pattern = <span class="regexp">/mom( and dad( and baby)?)?/gi</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> matches = pattern.<span class="title function_">exec</span>(text);</span><br><span class="line"><span class="title function_">alert</span>(matches.<span class="property">index</span>); <span class="comment">// 0</span></span><br><span class="line"><span class="title function_">alert</span>(matches.<span class="property">input</span>); <span class="comment">// &quot;mom and dad and baby&quot;</span></span><br><span class="line"><span class="title function_">alert</span>(matches[<span class="number">0</span>]); <span class="comment">// &quot;mom and dad and baby&quot;</span></span><br><span class="line"><span class="title function_">alert</span>(matches[<span class="number">1</span>]); <span class="comment">// &quot; and dad and baby&quot;</span></span><br><span class="line"><span class="title function_">alert</span>(matches[<span class="number">2</span>]); <span class="comment">// &quot; and baby&quot;</span></span><br></pre></td></tr></table></figure><h3 id="2-test"><a href="#2-test" class="headerlink" title="2. test()"></a>2. test()</h3><p><code>test()</code> 接收一个字符串参数。在模式与该参数匹配的情况下返回 true；否则，返回 false。</p><p>在只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容的情况下，使用这个方法非常方便。因此，<code>test()</code> 方法经常被用在 if 语句中。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> text = <span class="string">&quot;000-00-0000&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> pattern = <span class="regexp">/\d&#123;3&#125;-\d&#123;2&#125;-\d&#123;4&#125;/</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (pattern.<span class="title function_">test</span>(text))&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;The pattern was matched.&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>RegExp 实例继承的 <code>toLocaleString()</code> 和 <code>toString()</code> 方法都返回正则表达式的字面量，与创建正则的方式无关。而 <code>valueOf()</code> 方法返回正则表达式本身。</p><h2 id="RegExp-构造函数属性"><a href="#RegExp-构造函数属性" class="headerlink" title="RegExp 构造函数属性"></a>RegExp 构造函数属性</h2><table><thead><tr><th>长属性名</th><th>短属性名</th><th>说明</th></tr></thead><tbody><tr><td><code>input</code></td><td><code>$_</code></td><td>最近一次要匹配的字符串。Opera未实现此属性</td></tr><tr><td><code>lastMatch</code></td><td><code>$&amp;</code></td><td>最近一次的匹配项。Opera未实现此属性</td></tr><tr><td><code>lastParen</code></td><td><code>$+</code></td><td>最后一次匹配的捕获组。Opera未实现此属性</td></tr><tr><td><code>leftContext</code></td><td><code>$`</code></td><td>input 字符串中 lastMatch 之前的文本</td></tr><tr><td><code>multiline</code></td><td><code>$*</code></td><td>布尔值，表示是否所有表达式都使用多行模式。IE和Opera未实现此属性</td></tr><tr><td><code>rightContext</code></td><td><code>$&#39;</code></td><td>input 字符串中 lastMatch 之后的文本</td></tr></tbody></table><p>除了上面这几个属性外，还有9个用于存储捕获组的构造函数属性。访问这些属性的语法是：<code>RegExp.$1</code>、<code>RegExp.$2</code>…<code>RegExp.$3</code>，分别用于存储第一、第二…第九个匹配的捕获组。在调用 <code>exec()</code> 或 <code>test()</code> 方法时，这些属性会被自动填充。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> text = <span class="string">&quot;this has been a short summer&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> pattern = <span class="regexp">/(..)or(.)/g</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (pattern.<span class="title function_">test</span>(text))&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="title class_">RegExp</span>.<span class="property">$1</span>); <span class="comment">// sh</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="title class_">RegExp</span>.<span class="property">$2</span>); <span class="comment">// t</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/10/05/js-RegExp/</id>
    <link href="https://cedriclee85.github.io/2017/10/05/js-RegExp/"/>
    <published>2017-10-05T05:56:18.000Z</published>
    <summary>
      <![CDATA[💬聊一聊 javascript 中的<b>正则</b> ...💬]]>
    </summary>
    <title>js-RegExp</title>
    <updated>2026-08-25T05:42:37.959Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="css" scheme="https://cedriclee85.github.io/tags/css/"/>
    <content>
      <![CDATA[<blockquote><p>今天在 W3C 查阅 <a href="https://www.w3.org/TR/css3-background/#the-background">background 标准</a>时偶然发现这个属性。</p></blockquote><h2 id="counters-兼容性"><a href="#counters-兼容性" class="headerlink" title="counters 兼容性"></a>counters 兼容性</h2><p>为什么要首先谈它的兼容性？因为这个属性<strong>可以被所有浏览器支持</strong>（<del>IE6&#x2F;7</del> 除外），是不是有了看下去的欲望^o^</p><h2 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h2><p><strong>CSS counters</strong> 基于在文档中的位置来改变其显示的内容。比如，可以用它对网页中的标题自动计数。</p><p><strong>CSS计数器</strong>本质上是由 CSS 在维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。</p><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><p>首先，必须用 <code>counter-reset</code>为计数器设置一个初始值(默认为 0)；<br>可以在之后赋予 <code>counter-reset</code> 一个特定的数值来改变计数器的值。<br>之后，就可以通过 <code>counter-increment</code> 对计数器的值进行递增或递减。<br><code>counter</code> 的 <em>name</em> 属性不能是 none、inherit、initial，否则，这条申明将被忽略。</p><h2 id="显示-counter"><a href="#显示-counter" class="headerlink" title="显示 counter"></a>显示 counter</h2><p><code>counter</code> 的值可以通过赋给 <code>content</code> 属性 <code>counter()</code> 或 <code>counters()</code> 函数来显示。</p><ul><li><code>counter()</code> 函数有两种形式：</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">counter(name)</span><br><span class="line">counter(name, style)</span><br></pre></td></tr></table></figure><p>生成的文本是对给定的伪元素在给定的 <em>name</em> 范围内最里层级的计数的值，通过设定的 <em>style</em> 值对其格式化 （默认为<code>decimal</code> - 10进制）。</p><ul><li><code>counters()</code> 函数同样有两种形式</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">counters(name, string)</span><br><span class="line">counters(name, string, style)</span><br></pre></td></tr></table></figure><p>生成的文本是对给定的伪元素在给定的 <em>name</em> 范围内所有计数器的值，从最外层级到最里层级通过设定的 <em>string</em> 字符分隔，通过设定的 <em>style</em> 值对其格式化 （默认为<code>decimal</code> - 10进制）。</p><h2 id="基本用法举例"><a href="#基本用法举例" class="headerlink" title="基本用法举例"></a>基本用法举例</h2><p>本例子将在每个标题的前面添加 <em>Section [计数器的值]</em></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">counter-reset</span>: section;  <span class="comment">/*设置名为 section 的计数器，初始值为0*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h3</span><span class="selector-pseudo">::before</span>r &#123;</span><br><span class="line">    <span class="attribute">counter-increment</span>:section; <span class="comment">/*将 section 的计数器增加1*/</span></span><br><span class="line">    <span class="attribute">content</span>:<span class="built_in">counter</span>(section);  <span class="comment">/*显示 section 计数器的值*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>Introduction<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>Body<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>Conclusion<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br></pre></td></tr></table></figure><p>前台显示结果:</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1Introduction</span><br><span class="line">2Body</span><br><span class="line">3Conclusion</span><br></pre></td></tr></table></figure><h2 id="嵌套用法举例"><a href="#嵌套用法举例" class="headerlink" title="嵌套用法举例"></a>嵌套用法举例</h2><p>css 计数器在有序列表中尤其有用，因为它会自动在子元素上创建计数器。使用 <code>counters()</code> 函数，分隔符会自动插入不同层级的嵌套计数中。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ol</span> &#123;</span><br><span class="line">    <span class="attribute">counter-reset</span>: section;</span><br><span class="line">    <span class="attribute">list-style-type</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">    <span class="attribute">counter-increment</span>: section;</span><br><span class="line">    <span class="attribute">content</span>:<span class="built_in">counters</span>(section, <span class="string">&#x27;.&#x27;</span>) <span class="string">&#x27; &#x27;</span>;  <span class="comment">/*用 . 做分隔符*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>          <span class="comment">&lt;!-- 1     --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item               <span class="comment">&lt;!-- 2     --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>      <span class="comment">&lt;!-- 2.1   --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>      <span class="comment">&lt;!-- 2.2   --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>item           <span class="comment">&lt;!-- 2.3   --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>  <span class="comment">&lt;!-- 2.3.1 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>  <span class="comment">&lt;!-- 2.3.2 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>  <span class="comment">&lt;!-- 2.3.1 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>  <span class="comment">&lt;!-- 2.3.2 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>  <span class="comment">&lt;!-- 2.3.3 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>      <span class="comment">&lt;!-- 2.4   --&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>          <span class="comment">&lt;!-- 3     --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>          <span class="comment">&lt;!-- 4     --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>          <span class="comment">&lt;!-- 1     --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>item<span class="tag">&lt;/<span class="name">li</span>&gt;</span>          <span class="comment">&lt;!-- 2     --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure><p>前台显示结果:</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">1 item</span><br><span class="line">2 item</span><br><span class="line">    2.1 item</span><br><span class="line">    2.2 item</span><br><span class="line">    2.3 item</span><br><span class="line">        2.3.1 item</span><br><span class="line">        2.3.2 item</span><br><span class="line">        2.3.1 item</span><br><span class="line">        2.3.2 item</span><br><span class="line">        2.3.3 item</span><br><span class="line">    2.4 item</span><br><span class="line">3 item</span><br><span class="line">4 item</span><br><span class="line">1 item</span><br><span class="line">2 item</span><br></pre></td></tr></table></figure><blockquote><p>注意在 <strong>2.3 下的两个 ol 列表</strong>及其前台显示结果（<em>2.3.1</em> 和 <em>2.3.2</em>）</p></blockquote>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/09/11/css-counters/</id>
    <link href="https://cedriclee85.github.io/2017/09/11/css-counters/"/>
    <published>2017-09-11T07:41:20.000Z</published>
    <summary>
      <![CDATA[💬聊一聊 css 中的<code>counters</code> ...💬]]>
    </summary>
    <title>Using css counters</title>
    <updated>2026-08-25T05:42:37.957Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="xml" scheme="https://cedriclee85.github.io/tags/xml/"/>
    <content>
      <![CDATA[<h2 id="XMLHttpRequest-对象"><a href="#XMLHttpRequest-对象" class="headerlink" title="XMLHttpRequest 对象"></a>XMLHttpRequest 对象</h2><p>XMLHttpRequest 对象用于在后台与服务器交换数据。<br>它是开发者的梦想，因为它可以做以下事情：</p><ul><li>在不重新加载页面的情况下更新网页</li><li>在页面已加载后从服务器请求数据</li><li>在页面已加载后从服务器接收数据</li><li>在后台向服务器发送数据</li></ul><h2 id="创建-XMLHttpRequest-对象"><a href="#创建-XMLHttpRequest-对象" class="headerlink" title="创建 XMLHttpRequest 对象"></a>创建 XMLHttpRequest 对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">xmlhttp = <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&quot;Microsoft.XMLHTTP&quot;</span>); <span class="comment">//老版本IE（IE5 和 IE6）使用 ActiveX 对象</span></span><br></pre></td></tr></table></figure><p><strong>下面的代码片段把 xml 文档解析到 xml DOM 对象中</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">xmlHttpRequest</span>(<span class="params">url</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> xmlhttp = <span class="literal">null</span>;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        xmlhttp = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">            xmlhttp = <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&#x27;Microsoft.XMLHTTP&#x27;</span>);</span><br><span class="line">        &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&#x27;Your browser does not support XMLHTTP!&#x27;</span>);</span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> xmlDoc;</span><br><span class="line"></span><br><span class="line">    xmlhttp.<span class="property">onreadystatechange</span> = state_Change;</span><br><span class="line">    xmlhttp.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, url, <span class="literal">true</span>);</span><br><span class="line">    xmlhttp.<span class="title function_">send</span>(<span class="literal">null</span>);</span><br><span class="line">    xmlDoc = xmlhttp.<span class="property">responseXML</span>;</span><br><span class="line">    <span class="keyword">return</span> xmlDoc;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">state_Change</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (xmlhttp.<span class="property">readyState</span>==<span class="number">4</span>) &#123;<span class="comment">// 4 = &quot;loaded&quot;</span></span><br><span class="line">        <span class="keyword">if</span> (xmlhttp.<span class="property">status</span>==<span class="number">200</span>) &#123;<span class="comment">// 200 = OK</span></span><br><span class="line">            <span class="comment">// ...our code here...</span></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&quot;Problem retrieving XML data&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>注释：<code>onreadystatechange</code> 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 <code>XMLHttpRequest</code> 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。</p></blockquote><h2 id="解析-xml-文档"><a href="#解析-xml-文档" class="headerlink" title="解析 xml 文档"></a>解析 xml 文档</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xmlhttp = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">if</span>(<span class="variable language_">window</span>.<span class="property">XMLHttpRequest</span>) &#123;</span><br><span class="line">    xmlhttp = <span class="keyword">new</span> <span class="title function_">xmlHttpRequest</span>();</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    xmlhttp = <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&#x27;Microsoft.XMLHTTP&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">xmlhttp.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>,<span class="string">&#x27;book.xml&#x27;</span>,<span class="literal">false</span>);</span><br><span class="line">xmlhttp.<span class="title function_">send</span>(<span class="literal">null</span>);</span><br><span class="line">xmlDoc = xmlhttp.<span class="property">responseXML</span>;</span><br></pre></td></tr></table></figure><p><strong>其它方法：</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 微软的 XML 解析，内建于IE5+</span></span><br><span class="line"><span class="keyword">var</span> xmlDoc=<span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&quot;Microsoft.XMLDOM&quot;</span>); <span class="comment">//创建一个空的 XML 文档对象</span></span><br><span class="line">xmlDoc.<span class="property">async</span>=<span class="string">&quot;false&quot;</span>; <span class="comment">//关闭异步加载，确保在文档完全加载之前解析器不会继续脚本的执行。</span></span><br><span class="line">xmlDoc.<span class="title function_">load</span>(<span class="string">&quot;note.xml&quot;</span>); <span class="comment">//加载名为 &quot;note.xml&quot; 的 XML 文档</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 Firefox 及其他浏览器中的 XML 解析器</span></span><br><span class="line"><span class="keyword">var</span> xmlDoc=<span class="variable language_">document</span>.<span class="property">implementation</span>.<span class="title function_">createDocument</span>(<span class="string">&quot;&quot;</span>,<span class="string">&quot;&quot;</span>,<span class="literal">null</span>);</span><br><span class="line">xmlDoc.<span class="property">async</span>=<span class="string">&quot;false&quot;</span>;</span><br><span class="line">xmlDoc.<span class="title function_">load</span>(<span class="string">&quot;note.xml&quot;</span>);</span><br></pre></td></tr></table></figure><h2 id="解析-XML-字符串"><a href="#解析-XML-字符串" class="headerlink" title="解析 XML 字符串"></a>解析 XML 字符串</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">txt=<span class="string">&quot;&lt;bookstore&gt;&lt;book&gt;&quot;</span>;</span><br><span class="line">txt=txt+<span class="string">&quot;&lt;title&gt;Everyday Italian&lt;/title&gt;&quot;</span>;</span><br><span class="line">txt=txt+<span class="string">&quot;&lt;author&gt;Giada De Laurentiis&lt;/author&gt;&quot;</span>;</span><br><span class="line">txt=txt+<span class="string">&quot;&lt;year&gt;2005&lt;/year&gt;&quot;</span>;</span><br><span class="line">txt=txt+<span class="string">&quot;&lt;/book&gt;&lt;/bookstore&gt;&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">DOMParser</span>) &#123;</span><br><span class="line">    parser=<span class="keyword">new</span> <span class="title class_">DOMParser</span>();</span><br><span class="line">    xmlDoc=parser.<span class="title function_">parseFromString</span>(txt,<span class="string">&quot;text/xml&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123; <span class="comment">//IE</span></span><br><span class="line">    xmlDoc=<span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&quot;Microsoft.XMLDOM&quot;</span>);</span><br><span class="line">    xmlDoc.<span class="property">async</span>=<span class="string">&quot;false&quot;</span>;</span><br><span class="line">    xmlDoc.<span class="title function_">loadXML</span>(txt);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>注：IE 使用 <code>loadXML()</code> 方法来解析 XML 字符串，而其他浏览器使用 <code>DOMParser</code> 对象。<br>注：<code>loadXML()</code> 方法用于加载字符串（文本），<code>load()</code> 用于加载文件。</p></blockquote><h2 id="xml-DOM"><a href="#xml-DOM" class="headerlink" title="xml DOM"></a>xml DOM</h2><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- xml 文档：cd_catalog.xml --&gt;</span></span><br><span class="line"><span class="meta">&lt;?xml version=<span class="string">&quot;1.0&quot;</span> encoding=<span class="string">&quot;ISO-8859-1&quot;</span>?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">CATALOG</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">CD</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">TITLE</span>&gt;</span>Empire Burlesque<span class="tag">&lt;/<span class="name">TITLE</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ARTIST</span>&gt;</span>Bob Dylan<span class="tag">&lt;/<span class="name">ARTIST</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">COUNTRY</span>&gt;</span>USA<span class="tag">&lt;/<span class="name">COUNTRY</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">COMPANY</span>&gt;</span>Columbia<span class="tag">&lt;/<span class="name">COMPANY</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">PRICE</span>&gt;</span>10.90<span class="tag">&lt;/<span class="name">PRICE</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">YEAR</span>&gt;</span>1985<span class="tag">&lt;/<span class="name">YEAR</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">CD</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">CATALOG</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>CD List<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;showCD&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//加载 xml 文档</span></span><br><span class="line"><span class="keyword">var</span> xmlhttp,xmlDoc;</span><br><span class="line"><span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">XMLHttpRequest</span>) &#123;<span class="comment">// code for IE7+, Firefox, Chrome, Opera, Safari</span></span><br><span class="line">    xmlhttp=<span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;<span class="comment">// code for IE6, IE5</span></span><br><span class="line">    xmlhttp=<span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">&quot;Microsoft.XMLHTTP&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">xmlhttp.<span class="title function_">open</span>(<span class="string">&quot;GET&quot;</span>,<span class="string">&quot;cd_catalog.xml&quot;</span>,<span class="literal">false</span>);</span><br><span class="line">xmlhttp.<span class="title function_">send</span>();</span><br><span class="line">xmlDoc=xmlhttp.<span class="property">responseXML</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//在 HTML 元素中显示 XML 数据</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">displayCD</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> cds=xmlDoc.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;CD&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> cd_shelves = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;showCD&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> cd_list = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line">    cd_list.<span class="title function_">setAttribute</span>(<span class="string">&#x27;class&#x27;</span>,<span class="string">&#x27;cd_list&#x27;</span>);</span><br><span class="line">    cd_shelves.<span class="title function_">appendChild</span>(cd_list);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> title,artist,price,cd_item,txt;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>,lens = cds.<span class="property">length</span>; i&lt;lens; i++) &#123;</span><br><span class="line">        cd_item = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">//获取 xml DOM 内容</span></span><br><span class="line">        title=(cds[i].<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;TITLE&quot;</span>)[<span class="number">0</span>].<span class="property">childNodes</span>[<span class="number">0</span>].<span class="property">nodeValue</span>);</span><br><span class="line">        artist=(cds[i].<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;ARTIST&quot;</span>)[<span class="number">0</span>].<span class="property">childNodes</span>[<span class="number">0</span>].<span class="property">nodeValue</span>);</span><br><span class="line">        price=(cds[i].<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;PRICE&quot;</span>)[<span class="number">0</span>].<span class="property">childNodes</span>[<span class="number">0</span>].<span class="property">nodeValue</span>);</span><br><span class="line">        txt=<span class="string">&#x27;&lt;span class=&quot;title&quot;&gt;&#x27;</span> + title +</span><br><span class="line">            <span class="string">&#x27;&lt;/span&gt;&lt;span class=&quot;artist&quot;&gt;&#x27;</span> + artist +</span><br><span class="line">            <span class="string">&#x27;&lt;/span&gt;&lt;span class=&quot;price&quot;&gt;&#x27;</span>+ price + <span class="string">&#x27;&lt;/span&gt;&#x27;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//将 xml DOM 内容添加到 HTML 文档</span></span><br><span class="line">        cd_item.<span class="property">innerHTML</span> = txt;</span><br><span class="line">        cd_list.<span class="title function_">appendChild</span>(cd_item);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*CD List*/</span></span><br><span class="line"><span class="selector-class">.cd_list</span>&#123;<span class="attribute">margin</span>:<span class="number">0</span> <span class="number">3.2%</span>;&#125;</span><br><span class="line"><span class="selector-class">.cd_list</span> <span class="selector-tag">li</span>&#123;<span class="attribute">position</span>:relative;<span class="attribute">margin-top</span>:<span class="number">5px</span>; <span class="attribute">overflow</span>:hidden;&#125;</span><br><span class="line"><span class="selector-class">.cd_list</span> <span class="selector-tag">span</span>&#123;<span class="attribute">float</span><span class="selector-pseudo">:left</span>;<span class="attribute">padding</span>:<span class="number">10px</span> <span class="number">2%</span> <span class="number">1000px</span>;<span class="attribute">margin-bottom</span>:-<span class="number">990px</span>;&#125;</span><br><span class="line"><span class="selector-class">.cd_list</span> <span class="selector-class">.title</span>&#123;<span class="attribute">width</span>:<span class="number">36%</span>;<span class="attribute">background-color</span>:<span class="number">#f0f8ff</span>&#125;</span><br><span class="line"><span class="selector-class">.cd_list</span> <span class="selector-class">.artist</span>&#123;<span class="attribute">width</span>:<span class="number">31%</span>;<span class="attribute">background-color</span>:<span class="number">#fff0f8</span>;<span class="attribute">font-style</span>:italic;&#125;</span><br><span class="line"><span class="selector-class">.cd_list</span> <span class="selector-class">.year</span>&#123;<span class="attribute">width</span>:<span class="number">21%</span>;<span class="attribute">background-color</span>:<span class="number">#f0f1ff</span>;<span class="attribute">text-align</span>:center&#125;</span><br></pre></td></tr></table></figure><p><strong>Result:</strong><br><img src="/2017/08/29/XML-study-entry-2/1767C1AB-4580-46BF-B912-9FA31A30B592.png" alt="XML DATA"></p>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/08/29/XML-study-entry-2/</id>
    <link href="https://cedriclee85.github.io/2017/08/29/XML-study-entry-2/"/>
    <published>2017-08-29T02:25:54.000Z</published>
    <summary>
      <![CDATA[XML 用作数据存储媒介。本文讲解通过 Javascript 的 <code>XMLHttpRequest</code> 方法与服务器交换 xml 数据，解析 xml 文档；将 xml 文档转换为 DOM 🫱🫲👌]]>
    </summary>
    <title>XML Entry-2</title>
    <updated>2026-08-25T05:42:37.956Z</updated>
  </entry>
  <entry>
    <author>
      <name>Cedric</name>
    </author>
    <category term="xml" scheme="https://cedriclee85.github.io/tags/xml/"/>
    <content>
      <![CDATA[<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=<span class="string">&quot;1.0&quot;</span> encoding=<span class="string">&quot;ISO-8859-1&quot;</span>?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">bookstore</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">book</span> <span class="attr">category</span>=<span class="string">&quot;COOKING&quot;</span> <span class="attr">id</span>=<span class="string">&quot;501&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span>Every Italian<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">author</span>&gt;</span>Giada De Laurentiis<span class="tag">&lt;/<span class="name">author</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">date</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">year</span>&gt;</span>2005<span class="tag">&lt;/<span class="name">year</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">month</span>&gt;</span>05<span class="tag">&lt;/<span class="name">month</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">day</span>&gt;</span>23<span class="tag">&lt;/<span class="name">day</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">date</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">price</span>&gt;</span>30.00<span class="tag">&lt;/<span class="name">price</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">book</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">book</span> <span class="attr">category</span>=<span class="string">&quot;CHILDREN&quot;</span> <span class="attr">id</span>=<span class="string">&quot;502&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span>Harry Potter<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">author</span>&gt;</span>J K. Rowling<span class="tag">&lt;/<span class="name">author</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">date</span>&gt;</span>2005/10/01<span class="tag">&lt;/<span class="name">date</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">price</span>&gt;</span>29.99<span class="tag">&lt;/<span class="name">price</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">book</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">book</span> <span class="attr">category</span>=<span class="string">&quot;WEB&quot;</span> <span class="attr">id</span>=<span class="string">&quot;503&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span>Learning XML<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">author</span>&gt;</span>Erik T. Ray<span class="tag">&lt;/<span class="name">author</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">year</span>&gt;</span>2003<span class="tag">&lt;/<span class="name">year</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">price</span>&gt;</span>39.95<span class="tag">&lt;/<span class="name">price</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">book</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">bookstore</span>&gt;</span></span><br></pre></td></tr></table></figure><ol><li><p><strong>基础知识整理：</strong></p><ul><li>必须有根元素</li><li>元素标签对大小写敏感</li><li>标签必须闭合</li><li>元素必须备正确的嵌套</li><li>标签属性必须加引号（单／双都行）</li></ul><blockquote><p>在此极力推荐的理念是：<strong>元数据</strong> <em>[有关数据的数据]</em> 应当存储为属性（如上面代码中的<code>id=&quot;501&quot;</code>，它仅仅是一个标识符，用于标识不同的书籍，它并不是数据的组成部分）；而<strong>数据本身</strong>应当存储为元素。</p></blockquote></li><li><p><strong>避免使用属性的理由：</strong></p><ul><li>属性无法包含多重的值（元素可以）</li><li>属性无法描述树结构（元素可以）</li><li>属性不易扩展（为未来的变化）</li><li>属性难以阅读和维护</li></ul><p> 尽量使用元素来描述数据。而仅仅使用属性来提供与数据无关的信息。</p></li><li><p><strong>xml 文档的合法性验证：</strong></p><p> 通过 DTD 验证的 xml 文档是合法的 xml。访问<a href="http://www.w3school.com.cn/dtd/index.asp">DTD教程</a></p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE note [</span><br><span class="line">  &lt;!ELEMENT note (to,from,heading,body)&gt;</span><br><span class="line">  &lt;!ELEMENT to      (#PCDATA)&gt;</span><br><span class="line">  &lt;!ELEMENT from    (#PCDATA)&gt;</span><br><span class="line">  &lt;!ELEMENT heading (#PCDATA)&gt;</span><br><span class="line">  &lt;!ELEMENT body    (#PCDATA)&gt;</span><br><span class="line">]&gt;</span><br></pre></td></tr></table></figure><p> 另一种 DTD 的代替者是 XML Schema。访问<a href="http://www.w3school.com.cn/schema/index.asp">XML Schema 教程</a></p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;xs:element name=&quot;note&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;xs:complexType&gt;</span><br><span class="line">  &lt;xs:sequence&gt;</span><br><span class="line">    &lt;xs:element name=&quot;to&quot;      type=&quot;xs:string&quot;/&gt;</span><br><span class="line">    &lt;xs:element name=&quot;from&quot;    type=&quot;xs:string&quot;/&gt;</span><br><span class="line">    &lt;xs:element name=&quot;heading&quot; type=&quot;xs:string&quot;/&gt;</span><br><span class="line">    &lt;xs:element name=&quot;body&quot;    type=&quot;xs:string&quot;/&gt;</span><br><span class="line">  &lt;/xs:sequence&gt;</span><br><span class="line">&lt;/xs:complexType&gt;</span><br><span class="line"></span><br><span class="line">&lt;/xs:element&gt;</span><br></pre></td></tr></table></figure></li><li><p><strong>给 xml 添加样式</strong></p> <figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=<span class="string">&quot;1.0&quot;</span> encoding=<span class="string">&quot;ISO-8859-1&quot;</span>?&gt;</span></span><br><span class="line"><span class="meta">&lt;?xml-stylesheet type=<span class="string">&quot;text/xsl&quot;</span> href=<span class="string">&quot;simple.xsl&quot;</span>?&gt;</span> <span class="comment">&lt;!-- xslt，xml 的推荐样式文件 --&gt;</span></span><br><span class="line"><span class="meta">&lt;?xml-stylesheet type=<span class="string">&quot;text/css&quot;</span> href=<span class="string">&quot;simple.css&quot;</span>?&gt;</span> <span class="comment">&lt;!-- css --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">breakfast_menu</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">food</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">name</span>&gt;</span>Belgian Waffles<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">price</span>&gt;</span>$5.95<span class="tag">&lt;/<span class="name">price</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">description</span>&gt;</span></span><br><span class="line">       two of our famous Belgian Waffles</span><br><span class="line">    <span class="tag">&lt;/<span class="name">description</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">calories</span>&gt;</span>650<span class="tag">&lt;/<span class="name">calories</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">food</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">breakfast_menu</span>&gt;</span></span><br></pre></td></tr></table></figure><p> 访问<a href="http://www.w3school.com.cn/xsl/index.asp">XSLT 教程</a>。</p></li></ol>]]>
    </content>
    <id>https://cedriclee85.github.io/2017/08/27/XML-study-entry-1/</id>
    <link href="https://cedriclee85.github.io/2017/08/27/XML-study-entry-1/"/>
    <published>2017-08-27T09:10:01.000Z</published>
    <summary>XML 基础知识第一课 🫱🫲👌</summary>
    <title>XML Entry-1</title>
    <updated>2026-08-25T05:42:37.956Z</updated>
  </entry>
</feed>
