Lazy loaded image【索引网站】一个我一直在用的“个人主页”
2023-2-21
| 2024-5-4
字数 1013阅读时长 3 分钟
type
Post
status
Published
slug
wx01
date
Feb 21, 2023
summary
个人索引网站前传
tags
教学
ssp
category
技术分享
icon

前言

网页开发是我大二的一门课(如果没记错的话),当时老师给我们布置的作业是做个博客网页,但因为某些原因,我对于博客制作并没什么兴趣,就随便套了个模板草草结束。
然后来解释一下上面的某些原因都有哪些:
  1. 我认为博客某种程度上是有意义的,但对于我个人使用频率肯定会很低(懒)
  1. 结合上面一点,我想做一个每天都能用到的网页
大概那种浏览器上一打开就进去的网页,能够迅速跳转到我想使用的网页上,这样的一个摆放着常用网址的跳转类网页。

第一版

我最开始尝试做过一版,不过因为太丑了,被我删掉了(已经不想回顾了)
就大概分了几栏,分别摆放了常用的网站,css也是随便写写的,在上面添加修改网站都非常困难。
就是那种基础逻辑很简单,但是修改起来要上下翻的感觉。
直到我看到了这个网页https://cook.yunyoujun.cn/),给了我一些灵感
notion image
我突然发现我可以让网页以块的形式排列在里面,再在上面打上标签,选择标签后符合的网页保留,其余的消失掉。

改版

然后熬了个通宵写了一个出来。
当时我做出来的效果大概是这样(因为没有当时的版本了,所以是在现在版本上面裁切的,当时也没有这么多网页)
notion image
使用了一段时间后,随着网页的逐渐增多后,我又觉得效率在逐渐降低,原因自然是很简单的,每次找标签都需要消耗一段时间(因为我将标签顺序和网页顺序都设置成了随机,当然我还是会设置成随机)

夜间模式

恰逢当时所有网页都变成了黑白的纪念模式,我研究了一些网页是怎么通过一行代码变成黑白的,同时也想到了应该加一个夜间模式,于是就顺手测试了当时我刚开始玩的“柴特寄批踢”,三下五除二写了一个夜间模式,果然比我自己效率高多了。

搜索框

所以我写了一个搜索框出来,这是让我觉得效率变高的很重要的一个点,与此同时,我给每个网页块都加了标题(实际是网页的一个描述,有一部分是从网页后台的描述截取的),鼠标放在块上就能看到悬浮的网页描述。
注意:关键词搜索不要太长,不然啥也搜不到
这其中包含了很多我未曾接触的内容,我很喜欢这种边学边用的感觉,不知道大家会不会觉得这种有一些挑战性的内容会让自己更有动力呢?

终版(暂定,懒,知道有问题暂时不改)

那么下面就是我的页面暂时呈现的样子
notion image
 
下面的5个社交标签是今天刚写的,问题还很大,暂时有些懒,先不改。
正如网页上写的那样,欢迎大家来使用我的标签页
同时网页的源码也在github主页开源了,欢迎大家私信我聊聊网页存在的问题。

结尾

那么以上就是本篇文章的全部内容了,如果觉得我写的还可以的话,欢迎关注我的账号,也别忘了点个赞!
  • 教学
  • ssp
  • 【索引网站】教你搭建个人索引网站【余命十年】十年 究竟是长还是短呢?
    Loading...