艾雪周刊 V.08—网站样式聚合分享

关于本刊

这是艾雪期刊的第 08 期，作为一个独立系列进行更新，更新时间在周末，主要内容为周内内容汇集以及碎碎念，有时会分享一些有趣的项目，有时是一些生活的碎碎念

周刊地址：AIOVTUE-雪—艾雪周刊
RSS订阅：艾雪周刊
邮件订阅：艾雪周刊
微信公众号：AIOVTUE-雪
私信：任意前缀@yybb.us

本期内容

博客推荐

本期推荐的博客是！雨雪冰屋，这是雪在开往随机到的，打开的一瞬间，就是一个吸引目光的加载动画，讲真，大部分博客要么没有加载动画，要么就是千篇一律，他这个还是挺有设计感的，包括他这个鼠标样式，除了大了点之外，真的是可可爱爱的

点我访问—雨雪冰屋

主页和大部分站点不一样，是一个单纯的介绍页，顶栏也和传统的页面跳转不一样，是类似于标题目录那种，在当前页面跳转，他这个首页头图有点3D的效果，挺惊艳的，顺着页面往下滑，各种动效映入眼帘，可以明显感觉到在和网站进行交互，这种体验还是很不错的，而且由于是这种设计，导致下滑长度特别长，感觉更像是一种旅途，当然顶部也有跳转博客的地方，是放在了域名下的/blog下面

他这个博客和友链放在了两个路径下面，并且单拎出来都很像一个完整的网站，感觉这种设计很新颖哦，页面比较多的话这样做也不失为一种办法，并且这样的话还能设置不一样的ui，对于选择困哪症来说简直是福音来着，博客部分写了是使用的Astro，样式也和发部分的项目差不多，各个页面顶栏都留有对应的跳转链接相互跳转，就是有一点不好，每次跳转都得重新加载，就停麻烦的，其他的倒还好，大家有兴趣可以前往站点逛逛哦~

项目推荐

最近在鼓捣网站优化，刷抖音刷到一些设计网站，上面有一些有很多各式各样的ui设计，甚至有源代码，直接拿来就能用，就很棒，下面给大家介绍一下最近收集的这些项目吧

originkit

originkit,一个包含各种设计好的效果的网站，上面有很多很惊艳的ui设计，本站部分设计就是从这里招的，例如友链穿越那个地方，还有随机文章部分，由于是单独拉出来展示，可能看着没有很特别，使用这个还是需要一点想象力的，你永远无法想象这个效果在什么地方会有意想不到的效果，下面是网站的页面，是英文的，不过问题不大，选择中意的效果后，右上角直接就有复制源代码的按钮，简支不要太好用，就是不知道以后会不会收费，有一些类似的站点似乎就已经收费了，希望能多坚持一会吧

ReactBits

这个站点上是一些面向创意开发者的React组件，上面聚合了很多小组件的样式，还是很有创意的，他不像上面那个一样，是很大的样式设计，这个就偏向于比较小的那种ui，比如说文字效果，按钮效果这些，但是涵盖的类型挺多的，大家可以去看看又没有中意的ui，似乎是可以看到源代码，也可以直接拿AI提示词，雪还没用过，不知道用起来如何，因为雪觉得这些ui和自己的站点适配度不那么高，就没怎么用，大家可以看看又没有自己能用的，雪也挺想知道使用体验来着~

网站下载器

网站下载器,这是一个开源项目的demo站点，顾名思义就是用来下载网页文件的，动态的那种就不用想了，就是类似于保存离线网页那种功能，能复刻网站的样式这些，如果是纯静态文件，甚至能完全扒下来，看到比较心动的静态演示可以用来扒源码，还是挺好用的，雪就是扒源码的时候找到的，用起来还不错，主要是很无脑，输入网址，打包，下载，就完事了，下载后还能直接打开，有需要大家可以用用看哦~

PagesCMS

PagesCMS,一个静态博客的后台项目，大致原理就是链接你的github，然后通过api调用修改你存在github仓库中的博客项目文件，修改后上传到仓库，然后触发部署，做到类似动态博客后台效果的一个项目，支持免费部署到vercel，雪觉得这个项目挺不错的，打算魔改一下，当前的主题项目也趋近于完善了，也没啥要新增的东西了，是时候思考一下其他方面，比如说后台，最近也在同步制作动态版本，即部署在cloudflare，使用D1数据库的那个，但是归根结底会有取舍，雪其实还是更喜欢静态博客，毕竟静态的话选择会很多，而且相对来说会稳定一点，雪是这样想的，将这个pagescms项目对本博客项目做一个专属适配和魔改，充当项目的专属后端，就是工程量还是不小的，先尝试一下看看效果吧，实在不行就老老实实手动修改咯~

近期动向

相信也有不少常来的小伙伴依旧发现了，本站进行了新一轮的小更新，新增了很多样式和效果，虽然谈不上大变样，但是也有一种焕然一新的感觉，本轮更新没有同步到开源仓库，因为修改的内容比较多，同步过去工作量有点大，并且后面还要修改一些东西，就先不着急，雪打算等后台部分修改完工后，在看看适配完善一下其他方面，然后整理一下，大换代一番，将他变成一个独立的项目，也就不再在同步为hugo主题文件了，具体什么样后面完善再说吧，比较目前也只是一个想法，能不能成还两说

好啦，是要和大家介绍更新部分的，首先最重要的更新就是，友链页面增加了一个随机跳转友链的按钮，重点不是这个按钮，功能很基础，主要是跳转界面的穿梭ui，是上面那个效果网站里面找到的，用来做友链穿梭就很适合，效果大概是这样的，会有一个穿梭的效果，长按还会加速，有一种说不出来的感觉，大家可以去体验一下哦

还有一个就是对置顶文章部分进行了优化，原版就是单纯增加了一个回形针按钮，新版则是单独增加了一个置顶文章部分，多个置顶文章时会堆叠显示，会自动切换，也可以手动切换，与此同时，在置顶文章边上有一个随机文章跳转的按钮，这个功能很常见，这个按钮的ui是参考了其他博客主题的，然后文章随机抽取的动画也是在上方网站的效果里找到的，增加点仪式感，属于是没啥用的小更新~

还有一个更新比较大的就是，站点新增了音乐页面，雪访问其他站点的时候发现很多都配有单独的音乐页面，但是ui的话，雪还是打算自己高一个，至于背景，雪收藏了一个很久的站点，整个站点就只有一直大水母，雪也不记得是什么时候在哪里搜罗的了，只知道这个水母很惊艳，就一直留着，后面发现用来做音乐页面相当适合，于是就有了现在的音乐页面，顺便一提，在底栏有个按钮可以收缩的按钮，收缩之后背景的水母是可以交互的，哼哼，源站也放在这里，大家有喜欢的可以去逛逛：点我跳转水母网页。除了音乐页面，还有一个游戏页面，顶栏的头图是会随着选择的项目更改的，本意是打算做一个类似游戏管理后台的界面的，当时是想放些能直接完的小游戏的，但是感觉会很臃肿，先搁置了，这个页面也不一定会一直在，还要思考一下，取舍取舍

随后就是网站的阻尼感，之前一直不在意这部分，直到遇到一个有阻尼感的站点，就感觉很不一样，那个感觉就很棒，于是给自己的也加了一个，但是感觉，emmmm，差强人意吧，最后是底栏部分的一个贪吃蛇效果，一直觉得底栏部分太单调了，想搞点活在底栏，但是又没啥好想法，也是在浏览网站效果的时候发现一个贪吃蛇效果，觉得可以结合一下，但是效果其实不是很惊艳吧，但聊胜于无，至于该怎么弄，暂时没想法，不过那个底栏分界线，雪看他们有的用哪个动物派对的横幅，雪也行整点花活，但是那个条幅吧，雪想整个和主题适配的，奈何资源太少，没找到，打算自己画吧，那不得猴年马月了，索性先搁置了，什么时候找到了在加上吧

结语

那么本期的内容就到此为止咯，时间过得可真快啊，不知不觉都已经发到第八期了吗，小有成就呢~ 也感谢大家每一期都来捧场，你们的喜欢就是我的动力，哼哼，要休息休息啦，大家看完本期记得去站点导出逛逛哦，更新了不少东西呢~