默认主题

Pressify 自带了一个默认主题（就是你现在看到的这个），很多样式参考了 Vue.js 的官方文档。

logo

string

配置文档站的图标。

title

string，默认为 Pressify

配置文档站的标题，会显示在导航栏上，也会设置为 html 的 <title> 标签，即：

<html>
  <head>
    <title>{YOUR_TITLE}</title>
  </head>
</html>

<html>
  <head>
    <title>{YOUR_TITLE}</title>
  </head>
</html>

description

string

配置文档站的描述，会设置为 html 的 description meta ，即：

<html>
  <head>
    <meta name="description" content="{YOUR_DESCRIPTION}" />
  </head>
</html>

<html>
  <head>
    <meta name="description" content="{YOUR_DESCRIPTION}" />
  </head>
</html>

head

type HtmlTagConfig =
  | [string, Record<string, any>]
  | [string, Record<string, any>, string];

head?: HtmlTagConfig[];

type HtmlTagConfig =
  | [string, Record<string, any>]
  | [string, Record<string, any>, string];

head?: HtmlTagConfig[];

可以通过该字段更大程度地配置 <head> 内容，例如：

export default {
  themeConfig: {
    head: [
      ['meta', { name: 'keywords', content: 'vite,react' }],
      ['link', { rel: 'icon', href: '/logo.png' }],
      ['script', {}, 'document.write("Hello World")'],
    ],
  },
};

export default {
  themeConfig: {
    head: [
      ['meta', { name: 'keywords', content: 'vite,react' }],
      ['link', { rel: 'icon', href: '/logo.png' }],
      ['script', {}, 'document.write("Hello World")'],
    ],
  },
};

type HtmlTagConfig =
  | [string, Record<string, any>]
  | [string, Record<string, any>, string];

banner?: string | (string | HtmlTagConfig)[];

type HtmlTagConfig =
  | [string, Record<string, any>]
  | [string, Record<string, any>, string];

banner?: string | (string | HtmlTagConfig)[];

配置站点的顶部固定的 banner。

nav

interface NavItem {
  [key: string]: any;
  icon?: string;
  text?: string;
  link?: string;
  items?: NavItem[];
  activeMatch?: string;
}

nav?: NavItem[];

interface NavItem {
  [key: string]: any;
  icon?: string;
  text?: string;
  link?: string;
  items?: NavItem[];
  activeMatch?: string;
}

nav?: NavItem[];

配置顶部导航栏。例如：

export default {
  themeConfig: {
    nav: [
      {
        text: '指南',
        link: '/zh/guide',
      },
      {
        icon: 'uiw/github',
        link: 'https://github.com/codpoe/pressify',
      },
    ],
  },
};

export default {
  themeConfig: {
    nav: [
      {
        text: '指南',
        link: '/zh/guide',
      },
      {
        icon: 'uiw/github',
        link: 'https://github.com/codpoe/pressify',
      },
    ],
  },
};

以上配置会渲染出一个文字导航「文档」和一个图标导航「」。配置里的图标 uiw/github 来自于 icones。 Pressify 内置了 unplugin-icons，所以可以获取到 icones 里所有的图标。

activeMatch?: string 可用于设置正则来匹配是否高亮，例如：

export default {
  themeConfig: {
    nav: [
      {
        text: '指南',
        link: '/zh/guide',
        activeMatch: '^/zh/(guide|api)',
      },
    ],
  },
};

export default {
  themeConfig: {
    nav: [
      {
        text: '指南',
        link: '/zh/guide',
        activeMatch: '^/zh/(guide|api)',
      },
    ],
  },
};

interface SidebarItem {
  [key: string]: any;
  text: string;
  link?: string;
  items?: SidebarItem[];
}

sidebar?: SidebarItem[] | Record<string, SidebarItem[]>;

interface SidebarItem {
  [key: string]: any;
  text: string;
  link?: string;
  items?: SidebarItem[];
}

sidebar?: SidebarItem[] | Record<string, SidebarItem[]>;

配置左侧菜单栏，例如：

export default {
  themeConfig: {
    sidebar: [
      {
        text: '快速上手',
        link: '/zh/guide/getting-started',
      },
    ],
  },
};

export default {
  themeConfig: {
    sidebar: [
      {
        text: '快速上手',
        link: '/zh/guide/getting-started',
      },
    ],
  },
};

如果需要多个不同的左侧菜单栏，可以修改 sidebar 为以路径作为 key，SidebarItem[] 作为 value 的形式。下面的例子就是，当进入 /foo/a 页面时会展示 /foo 菜单栏，而当进入 /bar/a 时则会展示 /bar 菜单栏：

export default {
  themeConfig: {
    sidebar: {
      '/foo': [
        {
          text: '关于 foo 的 a',
          link: '/foo/a',
        },
        {
          text: '关于 foo 的 b',
          link: '/foo/b',
        },
      ],
      '/bar': [
        {
          text: '关于 bar 的 a',
          link: '/bar/a',
        },
        {
          text: '关于 bar 的 b',
          link: '/bar/b',
        },
      ],
    },
  },
};

export default {
  themeConfig: {
    sidebar: {
      '/foo': [
        {
          text: '关于 foo 的 a',
          link: '/foo/a',
        },
        {
          text: '关于 foo 的 b',
          link: '/foo/b',
        },
      ],
      '/bar': [
        {
          text: '关于 bar 的 a',
          link: '/bar/a',
        },
        {
          text: '关于 bar 的 b',
          link: '/bar/b',
        },
      ],
    },
  },
};

docsRepo

string

指定文档 git 仓库地址，如 https://github.com/Codpoe/pressify。如果是 GitHub 仓库，那这个字段还可以简写为 Codpoe/pressify，Pressify 会自动补全链接。

该字段会用于拼接文档编辑按钮的链接。

docsDir

string，默认 /

文档目录。该字段会用于拼接文档编辑按钮的链接。

docsBranch

string，默认 master

文档分支。该字段会用于拼接文档编辑按钮的链接。

editLink

boolean | string，默认 false

是否在文档底部展示编辑按钮。

当传递 true 时，编辑按钮的文字默认为 Edit this page
当传递 string 时，会作为编辑按钮的文案来展示。

lastUpdated

boolean | string，默认 false

是否在文档底部展示上次更新的时间。

当传递 true 时，上次更新时间的前缀文字默认为 Last updated
当传递 string 时，会作为上次更新时间的前缀文案来展示。

algolia

配置 Algolia 的 DocSearch 服务。

interface DocSearchProps {
  appId: string;
  apiKey: string;
  indexName: string;
}

interface DocSearchProps {
  appId: string;
  apiKey: string;
  indexName: string;
}

TIP

这里只列了必传参数，其他参数请参考代码里的类型定义，或者查看 algolia 的官方文档。

locale

string

配置站点的语言，会被设置到 <html> 的 lang 属性上。

localeText

预留字段

string，默认同 locale

配置站点语言对应的文案。

themeConfigByPaths

Record<string, ThemeConfig>

不同的前置路径使用不同的主题配置。可用于配置多语言、多版本等场景。例如：

export default {
  themeConfig: {
    locale: 'en',
    localeText: 'English',
    themeConfigByPaths: {
      '/zh': {
        locale: 'zh',
        localeText: '中文',
      },
    },
  },
};

export default {
  themeConfig: {
    locale: 'en',
    localeText: 'English',
    themeConfigByPaths: {
      '/zh': {
        locale: 'zh',
        localeText: '中文',
      },
    },
  },
};

如上配置，进入根路径 / 语言会是 English，而当进入 /zh/xxx 页面后，语言会变为 中文。

#默认主题

#logo

#title

#description

#head

#banner

#nav

#sidebar

#docsRepo

#docsDir

#docsBranch

#editLink

#lastUpdated

#algolia

#locale

#localeText

#themeConfigByPaths

默认主题

logo

title

description

head

banner

nav

sidebar

docsRepo

docsDir

docsBranch

editLink

lastUpdated

algolia

locale

localeText

themeConfigByPaths