guide/custom-home/

[giscus[bot]]

guide/custom-home/

概述 主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。 主题通过 frontmatter 来定义你的首页。在 sourceDir 的 README.md 文件中，编写 frontmatter。 主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。 通过 config 属性...

https://plume.pengzhanbo.cn/guide/custom-home/

[kotaira]

大佬, hero的action有办法跳转到 ${window.location.protocol}://${window.location.host}:port 这种link吗? 我的服务都跑在ip不固定的主机上, 想实现点击按钮跳转到前端主页.

[pengzhanbo]

既然都是直接跳转到同一个域名下的页面，直接省略即可，没必要在链接上带上 protocol 、host、port 这些信息，浏览器会帮你自动拼接。 也就是说，${window.location.protocol}://${window.location.host}:port 拼接的结果，等价于 / 。

[kotaira]

这样我试过了,VPButton里有这样一个逻辑:
function linkTo(e: Event) {
if (!isExternal.value && link.value?.[0] !== '#') {
e.preventDefault()
if (link.value)
router.push(link.value)
}
}
不是一个外链会阻止跳转行为,把我的链接当一个博客页面处理. 或者能否加一个参数控制这个行为呢?

[pengzhanbo]

我在 rc.104 版本中给 action 添加了 target 属性，设置为 _blank 可以将其变更为外链，点击在新页面打开。

[kotaira]

非常感谢!

[MrHaoH]

大佬，请教个问题，如何新增一个自定义的页面呢，头部还是主题的头部，内容不一样，好比我在.docs/Readme.md文件中写的：

home: true
config:

• type: custom

---

但我自定义的Home组件中添加了跳转，需要跳转至另一个自定义的页面，怎么实现？感谢大佬的回复

[MrHaoH]

home: true
config:

• type: custom

[MrHaoH]

组件显示不出来，ReadME.md中还有个自定义组件

[MrHaoH]

不用了大佬，我找到办法了，只要在.docs中新建一个md文件就行，感谢大佬

[DynamicLoader]

请问下，自定义首页的featureicon如何才能支持自定义图片？
这样写

得到

[pengzhanbo]

---
features:
  - 
    title: 12313
    icon:
      src: /plume.svg
      alt: xxxxx
    details: xxxxxx
---

[DynamicLoader]

还想请问下，有没有办法让标签内的title和image同在一行

[pengzhanbo]

features 的样式设计如此，从 UI 视觉上来看是比较合理的，暂不打算再增加额外的配置去调整布局。
但你可以自己通过 CSS 样式进行覆盖，这里的内容本身是通过 Flex 实现，自定义布局是很容易的。

[MrHaoH]

大佬，请教个问题，我在docs/readme中自定义了首页：

home: true
config:

• type: helpCenter

---

我如何在helpCenter组件中点击按钮跳转至另一个自定义页面？另一个自定义页面如何配置？感谢大佬

[pengzhanbo]

你指的是在首页 从一个页面区域 跳转到 另一个页面区域？

[sunshang-hl]

text-image | image-text 样式是否可以再美观点,提供自定义背景颜色\背景图片, 文字可调整大小,文字\图片调整距离等.

[pengzhanbo]

查看此页头部内容，PlumeHomeConfigBase 中有 背景图的配置， PlumeThemeHomeTextImage 继承自该类型。
图片最大宽度可以通过 width 属性设置，默认显示图片的原始尺寸。
更细节的控制可以通过 自定义样式 覆盖。

[dlh-lj]

大佬，请问页面下面的‘Powered by VuePress & vuepress-theme-plume’这句话，怎么去掉

[pengzhanbo]

配置文档：https://theme-plume.vuejs.press/config/basic/#footer

[ghost]

大佬好，可不可以将banner里的图片当加载完成后使用顺滑的动画加载？这样就不是直接看着图片一行一行的加载了。

[pengzhanbo]

banner 图片通常体积都是相对比较大的，如果完全等待其加载完成后再使用渐显效果，其时间开销并没有发生改变，而用户会更晚才能感知到图片，这实际上比 逐行加载 体验更差。
这里想要达到更好的效果，最好的方式就是先有一个 banner 图的 低分辨率高斯模糊占位图片，先显示占位图，等待高清图加载完成后再渐变过渡。 然而现实情况会复杂很多，大多数用户其实是 不懂的如何提供 低分辨率高斯模糊占位图片 的，而如果由主题来计算 占位图，则要安装远比主题还要大的多的第三方依赖如 sharp 等图片处理库。然而这些库依赖的其它包，在国内的网络环境下下载比较麻烦，这又带来了新的使用门槛。然而这也仅能处理使用的是本地图片或者固定远程图片的场景，还有一些用户使用的是如 必应壁纸这类每天都更新的动态壁纸，这又带来了新的问题。

[ghost]

谢谢大佬，了解了

[tianhairui]

作者好，我在使用 features 类型定义首页的时候，想通过分割线或者标题来配置多段 features 类型的展示，尝试过在 features 前面添加 profile ，也尝试过添加自定义区域类型来进行自定义标题，但和最终想要实现的效果还是有些差异，请问有没有更好的方法来实现 标题1---features展示---标题2---features展示，类似于这样。

[pengzhanbo]

对 Features 组件进行 重写，在重写的组件中引入原组件，props 透传，重写组件中加 标题和样式等。
但是 featureses 本身就自带了 title 和 description 配置项了。而且主题也支持在首页中配置 多个 type: features 。

[tianhairui]

好的，明白了，多谢作者。

[okkeman]

发现bug：profile 第一次修改后生效，第二次再修改还是旧的内容。

[pengzhanbo]

我在本地未能重现，请提供下最小重现

[slightin]

actions的link如何使用mailto:user@example.com类似的链接

[slightin]

我这里都跳转到了‘当前域名/mailto:user@example.com’

[pengzhanbo]

这是一个 bug， 下个版本修复

[Malpl3naInk]

大佬, 请问能否指定文档中的特定页作为首页, 或者创建目录结构

docs/
├─ notes/
    ├─ demo/
       ├─ README.md
       ├─ foo.md
    ├─ README.md

时将 notes/README.md 作为首页, 在访问 example.com/ 时直接显示 notes/README.md 的内容

[pengzhanbo]

emmm... 你把 md 文件的 frontmatter 的 permalink 设置为 / ，就是首页的访问链接了，注意避免跟其他的 md 的 permalink 重复。

[Malpl3naInk]

可以了, 感谢大佬

[AliceSpring123]

大佬，已知config中的custom类型可以将文档后的Markdown内容放在custom处，如何定义多个custom块，每个custom块放置不同的Markdown内容

[pengzhanbo]

不支持多个 custom 块

[belugaQAQ]

大佬，在text-image | image-text组件中，我添加的是png图片
我该如何调整宽度与长度
css该怎么写？
很抱歉麻烦你

[Jursin]

在自定义样式中添加

.content-image .vp-image {
  width: 200px !important;
  height: auto !important;
}