Skip to main content

Blogger Info

About 2 minBlogBlogBlogger

Themes allow you to display basic information about the blogger.

Blogger info
Blogger info

Avatar and blogger name

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


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


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

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:

  • "CoolApk"
  • "Discord"
  • "Douban"
  • "Facebook"
  • "Instagram"
  • "Kook"
  • "Line"
  • "Messenger"
  • "QQ"
  • "Qzone"
  • "Reddit"
  • "Skype"
  • "SnapChat"
  • "Soul"
  • "Telegram"
  • "Tieba"
  • "Tumblr"
  • "Twitter"
  • "VK"
  • "Wechat"
  • "Weibo"
  • "Whatsapp"
  • "YY"
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: "",
        // A custom Media called "MediaX" (just an example)
        MediaX: [
          // link
          // icon string
          "<svg ....</svg>",
        // A custom Media called "MediaY" (just an example)
        MediaY: [
          // link
          // icon path
          path.resolve(__dirname, "icons/mediay.svg"),