博客改良 - Githubissues

对博客的二次改动

起源

这个博客起初面向的是与同行间的技术分享，因此就根本没在意它在手机端上的表现，直到我将它投入到别的用途后，它开始面向更多非同行的人，也就是主要浏览器不为电脑的人。

数天前，我看到几张手机的截图，发现 aurora 在手机上对大表格内的长文字的显示不是很友善。我又一次打开了博客的源码，准备修改。

处理报错

还没开始修改，yarn start直接开幕雷击

在我想改代码之前，yarn start报错是从来没发生过的事情

yarn run v1.22.17
$ npm run serve

> aurora@2.0.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                  上午8:26:31

 error  in ./src/styles/index.scss

Syntax Error: Error: PostCSS received undefined instead of CSS string

 @ ./src/styles/index.scss 4:14-225 15:3-20:5 16:22-233
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.121.238:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

查了点资料，似乎是 sass 的锅。好吧，重新跑一次sudo yarn install

yarn install v1.22.17
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "gitalk > react-flip-move@2.9.14" has unmet peer dependency "react@0.13.x || 0.14.x || 15.x.x".
warning "gitalk > react-flip-move@2.9.14" has unmet peer dependency "react-dom@0.13.x || 0.14.x || 15.x.x".
warning " > sass-loader@10.2.0" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning " > @vue/cli-plugin-eslint@4.5.13" has incorrect peer dependency "eslint@>= 1.6.0 < 7.0.0".
warning "@vue/cli-plugin-eslint > eslint-loader@2.2.1" has incorrect peer dependency "eslint@>=1.6.0 <7.0.0".
warning " > eslint-plugin-vue@6.2.2" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
[4/4] Building fresh packages...
Done in 128.82s.

这次运行yarn start没问题了，可以开始工作了

目标是把文章的表格的 padding 修改一下，不过在此之前，先把表格改成三列而不是原来的七列。

修改表格

typora 在这方面很弱，只能用 vscode 来编辑，因为它支持用 alt + shift 选定一片矩形区域

但是 vscode 也不是简单的操作：各种格式化表格的插件对中文和日文水土不服，因为字体不是等宽字体的问题，哪怕我更换了字体为 sarasa-tty 之类的等宽编程字体也依旧不能完全解决问题，只能修改部分内容，插件的格式化还会把原来表格两侧的 "|" 给删掉，同时插入的空格还不会改变，这样一来，typora 中就会以代码而不是表格来显示内容，这下一来，彻底把原来的格式给搞乱了。

改试了一下正则表达式，效果也不好

还好就五篇，多费点时间改吧

修改 scss

花了两个小时改完了源文件（其实大多数时间浪费在插件搞出来的乱子上面了），开始向网页动刀了

按照原来的格式，表格在所有情况下都是两侧各留空 36 像素，源代码如下：

.table-wrapper {
  margin: 0 16px 25px;
  max-width: 100%;
  overflow-x: auto;
  @include scrollBar;
  & > table {
    margin: 0 auto;
    border-radius: 3px;
    border-spacing: 2px;
    border-collapse: separate;
    border: 1px solid #dfdfdf;
    tr {
      height: 32px;
    }
    th {
      background-color: $bg-dark;
    }
    td,
    th {
      padding: 0 36px; //在这里
      border: 1px solid #dfdfdf;
    }
  }
}

~~调试一番~~（复制代码）后，改成了这个样子

.table-wrapper {
  margin: 0 16px 25px;
  max-width: 100%;
  overflow-x: auto;
  @include scrollBar;

  & > table {
    margin: 0 auto;
    border-radius: 3px;
    border-spacing: 2px;
    border-collapse: separate;
    border: 1px solid #dfdfdf;
    tr {
      height: 32px;
    }
    th {
      background-color: $bg-dark;
    }
    td,
    th {
      padding: 0 36px;
      border: 1px solid #dfdfdf;
      @media screen and (max-width: 767px)
      {
        padding: 0 12px;
      }
    }
  }
}

和之前一样的手法，在手机端下将的两侧间隔调整为了 12 像素，但电脑端保持原样

杂项改动

网页图标

原来一直用的是默认的，这次给换掉了

~~会了一定的日文后找素材真方便啊~~

文章头图

尽管食用手册中已经明写了怎么用，奈何我试了十几次都没成，于是那时候就放弃了，这次又失败了。

头像

用的是 bilibili 的，tg 的早就换了，这次这边也跟着换成了 tg 的

连带着更新了一些无关紧要的信息

写文风格

自然是向着“将多列改为多行”的方向改变，之前的就懒得再改了

大概是差不多了，至此，aurora 也基本褪去了默认的样子，大概又是很长一段时间不会改变了吧。

CelestialCosmic / themeblog

博客改良 #14

起源