本地安装运行

手动创建目录,或者命令创建:

mkdir vuepress-starter && cd vuepress-starter

用 yarn 或者 npm 继续初始化

yarn init # npm init

安装本地依赖,规范不再推荐全局安装 项目依赖了 webpack 3.x 不推荐使用 npm

yarn add -D vuepress # npm install -D vuepress

特殊用法

config.js 配置文件引用函数

description: `A simple VuePress project deployed with ${PRODUCT_NAME}.`,

基本配置

// dcos/.vuepress/config.js
module.exports = {
    title:"取舍",   // HTML的title
    description:"管鲍切思世所稀博客",   // 描述
    keywords:"管鲍切思世所稀博客",  // 关键字
    head:[   // 配置头部
        [
            ['link', {rel:'icon', href:"/icon.png"}],
            ['meta', {'name':'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"}]
        ]
    ],
    markdown: {
        lineNumbers: true,  // 代码显示行号
    }, 
    dest:"./outer",    // 设置打包路径
    lastUpdated: 'Last Updated',    // 显示更新时间
    themeConfig:{
        logo:"/icon.png",   // 导航栏左边logo,不写就不显示
        sidebarDepth: 2, // 侧边栏显示2级
        nav:[   // 导航栏配置
            { text: 'vue', link: '/' },
            { text: 'css', link: '/blog/' },
            { 
                text: 'js',  // 这里是下拉列表展现形式。 items可以一直嵌套下去
                items:[
                    text:"ES5", link:"/js/es5/",
                    text:"ES6", link:"/js/es6/",
                ]
            },
            {text: 'github', link:"https://github.com/1046224544"}
        ],
        // 为以下路由添加侧边栏
        sidebar: ['/', '/git', '/vue']
        // 嵌套侧边栏  以对象的方式嵌套下去
        // sidebar: {
        //     '/2019/': [
        //         ['','前言(2019)'],
        //         {
        //             title:"10月份",
        //             collapsable:false,
        //             sidebarDepth:2,
        //             children:[
        //                 ["Nginx部署Vue项目", "Nginx部署Vue项目"],
        //                 ["NVM自由切换Node版本", "NVM自由切换Node版本小笔记"],
        //                 ["KTV点歌系统", "KTV点歌系统"],
        //             ]
        //         },
        //         {
        //             title:"9月份",
        //             collapsable:false,
        //             sidebarDepth:2,
        //             children:[
        //                 ["综合性博客网站", "综合性博客网站"]
        //             ]
        //         }
        //     ],
        //     ...
        // }
    },
    plugins:[
        // 'axios'  // 配置插件
    ]
  }
}

添加自定义 HTML TAG 标签 比如添加统计 JS

只需要在 .vuepress/config.js 文件里添加:

    head: [
        'style', {}, `a[title="站长统计"]{display:none}` // 屏蔽文字
        ],
        ['script', 
            {
            src: 'https://s9.cnzz.com/z_stat.php?id=xxxxx&web_id=xxxxx'
            }
        ],
          ['script', {}, `
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?xxxxx";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
        `]
    ]

嵌套引入

将导航栏和侧边栏单独拆分两个文件,以文件加载的方式引入,这样路由导航栏和侧边栏就可以无限嵌套,你也可以无限往下分级,建文件夹等等达到分类效果。

// docs/.vuepress/config.js
module.exports = {
    ...部分(同上)
    themeConfig:{
        nav: require('./nav'),   // 引入导航栏
        sidebar:require('./sidebar'),  // 引入侧边栏
    },
    ...
}


//  docs/.vuepress/sidebar.js
module.exports = {
    "/api/front/2019/": require('../.vuepress/frontbar/2019'),  // 继续分类
    "/api/front/2020/": require('../.vuepress/frontbar/2020'),
    "/api/end/2019/": require('../.vuepress/endbar/2019'),
    "/api/learn/koa/": require('../.vuepress/learnbar/koabar'),
    "/api/learn/express/": require('../.vuepress/learnbar/expressbar'),
    "/api/learn/java/": require('../.vuepress/learnbar/javabar'),
    "/api/learn/es6/": require('../.vuepress/learnbar/es6bar'),
    "/api/learn/vue/": require('../.vuepress/learnbar/vuebar'),
}


//   docs/.vuepress/nav.js
module.exports = [
    {text:"首页", link:"/"},
    {
        text:"技术API",
        ariLabel:"技术API",
        items:[
            {text:"koa", link:"/api/learn/koa/"},
            {text:"vue", link:"/api/learn/vue/"},
            {text:"es6", link:"/api/learn/es6/"},
            {text:"java", link:"/api/learn/java/"},
            {text:"express", link:"/api/learn/express/"},
        ]
    },
    {
        text:"日常博客",
        ariLabel:"日常博客",
        items:[
            {text:"前端",link:"/api/front/"},
            {text:"后端",link:"/api/end/"},
            {text:"其他",link:"/api/orther/1.md"},
        ]
    },
    {text:"关于博客", link:"/api/builog/"},
    {text:"关于作者", link:"/api/author/"},
    {
        text:"其他小站",
        ariLabel:"其他小站", 
        items:[
            {text:"掘金", link:'https://juejin.im/'},
            {text:"SegmentFault", link:'https://segmentfault.com/'},
            {text:"CSDN", link:'https://blog.csdn.net/'},
        ]
    },
    {
        text:"联系",
        ariLabel:"联系",
        items:[
            {text:"邮箱", link:"mailto:your@mail.com", target:"_blank"},
            {text:"其他", link:"/api/contact/"}
        ]
    },
    {text:"GitHub", link:"http://github.com/1046224544"}
]

参考内容

相关链接

主题收藏


回到顶部

Copyright © 2017-2024 1px.run 像素教程 Distributed by an MIT license.

Site updated at 2024-12-07 05:14