Replace mdc-table with markdown

apqx · Dec 29, 2024 · 302b2c2 · 302b2c2
1 parent 71d397f
commit 302b2c2
Show file tree

Hide file tree

Showing 15 changed files with 128 additions and 222 deletions.
diff --git a/_posts/original/2018-08-27-字节的原码、补码与反码.md b/_posts/original/2018-08-27-字节的原码、补码与反码.md
@@ -41,41 +41,12 @@ array[1] = 0x81 = 1000 0001(二进制) = 129(十进制)
 * `正数`的`反码`是其本身，`负数`的`反码`是除符号位外，其余位取反。
 * `正数`的`补码`是其本身，`负数`的`补码`是除符号为外，其余位取反，然后加1，即`负数`的`反码`加1。
 
-<!-- 
+
 | 机器数    | 真值 | 反码      | 补码      |
 |-----------|------|-----------|-----------|
 | 0000 0001 | 1    | 0000 0001 | 0000 0001 |
 | 1000 0001 | -1   | 1111 1110 | 1111 1111 |
- -->
-
-<div class="mdc-data-table">
-  <div class="mdc-data-table__table-container">
-    <table class="mdc-data-table__table" aria-label="Dessert calories">
-      <thead>
-        <tr class="mdc-data-table__header-row">
-          <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">机器数</th>
-          <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">真值</th>
-          <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">反码</th>
-          <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">补码</th>
-        </tr>
-      </thead>
-      <tbody class="mdc-data-table__content">
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0000 0001</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">1</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0000 0001</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0000 0001</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">1000 0001</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">-1</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">1111 1110</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">1111 1111</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+{: .should-wrap-table .align-right }
 
 那么为什么一定要有`反码`和`补码`呢，这其实和计算机本身的计算特性有关。计算机的二进制运算电路用`与非门`设计`加法器`很简单，而`减法器`的电路设计却非常复杂。为了节约计算时间和电路成本，用`加法器`实现减法就是一个比单独制造`减法器`更高效的方案，而`反码`和`补码`正是为解决这个运算转换而产生的。
 

diff --git a/_posts/original/2019-05-18-槐安国内春生酒.md b/_posts/original/2019-05-18-槐安国内春生酒.md
diff --git a/_posts/original/2019-06-11-基于非对称加密的HTTPS与SSH.md b/_posts/original/2019-06-11-基于非对称加密的HTTPS与SSH.md
@@ -96,45 +96,14 @@ C://Users/[username]/.ssh/
 
 `.ssh`目录有4个文件：
 
-<!-- 
+
 | 文件名          | 说明                                     |
 |-----------------|----------------------------------------|
 | known_hosts     | 保存本机曾登录过的远程主机公钥           |
 | authorized_keys | 保存要信任的能够远程登录本机的客户端公钥 |
 | id_rsa          | 本机的私钥                               |
 | id_rsa.pub      | 本机的公钥                               |
--->
-
-<div class="mdc-data-table">
-  <div class="mdc-data-table__table-container">
-    <table class="mdc-data-table__table" aria-label="Dessert calories">
-      <thead>
-        <tr class="mdc-data-table__header-row">
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">文件名</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">说明</th>
-        </tr>
-      </thead>
-      <tbody class="mdc-data-table__content">
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">known_hosts</td>
-          <td class="mdc-data-table__cell">保存本机曾登录过的远程主机公钥</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">authorized_keys</td>
-          <td class="mdc-data-table__cell">保存要信任的能够远程登录本机的客户端公钥</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">id_rsa</td>
-          <td class="mdc-data-table__cell">本机的私钥</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">id_rsa.pub</td>
-          <td class="mdc-data-table__cell">本机的公钥</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+{: .should-wrap-table}
 
 `known_hosts`已经解释过，`id_rsa`和`id_rsa.pub`是本机生成的一组`非对称加密`的`私钥`和`公钥`。
 

diff --git a/_posts/original/2019-07-02-文件中的回车与换行.md b/_posts/original/2019-07-02-文件中的回车与换行.md
@@ -14,96 +14,23 @@ tags: Code 打字机
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20190702/crlf.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="CRLF" }
 
-<!-- 
+
 | 简写 | 说明            | 中文 | 16进制表示 | 符号 |
 |------|-----------------|----|------------|------|
 | CR   | Carriage Return | 回车 | 0x0d       | \r   |
 | LF   | Line Feed       | 换行 | 0x0a       | \n   |
- -->
-
-<div class="mdc-data-table">
-  <div class="mdc-data-table__table-container">
-    <table class="mdc-data-table__table" aria-label="Dessert calories">
-      <thead>
-        <tr class="mdc-data-table__header-row">
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">简写</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">说明 </th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">中文</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">16进制表示</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">符号</th>
-        </tr>
-      </thead>
-      <tbody class="mdc-data-table__content">
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">CR</td>
-          <td class="mdc-data-table__cell">Carriage Return</td>
-          <td class="mdc-data-table__cell">回车</td>
-          <td class="mdc-data-table__cell">0x0d</td>
-          <td class="mdc-data-table__cell">\r</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">LF</td>
-          <td class="mdc-data-table__cell">Line Feed</td>
-          <td class="mdc-data-table__cell">换行</td>
-          <td class="mdc-data-table__cell">0x0a</td>
-          <td class="mdc-data-table__cell">\n</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+{: .should-wrap-table }
 
 `CR`、`LF`和`CRLF`，这些其实是文件使用的`换行符`字节定义。文件由字节构成，字节在磁盘中顺序存储本没有`换行`概念，而为文字显示的排版需要，文件中可以使用一些特殊字节来表示`换行符`。在`Linux`、`Windows`和`Mac`上，因为历史原因对`换行符`的字节定义并不相同，但也无非是`回车`和`换行`这两个字节的组合。
 
-<!-- 
+
 | 系统           | 换行符 | 16进制表示 | 符号 |
 |----------------|--------|------------|------|
 | Windows        | CRLF   | 0x0d0a     | \r\n |
 | Linux          | LF     | 0x0a       | \n   |
 | Mac(OS X 之前) | CR     | 0x0d       | \r   |
 | Mac(OS X 之后) | LF     | 0x0a       | \n   |
- -->
-
-<div class="mdc-data-table">
-  <div class="mdc-data-table__table-container">
-    <table class="mdc-data-table__table" aria-label="Dessert calories">
-      <thead>
-        <tr class="mdc-data-table__header-row">
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">系统</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">换行符</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">16进制表示</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">符号</th>
-        </tr>
-      </thead>
-      <tbody class="mdc-data-table__content">
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">Windows</td>
-          <td class="mdc-data-table__cell">CRLF</td>
-          <td class="mdc-data-table__cell">0x0d0a</td>
-          <td class="mdc-data-table__cell">\r\n</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">Linux</td>
-          <td class="mdc-data-table__cell">LF</td>
-          <td class="mdc-data-table__cell">0x0a</td>
-          <td class="mdc-data-table__cell">\n</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">Mac(OS X 之前)</td>
-          <td class="mdc-data-table__cell">CR</td>
-          <td class="mdc-data-table__cell">0x0d</td>
-          <td class="mdc-data-table__cell">\r</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">Mac(OS X 之后)</td>
-          <td class="mdc-data-table__cell">LF</td>
-          <td class="mdc-data-table__cell">0x0a</td>
-          <td class="mdc-data-table__cell">\n</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+{: .should-wrap-table }
 
 比如在`Windows`中建立一个文件，存入以下内容：
 

diff --git a/_posts/original/2022-01-17-趣算法01：小鼠试毒.md b/_posts/original/2022-01-17-趣算法01：小鼠试毒.md
@@ -29,50 +29,13 @@ tags: Code 算法 二进制
 
 同样的原理，这个问题可以简化为4支试管和2只小鼠。给试管编号0、1、2、3，小鼠编号0、1，设定小鼠的生为0、死为1，左边为二进制高位，那么2只小鼠的生死排列只有4种可能，对应4支试管：
 
-<!-- 
-| `小鼠1` | `小鼠0` | 对应试管 |
+| 小鼠1 | 小鼠0 | 对应试管 |
 |-------|-------|----------|
 | 0     | 0     | 0        |
 | 0     | 1     | 1        |
 | 1     | 0     | 2        |
 | 1     | 1     | 3        | 
--->
-
-<div class="mdc-data-table">
-  <div class="mdc-data-table__table-container">
-    <table class="mdc-data-table__table" aria-label="Dessert calories">
-      <thead>
-        <tr class="mdc-data-table__header-row">
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">小鼠1</th>
-          <th class="mdc-data-table__header-cell" role="columnheader" scope="col">小鼠0</th>
-          <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">对应试管</th>
-        </tr>
-      </thead>
-      <tbody class="mdc-data-table__content">
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">生：0</td>
-          <td class="mdc-data-table__cell">生：0</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">试管0</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">生：0</td>
-          <td class="mdc-data-table__cell">死：1</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">试管1</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">死：1</td>
-          <td class="mdc-data-table__cell">生：0</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">试管2</td>
-        </tr>
-        <tr class="mdc-data-table__row">
-          <td class="mdc-data-table__cell">死：1</td>
-          <td class="mdc-data-table__cell">死：1</td>
-          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">试管3</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+{: .should-wrap-table }
 
 新的问题是，如何产生这4种生死组合？肯定要给小鼠喝试管里的液体，喝哪支试管呢？
 

diff --git a/_posts/original/2023-01-12-2023年，我换了新域名「牡丹」.md b/_posts/original/2023-01-12-2023年，我换了新域名「牡丹」.md
@@ -13,9 +13,11 @@ pin: true
 
 七年，博客域名一直是`apqx.me`，从`GoDaddy`购买，每年续费168元就可以一直拥有它。
 
-`apqx`当然不是随机的无意义字符，其实是小时候喜欢的`长弓·阿帕奇`武装直升机的拼音缩写`apq`，至于后面的`x`，是因为当我决定要注册人生第一个域名`apq.me`时意外发现它竟然已经属于别人（明明几个月前还是未注册状态），只能遗憾在后面加一个`x`，变成`apqx.me`。
+`apqx`当然不是随机的无意义字符，其实是小时候喜欢的`长弓·阿帕奇`武装直升机的拼音缩写`apq`。至于后面的`x`，是因为当我决定要注册人生第一个域名`apq.me`时意外发现它竟然已经属于别人，明明几个月前还是未注册状态，只能遗憾在后面加一个`x`变成`apqx.me`。
 
-对非开发者，需要补充一些关于域名是什么的简单解释。服务器是现代互联网的基础设施，网站搭建在服务器上，在网络世界里只能通过`IP`地址去定位到一台特定服务器。使用`HTTP`协议可以在浏览器中输入一串`http://185.199.109.153:80`字符来访问搭建在`IP`地址为`185.199.109.153`的服务器上监听`80`端口的网站，全是数字很难记对吧，所以才有域名的概念。
+## 域名
+
+对非开发者，需要补充一些关于域名（Domain）是什么的简单解释。服务器是现代互联网的基础设施，网站搭建在服务器上，在网络世界里只能通过`IP`地址去定位到一台特定服务器。使用`HTTP`协议可以在浏览器中输入一串`http://185.199.109.153:80`字符来访问搭建在`IP`地址为`185.199.109.153`的服务器上监听`80`端口的网站，全是数字很难记对吧，所以才有域名的概念。
 
 域名可以由字符、数字甚至汉字组成，有意义的词自然比无规则数字清晰简洁，比如都熟悉的百度，它的域名是`baidu.com`，在浏览器中输入就能跳转到百度网站。这个过程中浏览器其实做了2件事，先去`DNS`域名服务器查询域名对应的`IP`地址，再去访问`IP`对应的服务器，当然中间有很多复杂细节需要更多协议处理，但总之，域名起到的就是这个作用。
 
@@ -38,6 +40,8 @@ pin: true
 
 只剩下另一种方案，但是`GitHub Pages`并不支持对`HTTP`协议的配置，所以并不能对请求直接返回`301`重定向。一个思路是在`Pages`上为`apqx.me`创建一个空白跳转站，用`JavaScript`把来访`URL`手动跳转到`mudan.me`。这倒不是不可以，只是有点“糙”。
 
+## Cloudflare
+
 车到山前必有路，我使用的是`Cloudflare`的`DNS`服务，众所周知`Cloudflare`本职是`CDN`内容分发网络，只需把`DNS`解析的`Proxy status`设置为`Proxied`就可以使用它的`CDN`服务。访问`apqx.me`的流量会先经过`Cloudflare`再到达托管网站的`GitHub Pages`，此时`Cloudflare`作为中间人是能够对经过的`HTTP`请求返回`301`重定向的。
 
 *请忽略我在`A记录`里随意填写的`8.8.8.8`，因为会配置重定向，`HTTP`请求永远也不会到达这个`IP`，可以任意填。*

diff --git a/_posts/original/2024-03-07-解决阿里云OSS无CDN时的流量风险.md b/_posts/original/2024-03-07-解决阿里云OSS无CDN时的流量风险.md
@@ -7,7 +7,7 @@ mention: 函数计算 账单
 date: 2024-03-07 +0800
 description: 阿里云的OSS对象存储非常适合存放个人博客里的静态资源，但在使用这种便利服务的同时也伴随着流量攻击可能带来的巨额账单风险，是一把时刻悬在头顶的达摩克利斯之剑，不得不认真寻找对策...
 cover: 
-tags: Code Blog 阿里云 OSS Referer 函数计算 CDN
+tags: Code Blog 阿里云 OSS 对象存储 Referer 函数计算 CDN
 ---
 
 对个人博客而言阿里云的`OSS对象存储`服务非常适合存放诸如图片、视频、JS、CSS的静态资源，尤其非备案的海外站点，资源托管在国内云上是其在无法使用`CDN`的条件下加速访问的几乎唯一解，从我2年来的使用体验来看对其速度和稳定性都十分满意。

diff --git a/npm/dist/blog-scaffold-v2.0.0.css b/npm/dist/blog-scaffold-v2.0.0.css
diff --git a/npm/dist/blog-scaffold-v2.0.0.js b/npm/dist/blog-scaffold-v2.0.0.js
diff --git a/npm/src/component/dialog/PreferenceDialog.tsx b/npm/src/component/dialog/PreferenceDialog.tsx
@@ -123,10 +123,10 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
                     <SettingsToggle titleHtml="固定顶部标题栏"
                         on={this.state.fixedTopbarOn}
                         onClickToggle={this.onClickFixedTopbarSwitch} />
-                    <SettingsToggle titleHtml={this.handwrittenFontTitle}
+                    {/* <SettingsToggle titleHtml={this.handwrittenFontTitle}
                         on={this.state.handwrittenFontOn}
-                        onClickToggle={this.onClickHandwritingFontSwitch} />
-                     {/* <SettingsToggle titleHtml={this.notoSerifSCFontTitle}
+                        onClickToggle={this.onClickHandwritingFontSwitch} /> */}
+                    {/* <SettingsToggle titleHtml={this.notoSerifSCFontTitle}
                         on={this.state.notoSerifSCFontOn}
                         onClickToggle={this.onClickNotoSerifSCFontSwitch} /> */}
                     <SettingsToggle titleHtml={this.autoThemeTitle}

diff --git a/npm/src/component/font/font.ts b/npm/src/component/font/font.ts
@@ -8,12 +8,13 @@ import { consoleError } from "../../util/log"
  */
 export function initFont() {
     // 废弃handwritten设置，TODO: 注意旧版本可能启用了这个设置项
-    const localHandWritingFontOn = localRepository.getHandWritingFontOn()
-    setHandwrittenFont(localHandWritingFontOn)
+    // const localHandWritingFontOn = localRepository.getHandWritingFontOn()
+    // setHandwrittenFont(localHandWritingFontOn)
     // TODO: 之后应使用字体设置项，而非boolean
     // const localNotoSerifSCFontOn = localRepository.getNotoSerifSCFontOn()
     // setNotoSerifSCFont(localNotoSerifSCFontOn)
     // setNotoSerifSCFont(true)
+    checkFont()
 }
 
 export function setHandwrittenFont(on: boolean) {

diff --git a/npm/src/component/table.scss b/npm/src/component/table.scss
@@ -13,7 +13,7 @@ th,
 }
 
 .mdc-data-table {
-    @include data-table-theme.shape-radius(0.3rem);
+    // @include data-table-theme.shape-radius(0.3rem);
     // 设置标题背景为透明色，防止横向滚动时遮挡边框角
     @include data-table-theme.header-row-fill-color(#00000000);
     @include data-table-theme.header-row-text-color(var(--mdc-theme-text-primary-on-background));
@@ -31,3 +31,61 @@ th,
 .dark .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
     background-color: rgba($color: map.get(blogTheme.$drawer-nav-ripple, "dark"), $alpha: 0.1);
 }
+
+.table-wrapper {
+    width: 100%;
+    overflow: scroll;
+    margin: calc(var(--mdc-typography-body1-font-size) - 0.5rem) 0;
+    border: 1px solid var(--divider-color);
+    border-radius: var(--post-inner-shape-round);
+}
+
+table {
+    // 设置表格圆角必须将collapse设置为separate
+    border-collapse: separate;
+    // border: 1px solid var(--divider-color);
+    // border-radius: var(--post-inner-shape-round);
+    border-spacing: 0;
+    min-width: 100%;
+
+    * {
+        @include text.basicText();
+    }
+
+    thead {
+        margin: 0;
+    }
+
+    tbody {
+        margin: 0;
+
+        :last-child td {
+            border: none;
+        }
+    }
+
+
+}
+
+// 表格一行
+tr {
+    margin: 0;
+}
+
+// 单元格
+th,
+td {
+    margin: 0;
+    border-bottom: 1px solid var(--divider-color);
+    padding: 0.8rem 1rem;
+    text-align: left;
+    white-space: nowrap;
+    min-width: fit-content;
+    // text-overflow: ellipsis;
+}
+
+.align-right {
+    th, td {
+        text-align: right;
+    }
+}
diff --git a/npm/src/component/table.ts b/npm/src/component/table.ts
@@ -6,4 +6,16 @@ export function initTable() {
     for (const ele of document.querySelectorAll(".mdc-data-table")) {
         new MDCDataTable(ele)
     }
+
+    for (const tableE of document.querySelectorAll(".should-wrap-table")) {
+        wrapTableByDiv(tableE)
+    }
 }
+function wrapTableByDiv(tableE: Element) {
+    const wrapper = document.createElement("div")
+    wrapper.classList.add("table-wrapper")
+    tableE.parentNode?.replaceChild(wrapper, tableE)
+    wrapper.appendChild(tableE)
+    tableE.classList.remove("should-wrap-table")
+}
+