delkonの网站整体设计思路
在本科期间就动过搭建自己博客的想法，第一个版本是对着知乎上的教程利用Hexo框架搭建的，现在文件夹已经不知道放在哪里了；后来在学习深度学习读到lilianwen的博客的时候发现其博客是使用Hugo框架搭建的，风格非常简约，看完之后心血来潮，也想要实现这样的博客记录自己的学习记录，所以又重头搭建了一遍自己的博客，但是搭建完成之后发现了自己想要的风格不是这种简约的技术风格而是更花里胡哨的风格，于是写了几篇博客之后这个博客网站也不了了之了。这两次搭建的经历都是使用网上现成的模版，搭建过程很是简单，只要配置一系列的文件就OK了，当时自己没有系统了解前端的相关知识，所有的配置都是照搬现有模版，没能DIY出自己喜欢的风格
最近我刚好也在边学相关的前端知识边做前端相关的项目开发，在学习的过程中无意间发现了AIRI的项目文档，是使用Vitepress进行DIY出来的属于该项目的风格，我也刚好在学习与Vue相关的技术栈，往日种种浮上心头，这一次，我一定要DIY属于自己的博客风格。反正就是我又动了重新搭建自己博客的想法，不过这一次的野心要大一些，在Agent赋能的情况下，希望做出的网站不仅仅只有博客功能，还想加入一些乱七八糟的其他功能，于是就有了现在看到的网站
网站布局
现有的网站前端排布框架大致如下，全局通用组件Header和Liive2D会在每个页面上展示，其余页面独立展示
网站CSS规范
为了规范自建博客的网站样式设计，本网站通过 全局 CSS 文件 统一管理整体视觉主题，例如主色体系、Markdown 内容渲染后的字体规范、字号层级、基础排版、通用间距以及常见交互风格等，并将高频使用的设计值进一步抽象为 CSS 变量，以便在不同页面与组件之间进行统一复用，从而保证网站在视觉表现上的整体性、一致性与可维护性
在此基础上，网站再通过 局部样式 对具体组件或模块内部的个性化表现进行细化处理，例如卡片、按钮、导航栏、文章目录、评论区等局部结构的样式调整与细节优化。这样的组织方式使网站能够在保持全站视觉统一的前提下，使不同页面和功能模块仍具备合理的差异化表达能力
实际开发过程中，局部样式还结合了 UnoCSS 的方式使用，在 HTML 中直接完成部分简洁、明确且具有一次性特征的样式定义，从而有效减少重复编写完整 CSS 的工作量，提升开发效率，并在整体规范性与局部灵活性之间取得较好的平衡
网站HTML规范
本网站在组织 HTML 布局时，采用了基于层级职责的划分方式来界定各部分的作用。若某一层主要承担元素排列、空间分配、对齐控制以及间距管理等职责，则可将其视为布局容器层；若某一层更侧重于组件自身的视觉表现、内部结构组织及状态变化，则应归入组件自身层。基于这一原则，样式通常沿着页面层 → 区域层 → 组合层 → 组件层逐级下沉：上层负责处理模块之间的外部关系与整体布局，下层负责定义组件本身的结构细节与内部实现。与此同时，对于一些关键的块级元素，即使当前尚未分配具体样式，也会预留对应的 class 作为结构句柄，以便后续能够更清晰地识别其语义边界、作用范围以及样式扩展位置
<script setup lang="ts">
// 类型定义
interface Post {
id: number
title: string
desc: string
cover: string
}
// 数据定义，通常放在 Page / Section 层
const posts: Post[] = [
{
id: 1,
title: 'Post 1',
desc: 'This is a demo description...',
cover: 'https://picsum.photos/400/200?1'
},
{
id: 2,
title: 'Post 2',
desc: 'This is a demo description...',
cover: 'https://picsum.photos/400/200?2'
},
{
id: 3,
title: 'Post 3',
desc: 'This is a demo description...',
cover: 'https://picsum.photos/400/200?3'
}
]
</script>
<template>
<!-- 页面层 -->
<main class="page">
<header class="page-title">
Blog
</header>
<!-- 区域层 -->
<section class="blog-section">
<!-- 组合层：控制卡片列表的排列方式 -->
<div class="post-grid">
<!-- 组件层：单个文章卡片的视觉和内部结构 -->
<article
v-for="post in posts"
:key="post.id"
class="post-card"
>
<img
:src="post.cover"
:alt="post.title"
class="post-card__cover"
/>
<h3 class="post-card__title">
{{ post.title }}
</h3>
<p class="post-card__desc">
{{ post.desc }}
</p>
</article>
</div>
</section>
</main>
</template>
<style scoped>
/* 页面层：控制页面整体宽度与留白 */
.page {
max-width: 72rem;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-title {
font-size: 1.5rem;
font-weight: 700;
}
/* 区域层：控制页面区块间距 */
.blog-section {
margin-top: 2.5rem;
}
/* 组合层：控制卡片列表的排列方式 */
.post-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* 组件层：单个卡片的视觉和内部布局 */
.post-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease;
}
.post-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.post-card__cover {
width: 100%;
height: 10rem;
object-fit: cover;
border-radius: 0.5rem;
}
.post-card__title {
font-size: 1.125rem;
font-weight: 600;
}
.post-card__desc {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 响应式：中屏两列 */
@media (min-width: 768px) {
.post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 响应式：大屏三列 */
@media (min-width: 1024px) {
.post-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>网站内部逻辑
现有网站的核心逻辑主要围绕博客功能展开，其中最关键且相对复杂的部分是以 Blogs 中的数据模型 Post 为核心进行内容组织与展示。其余功能则按页面维度进行拆分，实现相对独立的模块化结构
其中，Tags 页面会基于 Post 中的标签信息，对 Blogs 页面内容进行筛选与聚合展示。全局通用组件作用于所有页面，而部分功能则具有明显的页面特定性。例如，Header 中的 SearchBox 仅针对 Blogs 页面内容进行搜索；Live2D 的对话内容则会根据不同 Post 对应的仓库信息动态变化
搭建网站工具
Agent Skill
- UI UX Pro Max：该 skill 内置多种风格知识库，可根据用户的文字描述，从中匹配并生成最接近的设计风格
- Awesome DESIGN.md：用于还原指定网页的整体风格与 UI 效果，实现高还原度的界面构建
设计工具
- 苹果开机字母 SVG 图像生成网站：可生成类似苹果设备新机开启时动画风格的字母 SVG 图像
- PNG图像背景透明化网站：支持自动去除背景颜色较为简单的PNG图片背景，一键生成透明背景图像