chore: update readme, friend link

BREAKING CHANGE: `header.text` -> `header->showTitle` in app.config.ts
L33Z22L11 · Jan 29, 2025 · 9eca7e5 · 9eca7e5
1 parent 38427a8
commit 9eca7e5
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -9,15 +9,17 @@
 
 我的第三代个人博客，于 2024 年 8 月 11 日上线。
 
-## 预览
+## 使用本主题的博客
 
-https://blog.zhilu.cyou
+- [纸鹿摸鱼处 @L33Z22L11](https://blog.zhilu.cyou/) · [开发经历](https://blog.zhilu.cyou/2024/blog-using-nuxt)
+- [希乐博客 @Xlenco](https://blog.xlenco.top/)
+- [SteinsNote @Labmem-00](https://blog.labmem.chat/) · [迁移经历](https://blog.labmem.chat/2024/beforeeverything)
+- [月空人 @Whbbit1999](https://whbbit.cn/) · [迁移评价](https://whbbit.cn/2025/why-migrate-to-nuxt)
+- [地球驿站 @mugzx](https://blog.mugzx.top/) · [迁移记录](https://blog.mugzx.top/)
 
 ## 特性
 
-> [!Tip]
->
-> 请阅读 [在线文档](https://blog.zhilu.cyou/theme) 或 [仓库源文件](/content/theme.md)。
+[主题特性](https://blog.zhilu.cyou/theme) · [组件示例](https://blog.zhilu.cyou/previews/example)
 
 ## 目录结构
 

diff --git a/app/app.config.ts b/app/app.config.ts
@@ -70,7 +70,8 @@ export default defineAppConfig({
 
     header: {
         logo: 'https://weavatar.com/avatar/47c0f2e82b76d9b10eb3023df9e02e4e3fdbeaf5b74b842063f207971e7fbe7b?s=160',
-        text: true,
+        /** 展示标题，否则展示纯 Logo */
+        showTitle: true,
         subtitle: blogConfig.subtitle,
         emojiTail: ['📄', '🦌', '🙌', '🐟', '🏖️'],
     },

diff --git a/app/components/content/FeedCard.vue b/app/components/content/FeedCard.vue
@@ -8,9 +8,9 @@ const domainIcon = computed(() => getDomainIcon(props.link))
 
 <template>
     <HoverCardRoot>
-        <HoverCardTrigger class="feed-card gradient-card" :href="link">
+        <HoverCardTrigger class="feed-card gradient-card" :href="error ? undefined : link" :data-error="error">
             <div class="avatar">
-                <NuxtImg :src="avatar || icon" :alt="author" loading="lazy" :title="feed ? undefined : '无订阅源'" />
+                <NuxtImg :src="avatar ?? icon" :alt="author" loading="lazy" :title="feed ? undefined : '无订阅源'" />
                 <Icon v-if="!feed" class="no-feed" name="ph:bell-simple-slash-bold" />
             </div>
             <span class="name">{{ author }}</span>
@@ -19,7 +19,7 @@ const domainIcon = computed(() => getDomainIcon(props.link))
         <HoverCardPortal>
             <HoverCardContent side="top" class="card-content">
                 <div class="site-content">
-                    <NuxtImg class="site-icon" :src="icon" :alt="title" />
+                    <NuxtImg class="site-icon" :src="icon" :alt="title ?? sitenick ?? author" />
                     <div class="site-info">
                         <h3>{{ title ?? sitenick ?? author }}</h3>
                         <code class="domain" :title="getDomainType(mainDomain)">
@@ -36,7 +36,7 @@ const domainIcon = computed(() => getDomainIcon(props.link))
                     <div class="date">
                         {{ date }}
                     </div>
-                    <p>{{ desc }}</p>
+                    <p>{{ error ?? desc }}</p>
                     <p v-if="comment">
                         <Icon name="ph:chat-centered-dots-bold" /> {{ comment }}
                     </p>
@@ -62,6 +62,11 @@ const domainIcon = computed(() => getDomainIcon(props.link))
         transform: translateY(-2px);
     }
 
+    &[data-error] {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
     .avatar {
         position: relative;
         margin: 0 0.5rem 0 0;

diff --git a/app/components/zhilu/Header.vue → app/components/zhilu/ZhiluHeader.vue b/app/components/zhilu/Header.vue → app/components/zhilu/ZhiluHeader.vue
@@ -16,10 +16,10 @@ const appConfig = useAppConfig()
         <NuxtImg
             :src="appConfig.header.logo"
             class="zhilu-logo"
-            :class="{ 'with-text': appConfig.header.text }"
+            :class="{ circle: appConfig.header.showTitle }"
             :alt="appConfig.title"
         />
-        <div v-if="appConfig.header.text" class="zhilu-text">
+        <div v-if="appConfig.header.showTitle" class="zhilu-text">
             <div class="header-title">
                 <span
                     v-for="(char, charIndex) in appConfig.title"
@@ -51,7 +51,7 @@ const appConfig = useAppConfig()
 .zhilu-logo {
     height: 3em;
 
-    &.with-text {
+    &.circle {
         aspect-ratio: 1;
         border-radius: 2em;
         box-shadow: 2px 4px 1rem var(--ld-shadow);

diff --git a/app/friends.ts b/app/friends.ts
@@ -11,7 +11,7 @@ export default <FeedGroup[]>[{
         desc: '一个什么都可能会写的博客',
         link: 'https://gug.thisis.host/',
         feed: 'https://gug.thisis.host/atom.xml',
-        icon: 'https://unavatar.webp.se/gug.thisis.host',
+        icon: 'https://unavatar.webp.se/gug.thisis.host?w',
         avatar: 'https://cdn.libravatar.org/avatar/646331bff8f19a0e05679c3cc0fc54d6?s=160',
         archs: ['Hexo', 'Netlify'],
         date: '2024-01-29',
@@ -57,7 +57,7 @@ export default <FeedGroup[]>[{
         desc: '我崇拜流浪、变化和幻想',
         link: 'https://eees.blog/',
         feed: 'https://eees.blog/atom.xml',
-        icon: getGhAvatar('Evereen2023', { preset: 'icon' }),
+        icon: 'https://img.miasite.com/local/api/1/2024/12/EEES.png',
         avatar: getGhAvatar('Evereen2023'),
         archs: ['Hexo', 'Vercel'],
         date: '2024-12-09',
@@ -215,8 +215,7 @@ export default <FeedGroup[]>[{
         title: '云间的小小世界',
         desc: '顺着风的方向',
         link: 'https://yunjianworld.fun/',
-        // feed: 'https://yunjianworld.fun/atom.xml',
-        icon: 'https://q1.qlogo.cn/g?b=qq&nk=2098600899&s=3',
+        icon: 'https://yunjianworld.fun/img/fluid.png',
         avatar: 'https://q1.qlogo.cn/g?b=qq&nk=2098600899&s=4',
         archs: ['Hexo', 'Zebaur'],
         date: '2024-11-14',
@@ -232,7 +231,7 @@ export default <FeedGroup[]>[{
         desc: '愿多年以后，我可以酌一杯清酒，烂醉如泥，梦中回到我们的曾经。',
         link: 'https://colsrch.cn/',
         feed: 'https://colsrch.cn/atom.xml',
-        icon: 'https://unavatar.webp.se/colsrch.cn',
+        icon: 'https://unavatar.webp.se/colsrch.cn?w',
         avatar: 'https://7.isyangs.cn/1/657976c27bea6-1.png',
         archs: ['Hexo', '国内 CDN'],
         date: '2024-02-01',
@@ -288,7 +287,7 @@ export default <FeedGroup[]>[{
         desc: '愿岁并谢，与友长兮',
         link: 'https://blog.kouseki.cn/',
         feed: 'https://blog.kouseki.cn/rss.xml',
-        icon: 'https://wsrv.nl/?url=blog.kouseki.cn/imgs/avatar.webp&w=96&mask=circle',
+        icon: 'https://blog.kouseki.cn/favicon.ico',
         avatar: 'https://blog.kouseki.cn/imgs/avatar.webp',
         archs: ['Hexo', '国内 CDN'],
         date: '2024-03-01',
@@ -322,7 +321,7 @@ export default <FeedGroup[]>[{
         desc: '无限进步.🎈',
         link: 'https://linsnow.cn/',
         feed: 'https://linsnow.cn/index.xml',
-        icon: 'https://linsnow.cn/favicon.ico',
+        icon: 'https://unavatar.webp.se/linsnow.cn?w',
         avatar: getGhAvatar('lin-snow'),
         archs: ['Hugo', '服务器'],
         date: '2024-02-14',
@@ -362,7 +361,7 @@ export default <FeedGroup[]>[{
         desc: 'Blogger / Technophile / Student',
         link: 'https://kegongteng.cn/',
         feed: 'https://kegongteng.cn/atom',
-        icon: 'https://zh.yuazhi.cn/yellow.png',
+        icon: 'https://kegongteng.cn/favicon.ico',
         avatar: 'https://bu.dusays.com/2023/12/23/65867c3357bb6.jpg',
         archs: ['Gridea', 'Vercel'],
         date: '2024-02-25',
@@ -392,7 +391,7 @@ export default <FeedGroup[]>[{
     }, {
         author: '浪海导航',
         link: 'https://www.langhai.net/',
-        icon: 'https://www.langhai.net/assets/images/langhai-logo.ico',
+        icon: 'https://www.langhai.net/assets/images/langhai-logo.png',
         avatar: 'https://www.langhai.net/assets/images/langhai-logo.png',
         archs: ['Hugo', 'Cloudflare'],
         date: '2024-06-04',
@@ -402,7 +401,7 @@ export default <FeedGroup[]>[{
         desc: '用心享受生活',
         link: 'https://blog.awaae001.top/',
         feed: 'https://blog.awaae001.top/atom.xml',
-        icon: 'https://unavatar.webp.se/blog.awaae001.top',
+        icon: 'https://unavatar.webp.se/blog.awaae001.top?w',
         avatar: 'https://image.m-c.top/?/images/2024/01/13/Pqeh0v6VaK/ico.jpg',
         archs: ['Hexo', '国内 CDN'],
         date: '2024-06-05',
@@ -432,7 +431,7 @@ export default <FeedGroup[]>[{
         author: '太阳可以是蓝色',
         desc: 'Live and learn. 🌱',
         link: 'https://blog.mletter.cn/',
-        icon: 'https://gravatar.loli.net/avatar/383deee9b38a9dd8e428797a3a0c7f0d',
+        icon: 'https://blog.mletter.cn/wechat.svg',
         avatar: 'https://img13.360buyimg.com/ddimg/jfs/t1/239095/17/9691/19853/664d82dfF34a0990c/c4198876146be2d4.jpg',
         archs: ['Hexo', 'Netlify'],
         date: '2024-07-11',
@@ -456,7 +455,7 @@ export default <FeedGroup[]>[{
         desc: '初阅不明言外意，重温方觉字中情',
         link: 'https://blog.365sites.top/',
         feed: 'https://blog.365sites.top/rss.xml',
-        icon: 'https://blog.365sites.top/upload/avatar.png',
+        icon: getGhAvatar('Winner365-China', { preset: 'icon' }),
         avatar: 'https://blog.365sites.top/upload/avatar.png',
         archs: ['Halo', 'Cloudflare'],
         date: '2024-07-14',
@@ -489,7 +488,7 @@ export default <FeedGroup[]>[{
         desc: '互联网中的静谧之地',
         link: 'https://blog.xlenco.top/',
         feed: 'https://blog.xlenco.top/atom.xml',
-        icon: 'https://weavatar.com/avatar/67254b346498965226e5c91ebff66a69570b97f224d2d061e504b4eade1f00fa?s=96',
+        icon: 'https://weavatar.com/avatar/67254b346498965226e5c91ebff66a69570b97f224d2d061e504b4eade1f00fa',
         avatar: 'https://q1.qlogo.cn/g?b=qq&nk=1043865083&s=4',
         archs: ['Nuxt', 'Vercel'],
         date: '2024-07-28',
@@ -534,7 +533,7 @@ export default <FeedGroup[]>[{
         desc: '但愿日子清静抬头遇见的满是柔情',
         link: 'https://blog.bsgun.cn/',
         feed: 'https://cdn.bsgun.cn/Hexo-static/img/favicon.ico',
-        icon: 'https://unavatar.webp.se/blog.bsgun.cn',
+        icon: 'https://unavatar.webp.se/blog.bsgun.cn?w',
         avatar: 'https://oss-cdn.bsgun.cn/logo/avatar.256.png',
         archs: ['Hexo', '国内 CDN'],
         date: '2024-08-20',
@@ -566,8 +565,8 @@ export default <FeedGroup[]>[{
         link: 'https://linexic.top/',
         feed: 'https://linexic.top/atom.xml',
         icon: 'https://linexic.top/logo.png',
-        avatar: 'https://linexic.top/logo.png',
-        archs: ['Jekyll', 'Cloudflare'],
+        avatar: 'https://linexic.top/avatar.webp',
+        archs: ['Hexo', 'Vercel'],
         date: '2024-10-02',
         comment: '前端学习，高中生活。',
     }, {
@@ -598,10 +597,11 @@ export default <FeedGroup[]>[{
         desc: '前端学习笔记分享、小白都能看懂的笔记',
         link: 'https://note.noxussj.top/?s=y9',
         icon: 'https://note.noxussj.top/logo.png',
-        avatar: 'https://note.noxussj.top/logo.png',
+        avatar: getGhAvatar('noxussj2'),
         archs: ['VitePress', '国内 CDN'],
         date: '2024-10-23',
         comment: '前端学习笔记。',
+        error: '2024年12月起无法访问 (504)',
     }, {
         author: 'Redish101',
         title: 'Redish101 Blog',
@@ -620,7 +620,7 @@ export default <FeedGroup[]>[{
         desc: '一个属于自己的云朵。',
         link: 'https://pinpe.top/',
         feed: 'https://blog.pinpe.top/feed/',
-        icon: 'https://blog.pinpe.top/wp-content/uploads/2024/09/cropped-b_1fd3d971c1071befe3dd1d748ce3aa46-32x32.jpg',
+        icon: 'https://blog.pinpe.top/wp-content/uploads/2025/01/cropped-b_4807379e998d36def2d307c2b65a7a39-32x32.jpg',
         avatar: 'https://pinpe.top/head.jpg',
         archs: ['WordPress', '虚拟主机'],
         date: '2024-10-31',
@@ -651,8 +651,8 @@ export default <FeedGroup[]>[{
         desc: '撷光以望，纳星于瞳',
         link: 'https://blog.667408.xyz/',
         feed: 'https://blog.667408.xyz/atom.xml',
-        icon: 'https://blog.667408.xyz/favicon.ico',
-        avatar: 'https://blog.667408.xyz/favicon.ico',
+        icon: getGhAvatar('catxian', { preset: 'icon' }),
+        avatar: getGhAvatar('catxian'),
         archs: ['Hexo', 'Cloudflare'],
         date: '2024-11-07',
         comment: 'Hexo博客折腾，技术分享。',
@@ -661,8 +661,8 @@ export default <FeedGroup[]>[{
         desc: '自知之明是最可贵的知识！',
         link: 'https://blog.tianli0.top/',
         feed: 'https://blog.tianli0.top/rss.xml',
-        icon: 'https://q1.qlogo.cn/g?b=qq&nk=507249007&s=3',
-        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=507249007&s=4',
+        icon: getGhAvatar('tianli0', { preset: 'icon' }),
+        avatar: getGhAvatar('tianli0'),
         archs: ['VitePress', '国内 CDN'],
         date: '2024-12-04',
         comment: '技术学习笔记，TianliGPT开发者。',

diff --git a/app/subscriptions.ts b/app/subscriptions.ts
@@ -40,7 +40,7 @@ export default <FeedGroup[]>[{
         link: 'https://myth.cx/',
         feed: 'https://myth.cx/index.xml',
         icon: 'https://myth.cx/favicon.ico',
-        avatar: 'https://myth.cx/img/avatar_hu4881e27882f65e048194c2e8319e9874_294915_300x0_resize_box_3.png',
+        avatar: 'https://myth.cx/img/avatar_hu_a008ef868a8cf25a.png',
         archs: ['Hugo', 'Cloudflare'],
         date: '2024-04-11',
     }, {

diff --git a/app/types/feed.ts b/app/types/feed.ts
@@ -11,7 +11,7 @@ export interface FeedEntry {
     link: string
     /** 订阅源 */
     feed?: string
-    /** 站点小图标，不建议为方形 */
+    /** 站点小图标 */
     icon: string
     /** 个人头像，为空则使用站点图标 */
     avatar: string
@@ -21,6 +21,8 @@ export interface FeedEntry {
     date: string
     /** 博主备注 */
     comment?: string
+    /** 错误信息 */
+    error?: string
 }
 
 export interface FeedGroup {

diff --git a/content/previews/example.md b/content/previews/example.md
@@ -8,7 +8,7 @@ updated: 2024-11-18 09:26:38
 
 Nuxt Content 使用 Markdown 语法和约定来提供丰富的文本编辑体验。它使用自定的 MDC 语法（[文档](https://content.nuxt.com/usage/markdown)），可以让你在 Markdown 中使用 Vue 组件，并支持多种 remark 扩展。
 
-也许要看到[本页源码](https://github.com/L33Z22L11/blog-v3/blob/main/content/previews/example.md)才能领会到这种语法的特性，[就像**这样**——]{.example-info #just-like-this style="color: #00bb66"}，或是主题介绍页面的组件入口卡片那样。
+也许要看到 [本页源码](https://github.com/L33Z22L11/blog-v3/blob/main/content/previews/example.md) 才能领会到这种语法的特性，[就像**这样**——]{.example-info #just-like-this style="color: #00bb66"}，或是主题介绍页面的组件入口卡片那样……确定不对照源码阅读吗？
 
 ## 内容组件样式示例
 
@@ -96,7 +96,7 @@ feature: |
 
 #### 表格 `ProseTable`
 
-> 打算做表头滚动吸附，但还未实现。目前支持表格横向滚动或自动换行的切换。
+> 支持表格横向滚动或自动换行的切换。
 
 | 表头滚动吸附 | 滚动时边缘羽化 | 如果标题或内容很 loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog | 这里还有一列，但是是空内容 |
 | :----------- | :------------- | :-------------------------------------------------------------------------------- | :------------------------- |
@@ -400,9 +400,15 @@ id: BV1Yr421p7rW
 ---
 ::
 
+#### ZhiluHeader
+
+:zhilu-header
+
+鼠标悬浮时的动画 Emoji `📄🦌🙌🐟🏖️` 对应“纸鹿摸鱼处”的汉字，字体由 `阿里妈妈方圆体` 分割而来。
+
 ## 组件使用方法
 
-一是看开头提到的 MDC 文档，至关重要。二是看这篇文章的源代码，也很重要。三是看我文章的调用方式，没有就慎用。
+一是看开头提到的 MDC 文档，至关重要。二是看这篇文章的源代码 (`example.md`)，也很重要。三是看我文章的调用方式，没有就慎用。
 
 ### 组件的不完美性
 

diff --git a/content/theme.md b/content/theme.md
@@ -40,10 +40,10 @@ github:
 ---
 title: 组件样式示例
 link: /previews/example
-style: { background: var(--c-primary-soft) }
+class: gradient-card active
 ---
 #icon
-[**看就对了**]<br>👉👉🎨
+**看就对了**<br>👉👉🎨
 ::
 
 ## 主题特性
@@ -59,13 +59,14 @@ style: { background: var(--c-primary-soft) }
 ## 开源衍生
 
 - 灵感源自 [xaoxuu/hexo-theme-stellar](https://github.com/xaoxuu/hexo-theme-stellar)，这是一个经过精致设计的简洁 Hexo 主题。
-- 为 :tip[许多项目]{tip="真的有不少！"} 提供样式灵感。
+- 为 :tip[许多朋友的博客项目]{tip="真的有不少！"} 提供样式灵感。
+- 项目被多人用作个人博客，详见 [`README.md`](https://github.com/L33Z22L11/blog-v3)。
 
-### 部署
+### 使用
 
-自用项目，目前已经开源。修改需要具备一定的前端开发知识，可阅读项目的 `README.md` 文件。
+自用项目，目前已经开源。修改需要具备一定的前端开发知识，请阅读 `README`。
 
-## 开发过程
+### 开发过程
 
 ::link-banner
 ---
@@ -82,12 +83,13 @@ link: /2024/blog-using-nuxt
   - **前端框架**：Nuxt 3
   - **开发语言**：TypeScript + Vue 3 + Scss
 - 内容与服务
-  - **内容管理**：Nuxt Content
+  - **内容管理**：Nuxt Content V2
   - **部署平台**：Vercel
   - **评论系统**：Twikoo
-  - **数据库**：MongoDB
+  - **评论数据库**：MongoDB
   - **包管理器**：pnpm
 - 功能模块
+  - **无头组件库**：Radix Vue
   - **状态管理**：Pinia
   - **图标管理**：Nuxt Icon
   - **SEO优化**：Nuxt SEO

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zhilu-blog",
   "type": "module",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {