建站

站是建完了,主题就想着先整一个 云游君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-attachmenttrue,否则背景会上移,如果搜索背景和主背景是一张图的话就会很明显。
  • 切换文章的 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 的方法的,只不过我没找到。

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

后记

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