Du-vLog

An image

栏目 更新日期 栏目 更新日期
node 2020-06-04 jquery 2020-06-04
vue 2020-06-04 js 2020-06-28
layui 2020-06-04 npm 2020-06-28
nginx 2020-06-04 important 2020-06-28

# 侧边栏配置

README

栏目所在文件夹下所有md文件都需要正确填写才可改变侧边栏的展示 README.md 是当前文件夹入口文件，第一个展示 其余.md文件中，第一行定义一个# ，侧边栏标题由默认路径展示为#号后面填写的，即默认第一行 定义2个## ，侧边栏将出现二级栏目标题

侧边栏展示顺序：.md文件目录顺序

禁用当前页面侧边栏
---
sidebar: false
---

# 图片使用

截图拖拽到当前编辑器，产生的链接，直接定义为相对当前文件的路径即可

![1591241165283](G:\新-dujun-博客\vuepress\docs\layerUi\assets\1591241165283.png)
或者
![An image](assets/1591241165283.png)

修改为  []自定义文件名称
![layui](../layui/assets/1591241165283.png)

# 目录代码

🎉 💯

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

启动

docsify docsify serve

hexo hexo server

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

导入js文件

输入<<< @/docs/.vuepress/config.js{3} 高亮行号



 
























































module.exports = {
  title : 'Du-vLog',  // 设置网站标题
  description : 'Vuepress-dujun',
  //host : '192.168.70.128',
  //port : 8080,
  //base : '/',
  base : '/vuepress/',//升级上线路径，升级到sayfocus上面时
  head : [
    ['link', { rel: 'icon', href: 'https://vuepress.docschina.org/logo.png' /*href: '/logo.jpg'*/ }]
  ],
  markdown : {
    toc: { includeLevel: [1,2,3,4] },//配置目录级别，当有1,2,3,4个#号的标题都会出现在列表内
	/*config: md => {
      md.set({ breaks: true });
	  md.use(require("markdown-it-anchor"));
      md.use(require('markdown-it-table-of-contents'));
    },*/
  },
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
	  {
        text: '笔记',
        items: [
          { text: 'node', link: '/node/' },
          { text: 'vue', link: '/vue/' },
		  { text: 'layui', link: '/layui/' },
		  { text: 'nginx', link: '/nginx/' },
		  { text: 'jquery', link: '/jquery/' },
		  { text: 'npm', link: '/npm/' },
		  { text: 'js', link: '/js/' },
		  { text: 'Modernizr.wiki', link: '/Modernizr.wiki/' },
        ]
      },
	  { text: '文档', link: '/important/' },
      { text: '主页', link: 'http://sayfocus.com' },
    ],
	/*sidebar: [
		{
			title: '开发指南',
			collapsable: false, //是否展开
		},
		['./guide/install/install','安装'],
		['./guide/started/started','快速上手'],
		{
			title: '组件',
			collapsable: false
		},
		['./guide/icon/icon','icon'],
    ],
	sidebar: 'auto',
	'/': {
       sidebar: 'auto'
    },*/
  },
  plugins: {
    "vuepress-plugin-auto-sidebar": {}
  }
}

vuepress 安装

# 全局安装

cnpm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git

#任意项目文件夹 创建一个 markdown 文件
echo '# Hello VuePress' > README.md
echo '这里是内容' > 123.md

#快速初始化package.json
npm init -y

启动项目开始编写文档了：

yarn docs:dev # 或 npm run docs:dev

要生成静态资源，请运行：

yarn docs:build # 或 npm run docs:build

构建的文件会位于 docs/.vuepress/dist 中

# 每个文件夹下面的README.MD相当于路由器，编写跳转链接列表等等🎉

类似docsify结构

Home foo foo 标题锚点 foo - one foo - two

# 安装 markdown-it

npm i markdown-it --save

# 安装 vuepress-plugin-auto-sidebar 💯

vuepress-plugin-auto-sidebar 是用于为 vuepress 自动生成侧边栏分组的插件。

npm i vuepress-plugin-auto-sidebar -D

// **/.vuepress/config.js
module.exports = {
  plugins: {
    "vuepress-plugin-auto-sidebar": {}
  }
}