guide/blog/

[giscus[bot]]

guide/blog/

概述 主题默认启用 博客功能，通常您无需进行额外的配置。 主题默认会将 {sourceDir} 目录下的，除了一些特定的目录（如 notes 目录将作为笔记所在目录）， 所有 md 文件作为博客文章。 同时，主题会生成一个 链接地址为 /blog/ 的 博客文章列表页。 展示所有的博客文章，以及 博主的相关信息。 国际化支持 如果启用了 国际化，那么博...

https://plume.pengzhanbo.cn/guide/blog/

[SaturnTsen]

图像类的静态资源需要放在哪里呢？

[pengzhanbo]

可以参考这个文档：VuePress 静态资源

[tianhairui]

博主好，profile 属性中的 avatar 参数，对应的头像图片放置在了docs目录下，并设置该参数值为 /blogger.png ，但刷新后未能正确加载，是我放置错地方了吗？我理解的 / 这个根目录，是{sourceDir}，对应的是 docs 目录，不知是否理解的有误。

[pengzhanbo]

VuePress 静态资源 。
对于静态资源而言，/ 绝对路径指向的是 .vuepress/public 目录。

[tianhairui]

感谢作者，研究了2天，终于解决，该主题，真的超赞~~

[ChGoh7]

博主大大好，非常喜欢这种风格的主题。
最近发现博客的目录生成貌似有bug，比如我想弄个日记分类的博客:
目录结构为Dailydiary/2024/8/xxxx.md，在分类展示里中2024显示成了Dailydiary/4/8/xxxx.md
改为Dailydiary/2024年/8/xxxx.md，显示Dailydiary/年/8/xxxx.md，感觉很奇怪，可以看一下吗

[pengzhanbo]

已排查到问题，是由于目录名解析存在错误导致，将在下个版本中修复。

[ChGoh7]

感谢 ☺️

[dingyuqi]

我在config.ts文件中试图配置统一的封面图布局, 但是似乎遇到了问题. 我的编辑器在postCover处出现了红色波浪线, 并提示我: Object literal may only specify known properties, and 'postCover' does not exist in type 'PlumeThemeBlog'.ts(2353)

我的代码如下:

import { defineUserConfig } from 'vuepress'
import { viteBundler } from '@vuepress/bundler-vite'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  base: '/',
  lang: 'zh-CN',
  locales: {
    '/': {
      title: 'Keep It Simple',
      lang: 'zh-CN',
      description: 'The goal is to explain computer knowledge in simple and easy-to-understand way.',
    },
    '/en/': {
      title: 'Keep It Simple',
      lang: 'en-US',
      description: 'The goal is to explain computer knowledge in simple and easy-to-understand way.',
    },
  },

  bundler: viteBundler(),

  theme: plumeTheme({
    blog: {
      // 配置 封面图 布局位置
      // postCover: 'left', // 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
      postCover: {
        layout: 'left',
        ratio: '16:9',
        width: 300,
        compact: true
      }
    },
    // 添加您的部署域名
    hostname: 'https://dingyuqi.com',
    plugins: {
      /**
       * Shiki 代码高亮
       * @see https://theme-plume.vuejs.press/config/plugins/code-highlight/
       */
      // shiki: {
      //   languages: ['shell', 'bash', 'typescript', 'javascript'],
      //   twoslash: true,
      // },

      /**
       * markdown enhance
       * @see https://theme-plume.vuejs.press/config/plugins/markdown-enhance/
       */
      markdownEnhance: {
        demo: true,
      //   include: true,
      //   chart: true,
      //   echarts: true,
        mermaid: true,
        figure: true,
      //   flowchart: true,
      },

      /**
       *  markdown power
       * @see https://theme-plume.vuejs.press/config/plugin/markdown-power/
       */
      // markdownPower: {
      //   pdf: true,
      //   caniuse: true,
      //   plot: true,
      //   bilibili: true,
      //   youtube: true,
      //   icons: true,
      //   codepen: true,
      //   replit: true,
      //   codeSandbox: true,
      //   jsfiddle: true,
      //   repl: {
      //     go: true,
      //     rust: true,
      //     kotlin: true,
      //   },
      // },
    },
    
  }),
})

[pengzhanbo]

该功能在 rc.101 版本中提供支持。如果版本号没有问题，那么可能是 编辑器的 ts 缓存没有刷新。可以通过 重启编辑器刷新缓存，或者如果是 vscode ，在快捷指令搜索里面搜索 Typescript: Restart TS Server 重启下 TS 服务。

[liuzhemax]

theme: plumeTheme({
// 添加您的部署域名
// hostname: 'https://your_site_url',
profile: {
name: '阿哲',
description: '强大自己是解决问题的唯一办法',
avatar: '/blogger.png',
circle: true, // 是否为圆形头像
layout: 'right', // 个人信息在左侧还是右侧，'left' | 'right'
},
}),

博主好，在config.ts加入这段的配置，作者，描述，头像等个人信息并没有更新呢，还是用的默认的呢，是什么原因？

[pengzhanbo]

如果你的使用 create-vuepress-theme-plume 创建的项目，那么应该在 .vuepress/plume.config.ts 中修改 profile。

[liuzhemax]

好的，已解决，谢谢

[ChGoh7]

作者，总觉得博客相关功能总感觉少了一点什么，考虑未来会有有如下功能吗：

主要是：
单个博客页面左边导航栏当前是空缺的，可以利用于：
展示相关文章功能（和当前页面博客的标签或者和分类有关的文章）
展示最近更新文章（某段时间的文章，如果可配置就更好了）
相信这样可以增加博客文章之间的联系，更利于碎片知识之间建立联系

其次：
专栏展示功能（想法类似于对某个问题或者想法的一系列持续文章将它做成一个专栏。同时具有普通文章，专栏类型博客文章才在专栏页进行展示，）

然后就是有没有修改归档页的配置，归档页单个文章样式感觉有点太大了，可以就纯粹弄成超链接的形式吗，比较省空间一点看起来也舒服，时间线或者列表的样式

2024

• 10-11 xxx
• 10-10 xxx
• 10-9 xxx
  以及标签的展示，颜色比较多，简单来说就是会额外花费精力注意到颜色而不是内容，可以单独做成和主题一样的颜色吗，或者说提供一个配置，可能有人喜欢原来的

最后，做产品确实是一个不断迭代和改进的过程。好的产品往往不是一开始就完美的，而是通过不断的反馈、测试和优化来逐步完善的。如果和作者的设计理念相违，就可以作为一些独特的想法看待。

[pengzhanbo]

我对于页面的布局相对来说是比较克制的，看我过往的对于主题的更新可以发现，我大多数的更新都是在 增强文章内容的表现能力。对于在布局上增加更多的功能区域则相对克制很多，这与我比较喜欢 少即是多 的设计理念有关，我更喜欢尽可能的让最重要的文章内容表现能力更加丰富，同时减少与文章内容弱关联的功能带来的对于阅读的影响，我更看重的是聚焦于内容，而非将注意力分散出去。

像 相关文章、最近更新文章 等在我看来属于分散注意力的功能，可能未来会做，但优先级必然不会高。

专栏功能 这个场景其实已经被 notes 这个功能覆盖了，notes 我设计它的初衷就是做 系列文章、知识笔记、产品文档等这种 文章之间强关联的场景。博客仅是用于碎片化的文章的整合，notes 也不会收录到博客中。之前我也有考虑过是否需要有一个单独的页面展示所有的 notes 列表，但最终发现还不如将它们交给用户自行配置到 导航栏中。

归档页的间距可以调整收窄，但不会把 日期提到标题之前，这么做会显得中间太空洞了，而且日期也并不是关注的重点。

标签颜色这个可以新增配置来 设置为 单个色的。

[ChGoh7]

👍 嗯，期待着新的版本

[Jackpanger]

博主好，我看到除了博客有标签，您在文档/知识笔记中也使用了标签。比如这篇文章的标签是指南,快速开始，但是好像没有检索功能。左上角搜索快速开始是找不到这篇文章的。请问以后会添加类似功能吗？还是说我理解有误。

[pengzhanbo]

文档/知识笔记 中的标签仅是作为展示，但不会加入检索功能，不会放到 标签页中。这和 博客类型的文章中的标签是不同的。
文档/知识笔记 并不是碎片化的文章，而是作为紧凑的有关联的文章，本身并不需要 标签作为筛选。

[dingyuqi]

我发现所有的表格都是左对齐的, 希望所有的表格都能居中显示.

表格	A

[pengzhanbo]

我不认为表格需要默认居中。
单列可以通过 |:--| |--:| |:--:| 控制对齐方式。
而如果需要整个表格在水平方向上居中，可以通过 自定义样式，覆盖主题的表格的默认样式。

[dingyuqi]

我尝试过自定义对齐的center. 但是似乎对表格并不生效.

::: center
| TID  | 面包 | 牛奶 | 尿布 | 啤酒 | 鸡蛋 | 可乐 |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| 1    | 1    | 1    | 1    | 0    | 0    | 0    |
| 2    | 0    | 1    | 0    | 1    | 0    | 0    |
| 3    | 0    | 0    | 1    | 1    | 1    | 1    |
| 4    | 0    | 1    | 1    | 1    | 0    | 0    |

表1.1
:::

[pengzhanbo]

::: center 容器是作用于文本，并不是 块级元素。
我不确定是否要在主题中实现 flex 系列的容器，它是可以做到给块级元素居中。
给表格居中最简单的方式就是加 CSS：

.vp-doc table {
  display: table;
 margin: 20px auto;
}

[dingyuqi]

我发现使用手机窄屏对网页进行访问的时候, 初次进入博客列表时不会将封面布局强制为top. 但是当点击进入文章再返回列表时所有封面的布局都变为了top. 不知道不同设备上布局的改变是否一定需要点击文章才能够生效.

为了方便排查问题, 附上我的配置:

 blog: {
      // 配置 封面图 布局位置
      // postCover: 'left', // 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
      postCover: {
        layout: 'odd-left',
        ratio: '4:3',
        width: 300,
        compact: true
      },
      pagination: {
        perPage: 10
      }
    }

[pengzhanbo]

依然是 水合过程的计算不一致导致。 SSR 构建默认时生成的适配 PC 宽屏设备的，但是在移动窄屏设备中，计算样式的结果与 SSR 结果没有匹配上，导致了水合失败，由于 HTML 文件仍然是适配的宽屏设备，所以没有强制为 top，切换过页面再回来，由于此时不再是使用的 SSR 结果而是 vue 的实时渲染结果，因此渲染正常。

[SingleMoonlight]

将博客设为首页，在更新版本后（也可能是我的问题）博客文章最上面的导航路径显示有点问题，现在显示为 首页>首页>目录名>文章名 ，以前应该是 首页>博客>目录名>文章名，现在想想如果博客是首页的话，显示 首页>目录名>文章名 是不是更合理？

[pengzhanbo]

🤔 面包屑导航 和 设置博客为首页 是在不同的版本加入的功能，在做面包屑导航时确实没有考虑到过博客是首页的情况。这也导致了面包屑导航计算 页面关系 时出现了问题。

[dingyuqi]

博客的文章标题本身似乎无法包含冒号 :, 应该是跟frontmatter 解析冲突了

✖ Initializing and preparing data - failed in 291ms
error YAMLException: incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line at line 2, column 17:
title: Warning : in the working copy of CRLF wi ...

[pengzhanbo]

title: 'xxx:xxx'

可以包含，将字符串用 引号 包裹即可。

[susuwoa]

设置博客为主页中，最后给出的博客配置里archiveLink应该为archivesLink

[Kinneyzhang]

你好，我将 blog list 作为首页的时候，发现在移动端无法自适应，会出现左右的滚动条。需要将字体缩到很小才能全部展示，请问如何解决？

[Kinneyzhang]

我解决了，需要设置:

.vp-blog-post-list {
  max-width: 100%;
}