记录一次简单的博客升级w - idealclover
source link: https://idealclover.top/archives/610/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
记录一次简单的博客升级 w
2020.03.02 | 网站相关 | 5960 浏览 | 19 赞 | 26 条评论
请注意，本文编写于 630 天前，最后修改于 547 天前，其中某些信息可能已经过时。
从过年开始一直被闷在家里，少了出门和小伙伴耍的快落～每天在家里就是对着电脑忙各种事情（指摸鱼），于是总想着找点事情做做，正好看自己的小博客也不太顺眼了就想着升一下级～
在这里简单记录一下～一方面是回顾和总结，另外也是带大家看看自己都做了哪些事情～2333～怕大家注意不到～
如果样式没有变化的话是缓存的问题～刷新一下就好啦！
页面样式重写
重写了 更多页 和 项目页，现在可以更清晰地看到我博客的额外彩蛋页面，以及我的项目都有哪些 w
使用了 BootStrap 的 Jumbotron “超大屏幕”
友链样式重写
之前的友链样式只是单纯的挂个链接，这两天把页面重写了一下可以看到头像了 w
当然由于 http 及网络等等限制，很多图片容易加载不出来，这个时候可以使用 onError 属性，把图片重载为默认图片，具体来讲如下：
<img class="linkimg" src="https://image.idealclover.cn/blog/assets/default.jpg" href="xxx" onerror="this.src=\"https://image.idealclover.cn/blog/assets/default.jpg\"" referrerpolicy="no-referrer">
这样就可以做到如果图片无法加载则自动替换为默认图片的效果啦 w
这个算是重头戏啦
右下角的月亮图标可以切换 白天 / 夜晚 模式～
具体实现的话，一般来说对通常的页面，darkmode.js 就已经够用了。但是因为我用的主要是 bootstrap 的组件，用这个会出 bug，于是用了 dark-mode-switch 这个组件。教程写得也相对明白，引用组件，加几个 CSS 就可以了 w 比自己想象中居然还要简单一点～
这下晚上翻自己的东西就再也不会被亮瞎了～
404 页面
调试的时候才发现自己的网站之前是一直开着 debug 的，在生产环境上这样不好，很容易暴露安全问题。于是关掉了 debug，按着做首页的方式复制粘贴了个 404 页面出来。
本来想做类似首页的那种字母滚动动效的，但自己对遗传算法啥的并没有吃透，出了点 bug 于是作罢 XD
毕竟不是搞技术的 QAQ （叹气
添加 爱发电 和 Patreon
发电警告 2333
这两个平台都是周期性赞助平台，可以每个月给喜欢的画师 / 创作者打点钱～
无意间看到小伙伴挂了个爱发电的链接，跃跃欲试自己也想整个 2333
这个就没什么难度啦，平台一注册，链接一挂就 OK
其实就是为了提醒大家有这么个东西（不是）
鼠标指针特效
点一下就会出烟花，挺好玩的～
烟花和图标指针效果是仿照 DIYGod 来的，同时参考了 这篇文章
具体实现的话分这么几步：
a. 弄到一张鼠标指针图片，扔到一个有固定链接的地方去
b. 修改页面 CSS
body {
cursor: url(你扔的固定链接),auto;
鼠标的图标就换好了，接下来处理动效部分
c. 上传动效相关 JS
我找到的 JS 在 这里
传到自己的服务器 / CDN 上，然后在页面里引用
<script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>
以后也会努力产出的～希望翠翠的网站可以给大家带来收获与快乐！
本文链接：https://idealclover.top/archives/610/
本作品由 idealclover 采用 知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议 进行许可，转载请注明出处。
标签: 博客 , 文章 , 服务器 , 链接 , 平台 , bug, 网站 , 算法 , 技术 , 页面 , 重写 , 动效 , 图片
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK