zoukankan      html  css  js  c++  java
  • vuePress博客搭建指南

    前置环境安装

    需要node环境和npm支 如果不会安装npm请转到:安装指引

    vuePress概述

    Vue 驱动的静态网站生成器 基于markdown语法生成网页 可自定义和扩展样式 可以发布至github 详情请看官网 vuepress

    安装初始化

    • 全局安装

    更改npm默认下载路径 为taobao源

    npm config set registry https://registry.npm.taobao.org --global
    
    npm config set disturl https://npm.taobao.org/dist --global
    

    确认成功

    npm config get registry

    $ npm install -g vuepress
    
    • 创建个文件夹作为目录
    $ mkdir vuepress-blog
    该目录作为整本书的项目目录
    
    • 项目初始化
    $ cd vuepress-blog
    $ npm init -y
    

    初始化后会生成一个package.json文件

    • 在当前目录中创建一个docs目录
    $ mkdir docs
    # 主要存放博客书籍内容
    

    首页内容书写(默认主题提供)

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

    核心配置

    • docs目录下创建.vuepress目录
    $ cd docs
    $ mkdir .vuepress
    # 主要存放配置
    
    • 新建总配置文件config.js
    $ cd .vuepress
    $ touch config.js
    # config是整个项目的核心配置文件,所有菜单、栏目相关的配置均配置在该模块中
    
    • config.js中加入内容
    module.exports = {
        title: '知码学院',
        description: '君哥带你上王者',
        dest: './dist',
        port: '7777',
        head: [
            ['link', {rel: 'icon', href: '/logo.jpg'}]
        ],
        markdown: {
            lineNumbers: true
        },
        themeConfig: {
            nav: [{
                text: '懵逼指南', link: '/guide/'
            }],
            sidebar: {'/guide/':[
                {
                      title:'新手指南',
                      collapsable: true,
                      children:[
                        '/guide/notes/one',
                      ]
                    },
                    {
                      title:'知码学院',
                      collapsable: true,
                      children:[
                        '/guide/notes/two',
                      ]
                    }
                ]
            },
            sidebarDepth: 2,
            lastUpdated: 'Last Updated',
            searchMaxSuggestoins: 10,
            serviceWorker: {
                updatePopup: {
                    message: "有新的内容.",
                    buttonText: '更新'
                }
            },
            editLinks: true,
            editLinkText: '在 GitHub 上编辑此页 !'
        }
    }
    

    上述配置中themeConfig处有2个关键配置,navsidebar,我们后续单独讲解

    • 运行
    vuepress dev docs
    

    导航栏配置

    • nav配置

      nav 是顶部栏目导航

    image

    接下来我们在当前目录创建一个nav.js

    $ touch nav.js
    # 因为config.js中引入了nav,所以我们要提供一个来存放栏目
    

    编辑nav.js

    加入如下内容

    module.exports = [
        {
            text: '懵逼指南', link: '/guide/'
        },
        {
            text: '面试宝典', link: '/baodian/',
    		items: [
                {text: '初级开发篇', link: '/baodian/zero/'},
                {text: '中高进阶篇', link: '/baodian/high/'},
            ]
        },
        {
            text: '工具箱',
            items: [
    			{
                    text: '在线编辑',
    				items: [
    					{text: '图片压缩', link: 'https://tinypng.com/'}
    				]
                },
    			{
                    text: '在线服务',
    				items: [
    					{text: '阿里云', link: 'https://www.aliyun.com/'},
    					{text: '腾讯云', link: 'https://cloud.tencent.com/'}
    				]
                },
    			{
                    text: '博客指南',
    				items: [
    					{text: '掘金', link: 'https://juejin.im/'},
    					{text: 'CSDN', link: 'https://blog.csdn.net/'}
    				]
                }
            ]
        }
    ]
    
    • nav配置注意点
      • nav可以支持本地目录和链接
      • navtextlinkitems组成
        • text:栏目名(项名)
        • link:链接,可以指向本地目录和http地址
        • items:可以包含多个textlink,可以继续反复套用组成复杂的菜单
    • nav配置时需要与本地的目录对应
      • 如上述我配置了懵逼指南和面试宝典栏目
      • 懵逼指南:对应的事/guide/,则我需要再docs目录下创建一个guid目录
      • 面试宝典:对应的是/baodian/,则我需要在docs目录下创建一个```baodian``````目录
      • baodian子目录:上述配置中baodian下有2个子目录,则我需要在下面新建2个子目录与之对应
    • 对应目录截图

    image

    侧边栏配置

    • sidebar

    sidebar 是左侧标题导航,可以指定配置也可以设置为auto

    sidebar: 'auto'
    

    sidebar 配置语法

    module.exports = {
    	'/guide/': require('../guide/sidebar'),
    
    	'/baodian/zero': require('../baodian/zero/sidebar'),
    	'/baodian/high': require('../baodian/high/sidebar'),
    }	
    

    /guide/ :该key是与上述的 nav 中link对应,在请求 nav 时会自动切换当前的侧边目录,所以需要该配置 /baodian/zero 同理 后续的require 表示引入一个指定目录的sidebar.js 文件,其本身可以直接写在这里,但为了方便维护我们需要将每个模块的侧边栏js抽取出来,单独存放在内容模块的目录下

    • sidebar.js

    这里我贴出目录:/docs/guide/sidebar.js文件内容

    module.exports = [
    		{
    		  title:'新手指南',
    		  collapsable: true,
    		  children:[
    			'/guide/notes/one',
    		  ]
    		},
    		{
    		  title:'知码学院',
    		  collapsable: true,
    		  children:[
    			'/guide/notes/two',
    		  ]
    		}
    	]
    

    参数解析

    • title :表示侧边栏大标题

    • collapsable :是否可收缩

    • children :具体的.md文件,这里无需指定后缀

    image

    静态资源配置

    静态资源是最重要的一部分,比如图片,比如js,比如css

    vuepress程序默认的图片目录是/docs/.vuepress/public

    $ cd .vuepress
    $ mkdir public
    
    • 图片

    比如我们要指定首页显示图片,那么需要将首页内容中的图片路径更改成如下

    # /docs/.vuepress/public目录下有一张 logo.jpg的图片
    heroImage: /logo.jpg
    

    /logo.jpg就是指/docs/.vuepress/public/logo.jpg

    • css

    css与图片路径一样,比如js中要加载我们指定的css文件,那么可以像如下这样

    • 在public目录下新建一个css目录
    $ cd public
    $ mkdir css
    $ touch style.css
    

    编辑css内容,加入如下css做测试(你也可以自定义其他内容)

    a{color:#333;text-decoration:none; }
    

    修改.vuepress下的config.js

    # 修改head属性如下
    head: [
            ['link', {rel: 'icon', href: '/logo.jpg'}],
            ["link", { rel: "stylesheet", href: "/css/style.css" }]
        ],
    
    • 重启预览效果

    • js

    如果我们要自定义一些js动态效果,我们可以也可以像css操作那样

    在public目录下新建一个js目录

    $ cd public
    $ mkdir js
    $ touch main.js
    

    在js中加入一些测试内容

    function init(){
        console.log("终于可以为所欲为了");
    }
    //因为界面加载原因,我们延迟500ms再调用init
    setTimeout("init()",500)
    

    修改.vuepress下的config.js

    # 修改head属性如下
    head: [
            ['link', {rel: 'icon', href: '/logo.jpg'}],
            ["link", { rel: "stylesheet", href: "/css/style.css" }],
            ["script", { charset: "utf-8", src: "/js/main.js" }],//新加入
        ],
  • 相关阅读:
    POJ 1659 Frogs' Neighborhood
    zoj 2913 Bus Pass(BFS)
    ZOJ 1008 Gnome Tetravex(DFS)
    POJ 1562 Oil Deposits (DFS)
    zoj 2165 Red and Black (DFs)poj 1979
    hdu 3954 Level up
    sgu 249 Matrix
    hdu 4417 Super Mario
    SPOJ (BNUOJ) LCM Sum
    hdu 2665 Kth number 划分树
  • 原文地址:https://www.cnblogs.com/swy3624/p/13172013.html
Copyright © 2011-2022 走看看