跳至主要內容

博主信息

大约 3 分钟博客博客博主信息

主题允许你展示博主的基本信息。

博主信息
博主信息

头像和博主名称

你可以通过 blog.avatarblog.name 自由配置博客页面中显示的的博主头像和姓名。

如果你没有填写它们,它们会自动回退到站点 Logo (主题选项中的 logo) 和 站点名称。

提示

如果你希望头像被剪裁成圆形,请设置 blog.roundAvatar: true

座右铭、社交媒体与个人介绍页地址

你可以通过 blog.description 设置自己的一句话介绍、座右铭或口号。

你也可以通过 blog.intro 指定一个个人介绍页地址,点击头像与姓名时会自动进行跳转。

你还可以通过 blog.medias 这个对象配置你的社交媒体链接。

  • 如果社交媒体已在下方列表中,你可以直接设置 社交媒体名称: 社交媒体地址

  • 否则,你应该传入一个元组 社交媒体名称: [社交媒体地址, 社交媒体 SVG 图标字符串或路径]

    元组的第二个元素应该是一个合法的 SVG 字符串或是一个完整的 SVG 文件路径。

可用的社交媒体:

社交
  • "CoolApk": 酷安
  • "Discord": Discord
  • "Douban": 豆瓣
  • "Facebook": 脸书
  • "Instagram": Instagram
  • "Kook": KOOK 语音
  • "Line": Line
  • "Messenger": Facebook Messenger
  • "QQ": QQ
  • "Qzone": QQ 空间
  • "Reddit": 红迪
  • "Skype": Skype
  • "SnapChat": 色拉布
  • "Soul": Soul
  • "Telegram": 电报
  • "Tieba": 百度贴吧
  • "Tumblr": 汤不热
  • "Twitter": 推特
  • "VK": VKontakte
  • "Wechat": 微信
  • "Weibo": 微博
  • "Whatsapp":瓦次艾普
  • "YY": 歪歪

(请不要好奇为什么这里一定要加上特别奇怪的中文翻译)

例子
TS
import { getDirname, path } from "vuepress/utils";
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

const __dirname = getDirname(import.meta.url);

export default defineUserConfig({
  theme: hopeTheme({
    blog: {
      medias: {
        // GitHub 已经内置了图标
        GitHub: "https://github.com/Mister-Hope",
        // 一个自定义媒体 MediaX (仅作示例)
        MediaX: [
          // 链接
          "https://mediax.com/UserX/",
          // 图标 SVG 字符串
          "<svg ....</svg>",
        ],
        // 一个自定义媒体 MediaY (仅作示例)
        MediaY: [
          // 链接
          "https://mediay.com/UserY/",
          // 图标地址
          path.resolve(__dirname, "icons/mediay.svg"),
        ],
      },
    },
  }),
});