网站阶段性总结

2026-10-13开发,杂谈,总结,分享
## 网站搭建阶段性总结

我构思的blog是一个像素风格的，具体的是偏简约治愈的那一类。所以我想通过border的九宫格的形式去对主题进行美化。期间也学到了很多，比如对于border-image的用法，像素风格如果强行放大算法会进行模糊处理，所以需要添加一个样式解决。

```css
*{
  box-sizing:border-box;
  border: 20px solid transparent;
  border-image: url("@/assets/border.png") 5 fill; 
  image-rendering: pixelated;    //保持像素硬边缘，不进行模糊算法
}
```

这里的这个`border-image: url() 5 fill;`5 fill意思就是上下左右四边，统一向内切 5 个单位把图片**中间区域填进盒子里**，不镂空。



中间也纠结过，要不要画一套特别华丽精致的九宫格边框，后来仔细想了想还是算了。我核心是做纯像素风格博客，没必要跑偏做成蒸汽风、中世纪这类细分风格，太花哨反而喧宾夺主。最后敲定了最简单干净的像素边框，只把四个角做了圆滑处理，简约又贴合主题。



说到像素风格化，字体也是不得不考虑的一点。我原本想使用Minecraft字体来着，怎么说呢，有点太严肃正经了？少了那种亲切俏皮感。所以我选择了汉仪像素11px-u这款字体包。不得不说很灵动。虽说禁止商用，但我的blog也就纯自己用记录一下生活了嘿嘿。字体也遇到过一些麻烦，在font.css导入后，app.vue去引用，结果完全没有效果，后来发现原来是`<style scoped>`私有样式搞的鬼，删掉之后又发现字好小啊。问了ai该如何放大，这个笨蛋ai给我的方案`transform` / `zoom` 都会缩放**整个元素盒子**，甚至它还给我设的2倍。保存的时候我以为我页面报错消失了，其实是太大显示不过来了。不知道为什么， **！important**  强制覆盖所有组件默认字体会这么耗性能，我点路由跳转有时候会失败。



blog正文我是用的markd这个现成的模板，就不用自己去费劲吧啦的把json转HTML了。就是第一次弄的有点丑，没有一点样式，今天好歹给他弄好了，清晰多了。



目前还有两处明显的不足：还没做手机端竖屏适配，这块本来就头疼，上学的时候老师讲适配我就懒得弄，当初布局装不下直接 display 隐藏糊弄过去:(    。另外还有 IE 浏览器适配，都这个年代了基本没人用，干脆直接放弃适配，不浪费多余精力。



还有主页面index的背景，我的计划是弄一个像素版深海环境的动态背景，画了一会，不出所料我选择surrender。只能说困难重重，首先第一个：作为背景素材，他尺寸肯定小不了，工作量也会大大增加。再加上动态，背景上的游鱼，气泡，和色彩，都是需要考量的，关键我自己色彩把控能力本来就差。也没那么多时间去细细画，就弄了个渐变先凑合着用:(  日后再画也不迟！



blog文章压缩包里的blog.js文件依旧没想好加一些什么东西。要不要删了呢？但是我觉得这个可玩性绝对是有的，只是我太笨了。



接下来想要做的是给网站添加一些动态的东西，现在这样实在是太死板了，简约是简约了，就是变得无聊了。。



## 发现一个bug，我的发布时间咋没在文章上显示。

1个小时时间去排查，再问ai。终于搞明白为什么时间都没有显示：、

因为用了 Django 的 `model_to_dict(article)`，它默认不会把自动时间字段放进返回结果里。**`model_to_dict` 只转 “用户填写的字段”** 比如：title、excerpt、tag、sort 这些你手动写的字段会返回。借助ai，手动构造字典，把 `created_at` 加进去了：

`data = { "id": article.id, "title": article.title, "created_at": article.created_at, # 强制返回}`
网站阶段性总结

相关文章
