Narcissistic Pickle Meister

    vuepress-theme-ibank

    1.0.17 • Public • Published

    当前文档版本

    v1.0.12

    主题配置

    本主题遵循约定优于配置原则,遵循以下约定,你只需要配置你的个人信息即可使用该主题。

    config.js中支持的配置项:

    // config.js
    const config = {
      title: "柒月流火's blog", // 博客名称,会出现在导航栏中
      themeConfig: {
        logo: "/img/logo.png", // required: false // 你的logo,如果选择不设置,则导航栏中不会有logo
        title: "title", // required: false // 覆盖config.title
        // index: false, // default: true // 是否生成首页
        // categories: false, // default: true // 是否生成目录索引
        // tags: false, // default: true // 是否生成标签索引
        // archives: false, // default: true // 是否生成时间索引
        author: { // default: undefined
          name: "柒月流火",
          link: "https://github.com/WilfredShen",
        },
        avatar: { // default: undefined
          img: "/img/avatar.png",
          name: "柒月流火",
          slogan: "slogan",
          icons: [
            {
              title: "邮箱",
              link: "mailto:blog@wilfredshen.cn",
              icon: "email",
            },
            {
              title: "GitHub",
              link: "https://github.com/WilfredShen",
              icon: "github",
            },
          ],
        },
      },
    };
    module.exports = config;

    或者使用typescript以获取更详细的类型提示:

    import { defineUserConfig } from "vuepress-vite";
    import { IconType } from "vuepress-theme-ibank/types";
    import type { ThemeConfig } from "vuepress-theme-ibank/types";
    
    export default defineUserConfig<ThemeConfig>({
      title: "柒月流火's blog", // 博客名称,会出现在导航栏中
      themeConfig: {
        logo: "/img/logo.png", // required: false // 你的logo,如果选择不设置,则导航栏中不会有logo
        title: "title", // required: false // 覆盖config.title
        // index: false, // default: true // 是否生成首页
        // categories: false, // default: true // 是否生成目录索引
        // tags: false, // default: true // 是否生成标签索引
        // archives: false, // default: true // 是否生成时间索引
        author: {
          name: "柒月流火",
          link: "https://github.com/WilfredShen",
        },
        avatar: {
          img: "/img/avatar.png",
          name: "柒月流火",
          slogan: "slogan",
          icons: [
            {
              title: "邮箱",
              link: "mailto:blog@wilfredshen.cn",
              icon: IconType.email,
            },
            {
              title: "GitHub",
              link: "https://github.com/WilfredShen",
              icon: IconType.github,
            },
          ],
        },
      },
    });

    目录约定

    docs
    ├── 一级目录
    │   ├── 二级文件
    │   └── 二级目录
    │       └── 三级文件
    └── 一级文件
    

    docs为顶级目录,其下为一级文件/目录、二级文件/目录、三级文件/目录,以此类推,不限层数

    在导航栏中一级文件/目录会直接显示在其中,如果是一级目录,则会添加下拉框。下拉框中最多可以显示到三级,其中二级文件/目录之间有行线分隔,三级文件会列在对应的二级目录下方。

    readme.md是描述其父目录的文件,即导航栏中文件名指向的链接即为其frontmatterpermalink的值,目录名指向的链接为其目录下readme.md文件中的frontmatter.permalink

    在没有文件指定其链接为/的情况下,/的路由会被重定向至docs/readme.md中指定的链接。如果docs/readme.md不存在,则访问/会提示404

    命名约定

    目录以及Markdown文件分别需要遵循以下命名规范:

    • 目录:[order].[name]
    • Markdown:readme.md[order].[name].[md],其中readme和后缀md不区分大小写。

    文件和目录在导航栏处的排序均按照order的字典序进行升序排序,建议使用相同位数的数字作为order

    排除的文件

    有时你并不希望所有的文件都被加载,你可以借助以下的规则来排除文件:

    • .开头的文件/目录会被vuepress的引擎忽略,不会被解析,你可以借此存放草稿等文件。例:
      • 创建一个目录.draft,并在目录下撰写草稿,发布时移动到合适的目录下就会被解析
      • 创建一个目录.recyclebin,可以将废弃的文章移动到此处,避免下次发布时被解析
    • _开头的文件/目录会被本主题的格式化工具忽略,其下Markdown文件的frontmatter不会被格式化,也不会出现在导航栏和索引中,但它依旧会被引擎加载并渲染,因此你依旧可以直接输入其网址访问它。例:
      • 如果你有一些界面希望发布上去,但不希望任何人都能轻易访问它,你可以给它添加_前缀,这样只有知道这个网址的人才能够访问它
    • @开头的文件/目录会被本主题的格式化工具忽略,但依旧会被引擎加载并渲染成网页,并出现在导航栏和索引中;其order值会去除开头的@,有多个则只会去除第一个。例:
      • 本主题在@pages目录下存放导航栏中“索引”栏的界面,不过我设置其frontmatter.navbar=false点击查看详情),导航栏中的“索引”是我手动添加的
    • readme.md不能添加@_,否则不会被认为是readme文件

    参考以下样例:

    docs
    ├── 00.前端
    │   ├── .排除测试1.md
    │   ├── 12.测试e35c229e.md
    │   ├── @08.排除测试2.md
    │   ├── readme.md
    │   ├── _14.排除测试3.md
    │   └── @05.子目录2
    │       ├── 01.测试.md
    │       └── readme.md
    └── README.md
    

    在以上的目录结构中,如果你使用devbuild指令,你将得到如下输出:

    info Initializing VuePress and preparing data...
    info 格式化frontmatter: [success]   /README.md
    info 格式化frontmatter: [success]   /00.前端/12.测试e35c229e.md
    info 格式化frontmatter: [excluded]  /00.前端/@08.排除测试2.md
    info 格式化frontmatter: [success]   /00.前端/readme.md
    info 格式化frontmatter: [excluded]  /00.前端/_14.排除测试3.md
    info 格式化frontmatter: [excluded]  /00.前端/@05.子目录2/01.测试.md
    info 格式化frontmatter: [excluded]  /00.前端/@05.子目录2/readme.md
    

    你可以看到,在格式化工具的输出中,不存在“.排除测试1.md”文件,即该文件没有被引擎加载;而“@05.子目录2”目录下的文件和“@排除测试2.md”、“_排除测试3.md”文件的状态都是[excluded],即没有被格式化。

    frontmatter

    本主题会自动对未排除的Markdown文件进行格式化,一般情况下不需要任何手动的配置

    frontmatter格式

    ---
    title: 测试d83cbf9d
    permalink: /article/d83cbf9d
    date: '2021-11-17 19:15:29'
    type: article
    navbar: true
    categories:
      - 前端
      - 前端文章
    tags:
      - math
      - JavaScript
    author:
      name: 柒月流火
      link: 'https://github.com/WilfredShen'
    ---

    自动生成

    key 生成规则
    title [order].[name].[md]中的name;若文件为readme.md,则取父目录的name
    permalink "/article/[hash]"hash根据文件内容生成
    date 执行格式化的时间,格式为yyyy-MM-dd HH:mm:ss,例:2021-01-23 14:30:55
    type "article"
    categories Array:所有父目录(从一级目录开始)的name,依次排列
    author themeConfig.author

    手动添加

    key 数据规范
    tags Array
    navbar Boolean:默认为true,设置为false时不会被添加到导航栏中

    Install

    npm i vuepress-theme-ibank

    DownloadsWeekly Downloads

    18

    Version

    1.0.17

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    79

    Last publish

    Collaborators

    • wilfred-shen