blog开发历程
blog由来(?
建立blog其实只是一时兴起吧,总的来说是先有域名再有blog的 一定不是因为有了域名之后觉得空着好浪费才建的
至于为什么要没事买个贵的要死的14刀每年的.moe域名,完全是因为太喜欢十夜了生日当天某人提议的给自己买个礼物,想了想就买个域名吧,以后无论要干什么姑且都会用到,.moe听上去好听然后加上自己最喜欢的十夜名字的罗马音toya,就成了现在这个博客所使用的域名
买了之后过了两天,想了想有点心疼价格虽然也是完全没后悔,于是和主前端还做了论坛网站的的朋友(也就是鲲)讨论了要不要在域名上做个什么,最后在鲲的协助下做出了现在这个blog
开发过程(大概会持续更新
24.03
24.03.16 晚 确立建设blog的规划,网页使用
vitepress
框架,静态托管到github pages
,并将域名托管到cloudflare
上24.03.17 凌晨 鲲生成
vitepress
框架模板,pr到网站repo24.03.20 凌晨 将原本纯粹的
vitepress
模板中的主页文字,网页标题等做了替换,右上角github图标指向的链接由默认的 vitepress项目地址 改为 blog的项目地址 ;修改cf配置,强制网站https访问24.03.20 傍晚 添加了网站主题角色 冬月十夜 的介绍文章 ,并在侧栏,顶栏和主页添加该文章地址
24.03.21 凌晨 修改整理article区结构
导致网页的路由改变,在鲲的帮助下给blog添加分别适用于小屏幕和大屏幕的背景图片顺带学习了一轮ps使用以制作背景图,添加背景图的方法为修改#app
的background
相关属性,使用媒体查询@media (max-width: 767px){...}
切换屏幕不同大小使用的背景图,期间鲲提pr帮我把侧栏顶栏等位置的颜色设定为透明让添加了背景图片的网页看起来不会奇怪24.03.22 全天
通过修改一般情况下
.VPNavBar .container
的backdrop-filter
属性为blur(5px)
,使得电脑等大屏幕下顶栏变为毛玻璃样式;以相同的方式修改.VPLocalNav
.VPNavScreen
.VPSidebar
,使得电脑等大屏幕下侧栏也变为毛玻璃样式通过添加
@media (max-width: 960px){...}
,修改屏幕像素小于960px时的--vp-c-bg
--vp-c-bg-alt
属性分别为#fffdf1de
#fffdf1ee
,将小屏幕的顶栏/底栏带上颜色,使得小屏幕的顶栏/底栏展开时看起来不会奇怪依葫芦画瓢,修改
html.dark
下的两张背景图做法方法并不优雅,现在blog有四张背景图文件,还有小屏幕的顶栏/底栏颜色(--vp-c-bg
修改为#1e1f33de
,--vp-c-bg-alt
修改为#1e1f33ee
有人对这点要素察觉吗),实现对深色模式的适配24.03.23 上午 使用ps抠图制作了十夜logo,并添加到网站主页,修改了网站主页字体颜色让视觉效果更佳
自此本blog界面基本完成(大概只是第一版
24.03.24 晚
添加友链,包括Alice Aierlanta,Anthony Summit,鲲,LC,洛华,小月月的blog,还有Miku Meow的github(因为算是特别嘉宾,但他还没建blog,所以先用github顶上了)
在友链文章中补充了对鲲和Miku Meow的感谢
24.04
24.04.07 晚 用新抠的图替换了原本的主页logo,把樱花摸鱼的sd原图里的另一些烟花效果也合并了进去
24.04.16 晚
在课上用平板的obsidian写这篇文章,平板连接不到电脑,于是尝试在github网页上直接把文章push进去,结果commit了两次还是build失败。待排查具体原因,与鲲探讨过后得知这么做应该是完全可行的,不知道其他的什么原因导致的build失败
补上了之前在主页有的technology分区的坑,修改了主页还有顶栏和侧栏,姑且加了一篇文章作为这个分区的入口
有够简陋的,弄了个示例文章作为新坑(大概两天内会把那篇文章写好新增了blog archive(也就是你现在看到的这篇文章),作为blog开发日志
以免我以后看自己的blog的时候都不知道自己之前干了啥24.04.17
上午 修改了
.vp-doc
(其实就是文章页面)的p
ul
元素的line-height
属性以调整行距,还有h2
标题元素的margin-top
margin-bottom
属性以解决文章中标题前后间距过大问题下午 添加了listder的blog为友链
24.04.20 下午 更新了
pnpm
,vitepress
版本,顺便设置了package-manager-strict
为false以忽略版本检查,这样一来本地部署就方便些了24.04.27 晚 添加了关琪,toshiki的blog为友链
24.04.28 中午 toshiki将他blog的友链展示页面的实现给了我,并帮我规范化了项目结构,给我的blog提了pr;在此之上,我将友链的展示方式彻底替换为toshiki提供的样式,现在展示出来的页面就好看多了
24.05 ~ 24.07
24.05.02 中午 添加了saltedfishes的blog为友链
是第一个通过邮箱联系添加了友链的人呢24.06.30 上午 暂时撤下saltedfishes的blog友链
24.07.23 晚上 将记录在本地的笔记完善总结后,分解为三个板块 “Linux 常用软件的安装与设置笔记集” “Linux 系统基本功能使用笔记集” “系统修复笔记集” 作为blog文章发布
实际耗时一周有余
24.08 ~ 24.10
24.08.16 下午
更新了MikuMeow的友链链接
“Linux 系统基本功能使用笔记集” 更新
24.08.24 上午 恢复saltedfishes的blog友链
24.10.26 晚上 添加了岱中鹏的blog为友链
目前blog存在的issues&ToDoList
首先当然就是背景图的问题,由于完全不会前端,现在必须得有四张背景图,也就是大屏幕/小屏幕和亮色/暗色四项排列组合的四种情况各需要一张,后续学会了用css遮罩的话可以减少到两张
友链页面目前的展示方式有点过于简陋了,后续会想办法把头像以圆形的形式展示,并把名字,头像,social links放在一个框里以卡片的形式展示已解决!虽然是toshiki帮我修改然后pr了一个他自己的实现才做到的。。之后尝试下自己写个实现吧about me不知道该写啥
一定不是因为懒,写少了没感觉写多了怕追踪,先留着吧反正知道我blog的人不可能没在其他地方看到过我冬月十夜的介绍页,想整个音乐播放器,放樱花摸鱼中十夜的主题曲《さくらいろのせかい》
目前文章代码块的背景和
---
表示的分割线颜色都为透明,导致文章可读性受到了些影响,后续要选取一个适合的颜色补上