专栏首页idealclover的填坑日常记录一次简单的博客升级w

记录一次简单的博客升级w

从过年开始一直被闷在家里,少了出门和小伙伴耍的快落~每天在家里就是对着电脑忙各种事情(指摸鱼),于是总想着找点事情做做,正好看自己的小博客也不太顺眼了就想着升一下级~

在这里简单记录一下~一方面是回顾和总结,另外也是带大家看看自己都做了哪些事情~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>

就可了w

以后也会努力产出的~希望翠翠的网站可以给大家带来收获与快乐!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何使用github给大佬递茶

    最近也是闲到没事干(误),开始给开源项目打小黑工贡献代码,当个dalao手底下的端茶党。但是看来端茶党也不是那么容易做的或许只是傻翠他智商太低跟不上,在打小黑工...

    idealclover
  • 从零开始折腾博客(2):LMAP搭建Wordpress博客

    上面安装的只是MySQL的支持组件,其中的MySQL的系统默认使用的是MariaDB。具体的原因MySQL因为被Oracle收购,有潜在的闭源可能性。为了防止意...

    idealclover
  • 从零开始折腾博客(5):全站从http升级到https

    HTTPS=HTTP+SSL,简单讲是HTTP的安全版,即HTTP下加入SSL层。相比HTTP,HTTPS提供了内容加密,身份认证,数据完整性的功能,可以有效地...

    idealclover
  • Doug Lea在J.U.C包里面写的BUG又被网友发现了。

    https://bugs.openjdk.java.net/browse/JDK-8073704

    why技术
  • 集群session_iis共享虚拟目录

      每个虚拟目录相当于是一个应用,其中的Session是不共享的,不过你的Session存储方式设置成了 inpro,stateserver还是SQLSERVE...

    习惯说一说
  • 从Vue-router到html5的pushState

    首先,我们知道vue实现的单页应用中一般不会去刷新页面,因为刷新之后页面中的vuex数据就不见了。 其次,我们也知道一般情况下,url变更的时候,比如指定lo...

    木子墨
  • CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、vis...

    FEWY
  • SQL高手必知的调优方法(一)

    Oracle 数据库,作为成功的商业数据库,其用户量之大,众所周知。数据库的规模也越来越大。而作为终端用户 对数据的使用要求越来越高。数据量大和快捷的使用方式。...

    披头
  • 2020年中财报解读:“高维”进化的新国美

    8月31日,国美零售控股有限公司(股票代码:00493.HK)(以下简称“国美零售”)发布了未经审计的2020年中期业绩报告。

    庄帅
  • 关于Modbus协议的一些资料总结

    A Modbus library for Linux, Mac OS X, FreeBSD, QNX and Win32 libmodbus is a fre...

    ccf19881030

扫码关注云+社区

领取腾讯云代金券