案例：个人博客

内容站的结构比官网更简单：一栏文章流 + 一点关于作者的信息，剩下的交给排版。本案例演示分类筛选的文章列表、热榜轮播、作者名片与订阅框如何拼成一个完整的博客首页。品牌与文章均为虚构，源码就在本页，可以直接拷走改内容。

用到的组件：EwNavbar · EwTabs · EwArticleCard · EwSection · EwCarousel · EwQuote · EwProfileCard · EwTimeline · EwNewsletter · EwFooter

shanyue.blog新窗口打开

写下来，才算想清楚。

关于前端、设计与慢生活的个人札记，每周更新一至两篇。

7 篇

2026-08-30组件设计

把一个官网拆成 43 个组件的取舍

组件粒度、插槽设计与令牌边界——一次开源组件库 API 设计的完整复盘。

2026-08-12动效

Vue3 指令的工程化实践：以 v-reveal 为例

一个滚动浮现指令，值得写一篇长文：观察器复用、减弱动效与 SSR 兜底。

2026-07-30主题

给博客配明暗主题的正确姿势

CSS 变量重映射 + html.dark 一键切换，一篇讲透双主题的落地方式。

2026-07-28排版

留白是内容的一部分

排版节奏、字重层级与 8px 网格，在长文页面里的具体用法。

2026-07-02配色

从 Clean Navy 谈起：一套克制的配色系统

藏青、粉彩与雾面质感如何共处，以及为什么语义色只需要五种。

2026-06-18生活

山中来信：关于慢生活的一次实验

在山里住满三十天之后，我对「效率」这个词有了新的理解。

2026-05-11效率

咖啡馆写作工具清单（2026 版）

从离线编辑器到噪音耳机，十件让我在咖啡馆写完这本书的东西。

热榜

读者转得最多的三段话

组件文档写得像散文一样克制，抄完首页我就把公司的官网重构了。

一位不愿透露姓名的前端来自读者来信

「留白是内容的一部分」这篇转给了整个设计组，本周例会的议题。

阿澜视觉设计师

每篇都短，但每篇都有可以立刻用上的东西。

何声独立开发者

关于作者

白天写代码，晚上写札记

《把一个官网拆成 43 个组件的取舍》发布

2026-08-12

「动效」专栏开更，第一篇讲 v-reveal

2026-07-02设计

Clean Navy 配色系统长文完稿

搭建要点

博客不需要 Hero：一句 motto + 一句更新频率，比首屏大图更符合内容站的气质。EwSection 的 gap="0" 让标题区与文章流贴在一起。
分类筛选 = EwTabs + computed：Tab 只负责切换状态，列表交给 computed 过滤；右侧的「N 篇」计数让筛选结果可预期。
EwArticleCard 用 tag="a" 让整卡可点：封面缺省时用图标占位底，不用为占位图发愁；hoverable 默认开启上浮。
热榜用 EwQuote 塞进 EwCarousel：读者原话比阅读量数字更有说服力，autoplay 挂 5 秒并自动悬停暂停。
关于区左右分栏：EwProfileCard 讲人，EwTimeline + EwNewsletter 讲更新与订阅，一张 soft 底卡收拢。

关键代码

筛选逻辑全部在一个 computed 里，模板只负责渲染：

vue

<script setup>
import { ref, computed } from 'vue'

const categories = ['全部', '前端', '设计', '随想']
const active = ref('全部')

const filtered = computed(() =>
  active.value === '全部'
    ? posts
    : posts.filter((p) => p.category === active.value)
)
</script>

<template>
  <EwTabs v-model="active" :items="categories.map((c) => ({ label: c, value: c }))" />
  <EwArticleCard
    v-for="p in filtered"
    :key="p.title"
    tag="a"
    :title="p.title"
    :excerpt="p.excerpt"
    :date="p.date"
    :tags="p.tags"
    :icon="p.icon"
  />
</template>

热榜轮播：items 是普通数组，幻灯内容交给作用域插槽：

vue

<EwCarousel :items="hot" :autoplay="5000">
  <template #item="{ item }">
    <EwQuote :quote="item.quote" :author="item.author" :role="item.role" />
  </template>
</EwCarousel>

案例：个人博客 ​