# Vuepress的一些说明
# 文档结构
目前使用的结构
.
├─ docs //要在这里面写文章，直接在此文件夹下新建文件夹，然后再建md文档就行，如果要显示请再config下配置
│ ├─ README.md // 这个将会是我们以后的首页
│ └─ .vuepress // 这个里面会存放一些配置和组建
│ └─ public // 静态文件存放地
│ └─ components // 组建存放地
│ └─ config.js //配置文件，我们以后的所有配置基本都在这里写
└─ package.json
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
官方结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
解释
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。docs/.vuepress/theme: 用于存放本地主题。docs/.vuepress/styles: 用于存放样式相关的文件。docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。docs/.vuepress/public: 静态资源目录。docs/.vuepress/templates: 存储 HTML 模板文件。docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。docs/.vuepress/config.js: 配置文件的入口文件，也可以是YML或toml。docs/.vuepress/enhanceApp.js: 客户端应用的增强。
# 复制功能修改
我们对掘金进行大段文字复制的时候会显示版权信息：
用vuepress搭建一个够自己用的博客
作者：三伏天冲凉
链接：https://xxxx.clare.com
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
那么我们如何在博客中实现这个功能呢 ，其实很简单， 首先修改我们的.vuepress/enhanceApp.js文件
import copy from './common/copy'
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
setTimeout(() => {
try {
document && (() => { //对document的判断是防止编译的时候报错
copy()
})()
} catch (e) {
console.error(e.message)
}
},500)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
然后新建一个copy.js的文件
export default () => {
function addCopy(e) {
let copyTxt = ""
e.preventDefault(); // 取消默认的复制事件
copyTxt = window.getSelection(0).toString()
copyTxt = `${copyTxt}\n作者：201802332\n原文：${window.location.href}\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
const clipboardData = e.clipboardData || window.clipboardData
clipboardData.setData('text', copyTxt);
}
document.addEventListener("cut", e => {
addCopy(e)
});
document.addEventListener("copy", e => {
addCopy(e)
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Tab使用
已经集成了https://superbiger.github.io/vuepress-plugin-tabs/#demo-1中的Tab，直接在md文件中编写：
:::: tabs
::: tab Dubbo方式
interface：`com.changan.carbond.dubbo.IGlobalUserCarDubboService`
method：`getFullUserInfoById`
:::
::: tab SpringCloud方式
service name: `carbond-base-service`
request uri: `/api/v1.0/user`
request method：`GET`
:::
::: tab HTTP方式
request url:`http://SERVER/api/v1.0/user`
request method：`GET`
:::
::::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
渲染后显示如下：
# 回到顶部
安装插件@vuepress/plugin-back-to-top
npm install @vuepress/plugin-back-to-top
1
config.js文件加入该插件
module.exports = {
plugins: [
'vuepress-plugin-element-tabs',
'@vuepress/back-to-top',
],
}
1
2
3
4
5
6
2
3
4
5
6