Blogger Info

Themes allow you to display basic information about the blogger.

Avatar and blogger name

You can config blogger avatar and name displayed through blog.avatar and blog.name.

Note

If you don't set those options, they automatically fall back to the site logo (logo in theme options) and site name.

Tips

If you want the avatar to be clipped with round shape, set blog.roundAvatar: true.

Motto, Social Media & Profile Link

You can use blog.description to set your own introduction, motto or slogan.

You can also specify a personal introduction page link through blog.intro, so when users click on the avatar and name, they will be direct to that page.

You can also config your social media links with blog.medias option.

• If the social media icon is available below, you can set MediaName: MediaLink directly.

• Otherwise, you should pass in a tuple MediaName: [MediaLink , MediaSvgIconString or MediaSvgIconPath],

  The second element in the tuple must be a valid SVG string or a full path of an existing SVG file.

Available social media:

• "Baidu"
• "BiliBili"
• "Bitbucket"
• "Dingding"
• "Discord"
• "Douban"
• "Dribbble"
• "Email"
• "Evernote"
• "Facebook"
• "Flipboard"
• "Gitee"
• "GitHub"
• "Gitlab"
• "Gmail"
• "Instagram"
• "Lark"
• "Line"
• "Linkedin"
• "Pinterest"
• "Pocket"
• "QQ"
• "Qzone"
• "Reddit"
• "Rss"
• "Steam"
• "Skype"
• "Telegram"
• "Twitter"
• "Wechat"
• "Weibo"
• "Whatsapp"
• "Youtube"
• "Zhihu"

Example

// .vuepress/config.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 Icon is available
        GitHub: "https://github.com/Mister-Hope",
        // A custom Media called "MediaX" (just an example)
        MediaX: [
          // link
          "https://mediax.com/UserX/",
          // icon string
          "<svg ....</svg>",
        ],
        // A custom Media called "MediaY" (just an example)
        MediaY: [
          // link
          "https://mediay.com/UserY/",
          // icon path
          path.resolve(__dirname, "icons/mediay.svg"),
        ],
      },
    },
  }),
});

// .vuepress/config.js
import { getDirname, path } from "@vuepress/utils";
import { hopeTheme } from "vuepress-theme-hope";

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

export default {
  theme: hopeTheme({
    blog: {
      medias: {
        // GitHub Icon is available
        GitHub: "https://github.com/Mister-Hope",
        // A custom Media called "MediaX" (just an example)
        MediaX: [
          // link
          "https://mediax.com/UserX/",
          // icon string
          "<svg ....</svg>",
        ],
        // A custom Media called "MediaY" (just an example)
        MediaY: [
          // link
          "https://mediay.com/UserY/",
          // icon path
          path.resolve(__dirname, "icons/mediay.svg"),
        ],
      },
    },
  }),
};