折腾一下自定义 CSS

学 CSS 是不可能学的，这辈子都不可能学的，只能靠 Google 和 CV 维持一下生活这样子。

自定义 CSS

修改原有样式

方法非常简单，打开你的浏览器的调试工具（我使用的是 Safari，但 Chrome 和 Firefox 的应该也差不多），可以点击网页元素选择按钮（Safari 在元素上右键，点击选择元素；Chrome 在开发者工具里点击左上角的图标）来浏览对应的 HTML 代码，也可以在 HTML 代码上滑动光标，对应的元素会随之高亮。

在右侧的样式中就可以看到对应的 CSS 代码。双击就可以修改对应的值，或者添加新的标签。

全部复制下来，粘贴到自定义 CSS 中即可。

Dark Mode

现在 iOS 13、Android Q、macOS 10.15 都原生支持了 Dark Mode，只要搭配一个同样支持此功能的浏览器就可以跟随系统状态变化。

在自定义 CSS 中添加如下代码:

@media screen and (prefers-color-scheme: dark) {
	<!-- 此处填写自定义代码 -->
}

把深色模式所需要变化的样式统统粘贴到大括号里，就可以实现网页深色模式跟随系统变化。

自定义 HTML

Live2D 看板娘

如果你用的是 WordPress 或者 Hexo，可以通过直接安装插件的方法来获取。

但如果是 PyOne 这种比较简单的，手动安装十分麻烦。

这里我们用 iframe 的方法通过链接其他网页来实现。

直接使用

个人使用的是这个 Live2D Widget

如果不需要自定义的话，只需要加入这两行自定义 HTML 代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

自定义

如果需要对效果进行一些更改的话，需要有一个能够保存和获取 autoreload.js 的地址，例如 GitHub pages 或者其他 pages 服务。

然后修改 script 的地址到你的文件即可。