2021-6-9：开发小而美的博客（博客详情页美化）

2021-6-9：开发小而美的博客（博客详情页美化）

---

这是静态网页的结束，包含了各种插件的引入以及使用方式，给博客详情页美化了。

1、下载内容排版插件

网址：https://github.com/sofish/typo.css

2、导入插件typo.css文件

3、在blog.html文件中引入typo.css

<link rel="stylesheet" href="./static/css/typo.css">

在博文内容处，添加typo

查看效果

4、修改typo.css文件

把所有标签前都加入.typo

5、在下载插件typo.html文件中复制内容

从h2复制到h5

<h2 class="ui center aligned header">关于刻意练习的清单</h2>
        <br>

        <div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large">

          <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

          <pre><code class="language-css">p {
    color: red }</code></pre>

          <pre><code class="language-css">p {
    color: red }</code></pre>

          <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
          <h4>现状和如何去做：</h4>

          <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
            Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

          <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
          <table class="ui table" summary="Typo.css 的测试平台列表">
            <thead>
            <tr>
              <th>OS/浏览器</th>
              <th>Firefox</th>
              <th>Chrome</th>
              <th>Safari</th>
              <th>Opera</th>
              <th>IE9</th>
              <th>IE8</th>
              <th>IE7</th>
              <th>IE6</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>OS X</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win 7</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win XP</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
            </tr>
            <tr>
              <td>Ubuntu</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            </tbody>
          </table>

          <h4>中文排版的重点和难点</h4>

          <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下<