美文网首页
vuepress使用配置

vuepress使用配置

作者: 随风飞2019 | 来源:发表于2020-03-08 17:37 被阅读0次

    mkdir vuepress-test; //创建一个目录
    cd vuepress-test ; 进入目录
    npm init -y; 初始化目录
    创建首页readme.md,编辑内容如下

    ---
    home: true
    heroImage: /imgs/logo.png
    actionText: 快速上手 →
    actionLink: /guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2020-zyw0605688
    ---
    

    创建主配置目录mkdir .vuepress;//主配置目录,名字不要改
    cd .vuepress,//进入配置目录,新建配置文件config.js,编辑如下

    module.exports = {
      title: "学习小木屋",
      description: "欢迎来到随风飞的技术小木屋",
      themeConfig: {
        //nav: require("./nav.js"),
        nav: [
          { text: "首页", link: "/" },
          { text: "指南", link: "/guide/" },
          { text: "配置", link: "/xuexibiji/" },
          {
            text: "了解更加多",
            link: "/learnmore/",
            items: [
              { text: "初级篇", link: "/learnmore/part1/" },
              { text: "进阶篇", link: "/learnmore/part12/" },
              { text: "大神篇", link: "http://www.baidu.com" }
            ]
          }
        ],
        sidebar: {
          // "/guide/": require("./sidebar/guide.js"),
          "/guide/": [
            { title: "基本配置", path: "/guide/base.md" },
            { title: "主题配置", path: "/guide/theme.md" },
            {
              title: "导航配置",
              children: ["/guide/nav/one.md", "/guide/nav/two.md"]
            }
          ]
        }
      }
    };
    里面有分包的写法,也有放在一起的写法,根据情况使用
    

    相关文章

      网友评论

          本文标题:vuepress使用配置

          本文链接:https://www.haomeiwen.com/subject/fdhjdhtx.html