折腾主题

- -
-博客

建站

站是建完了，主题就想着先整一个 云游君 的 Yun 的，结果搞了两天还没配好，我以为一天就差不多了，当然也是我要求比较高。
折腾的时候又逛了一堆博客，以前不太逛这些个人博客的，除了 Matrix67、王垠、阮一峰等大佬可能看的比较多一点，感觉又打开了新世界的大门，我本以为我打开的门够多了。主要在逛 木子 大佬收录的博客。
然后又找到好多好东西，比如 Dism++，Win10 一堆小毛病都给整舒服了；Geek Uninstaller，彻底卸载软件用的；还有个不让宣传就不说了。

前端相关

前端每一项东西都有讲究，我又是完美主义，又看了好多资料折腾好久，以前也没了解过这方面。

  • Slant：可以列出任一方面的最佳产品/解决方案，可以缓解选择困难，虽然仅供参考，但至少把选项列出来了。
  • Can I use：前端各种东西的兼容性情况。
  • PageSpeed Insight：谷歌的网站性能分析。
  • Lighthouse：审查网站各项性能。
  • 多地测速：国内外多点测速。

字体

字体最后是配成了这样。以前我特别讨厌宋体，感觉丑哭了，后来发现打印在纸上宋体要好看很多，我才明白宋体适合印刷，黑体适合屏显。

font:
  serif:
    family: "'Noto Serif SC', serif"
    weight: 700
  sans_serif:
    family: "monospace, sans-serif"
    weight: 400
  monospace:
    family: "Consolas, Menlo, 'Fira Code', 'Source Code Pro', monospace"

配色

配色如你所见。

排版

直到今天我还才知道排版还有这么多讲究，想以前我还很喜欢用中文 + 半角符号，感觉全角符号好丑。

图片

基本的图片处理我倒是没问题，不过听说 WebP 格式很小很快，又去折腾 WebP 格式，一开始找到个 PS 的 WebP 插件，看上去还行，但是用下来 100 有损都有肉眼可见失真，然后又找到智图，用下来感觉还行，图片品质直接用它默认给的基本没问题，还有个 picdiet。
图片目前准备主页图片用阿里云 OSS，文章图片用 SM.MS 图床，用智图压缩为 WebP 格式，Safari 不支持 WebP 就去死好了，只要人人都用 WebP，你看他还敢不支持吗？
上传用 PicGo，目前 PicGo 传 SM.MS 还要装个 SMMS 插件（好像下个版本会直接支持），说实话有点离谱，一个单纯上传图片到图床的工具居然还有插件。（刚发现 SM.MS 不支持 WebP，明明选的时候支持好多格式）

  • 智图：在线压缩，支持各种格式，可以原格式压缩或 WebP 格式压缩，压缩效果良好。
  • picdiet：纯 JS 在线压缩算法，只支持 JPG 和 JPEG 格式，压缩率接近 WebP，速度也很快，感觉对大图效果比较好，小图的失真比较明显。
  • squoosh：在线压缩，光速，预览效果也最舒服，但压缩率好像比 picdiet 差一点。
  • WebP Server：WebP 自动转换服务（更好懂的指南），啊？要服务器的啊，那我不要了。

头像

Gravatar 头像接口，目前正常的几个 Gravatar 头像接口（后缀接邮箱的 MD5 小写）：

QQ 头像接口：

Gravatar + QQ 头像接口，快，这里 还有很多其他接口：

短链接

微博的 t.cn 基本是不能用了好像。

主题

Yun 这个主题还是有点稚嫩，对暗色背景支持不太好，我 fork 下来改了好些地方，就当学习了，还从来没搞过前端这些 CSS 什么的。
当然总体还是个挺舒服的主题，小巧精致，也没有太花里胡哨。

目前改的差不多了，说下调整的地方：

  • 一言的 div 增加 90% 透明白色背景，原来暗色背景上看不清；增加了左右边距，否则会被按钮挡住，手机端就不管了，否则太窄了；还有上下边距也增加了，否则单行的时候按钮不居中。
  • 侧栏背景增加 5% 透明。
  • 菜单按钮和搜索按钮增加 50% 白色背景。
  • girls 页面图标放大，反正我不放很多。
  • 正文字体颜色调整，再增加一个极淡的阴影，这个完全是照抄 木子 大佬的，感觉很好看。
  • hover/focus 的颜色调整，这个颜色为啥不给配置，好奇怪。
  • 页脚文字增加白色阴影，否则看不清啦，这个还加白色背景就有点难看了。
  • 搜索的背景设置 background-attachment 为 true，否则背景会上移，如果搜索背景和主背景是一张图的话就会很明显。
  • 切换文章的 div 增加 50% 白色背景，高度从 2.9 rem 改为 3 rem，我没懂为什么用 2.9 rem，字会不居中诶。
  • 去掉了手机端的点击特效，手机端的操作更多是滑动，加个点击特效感觉怪怪的，这个是最难改的。

点击特效这个，一开始我以为可以在 yaml 里改，应该不行；然后我想在 stylus 里改，到处看文档和社区，发现好像还是不行；随后我又看到了 pug，又是一波搜索看文档看社区，似乎依然不行；我终于来到了 JavaScript 这，我立刻就找到了答案，直接修改 fireworks.js，增加了 !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 的判断总算实现了需求。当然我相信应该是有不改 fireworks.js 的方法的，只不过我没找到。

本来还想把卡片改成圆角的，不过好像不好看，特别是边栏打开的时候，就没改。

后记

写完了发现我好像写成网站导航了，导航这个东西我是想后面整理一下，实在是太多了。