《Vuepress 1.x 和 2.x》
Vuepress 1.x 和 2.x
AvatarGiser
这个作者很懒,什么都没留下…
展开
-
03. Vuepress2.x 设置 favicon.ico 图标
修改 docs/.vuepress/config.ts 配置文件设置 head 属性,添加 link 标签,href 设置图片路径。 注意:图片放在 docs/.vuepress/public 文件夹下,public 要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { host: 'localhost', // ip port: '8099', //端口号 title: '我的技术站', // 设置网站标题.原创 2021-08-04 14:06:43 · 2324 阅读 · 0 评论 -
01.Vuepress2.x 创建自己的技术文档站
一、简介Vuepress2.x 英文官网Vuepress2.x 中文官网二、安装参考步骤1:新建一个文件夹,如:Doc2.0步骤2:进入文件夹目录,新建 package.json,命令:npm init步骤3:安装本地依赖,我当时使用的是如下版本,可在此找到自己需要的npm i [email protected]步骤4:在 package.json 中添加如下信息"scripts": { "docs:dev": "vuepress dev原创 2021-08-04 11:57:54 · 2145 阅读 · 2 评论 -
04. Vuepress2.x 设置导航栏 logo
修改 docs/.vuepress/config.ts 配置文件设置 themeConfig.logo 属性。 注意:图片放在 docs/.vuepress/public 文件夹下,public 要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { host: 'localhost', // ip port: '8099', //端口号 title: '我的技术站', // 设置网站标题 descri.原创 2021-08-04 14:21:24 · 1611 阅读 · 0 评论 -
06. Vuepress2.x 嵌入 js 文件
修改 docs/.vuepress/config.ts 配置文件设置 head 属性。 注意:base.js文件放在 docs/.vuepress/public/js文件夹下,public/js要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { host: 'localhost', // ip port: '8099', //端口号 title: '我的技术站', // 设置网站标题 descr...原创 2021-08-04 15:20:19 · 1294 阅读 · 0 评论 -
Vuepress2.x 编译报错 TypeError: Invalid value used as weak map key
vuepress2.x 是基于 Vue3.x开发,相比Vuepress1.x 对 html 的使用更严格。如下图所示的非标准 html 标签在开发阶段没问题,编译却无法通过。关键是它的报错定位不准确。。。。原创 2021-08-06 11:18:22 · 4718 阅读 · 20 评论 -
12. Vuepress2.x 隐藏指定页的 sidebar
Vuepress2.x 隐藏指定页的 sidebar原创 2022-09-16 14:39:54 · 681 阅读 · 0 评论 -
13. Vuepress2.x 部署站点的基础路径从配置文件中读取
需要从统一的文件中读取,方便其它 js 文件和 config.js 配置统一读取。收到需求,站点要部署到。原创 2023-08-18 15:59:41 · 425 阅读 · 0 评论 -
10. Vuepress2.x 侧边栏目录插入图片
如果不知在哪写 js 代码,请参考此篇06. Vuepress2.x 嵌入 js 文件_前端技术-CSDN博客_vuepress 引入js接下来我直接是 base.js 文件中写// 只有刷新时才调用window.addEventListener('load', function() { addLabelImg();});// 初始化时或页面切换时调用addLabelImg();// 给侧边栏目录添加图标function addLabelImg() { var si原创 2021-12-31 17:29:35 · 1546 阅读 · 0 评论 -
08. Vuepress2.x Markdown 中显示代码
两种方式:一、代码块;Markdown文件# 概述```tsvar str:string = 'hello world';```效果二、导入代码块JavaScript文件var options = [ { value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { v..原创 2021-08-06 13:36:13 · 560 阅读 · 0 评论 -
07. Vuepress2.x Markdown 中使用 Vue 组件
一、前言Vuepress2.x 对组件使用有较大变化,点此查看二、详解官网插件配置说明步骤1:安装插件,注意vuepress2.x 也要使用 v2.x ,版本查看npm i @vuepress/[email protected]步骤2:新建文件 docs/.vuepress/components/MyTemplate.vue <template> <h1>MyTemplate</h1&g.原创 2021-08-04 15:58:27 · 3314 阅读 · 7 评论 -
02. Vuepress2.x 修改端口号
默认端口号是 8080。 可修改.docs/vuepress/config.ts 配置文件。 新增 port 属性,这里改为 8099。module.exports = { host: 'localhost', // ip port: '8099', //端口号 title: '我的技术站', // 设置网站标题 description: '描述:我的技术站', themeConfig: { ... }}...原创 2021-08-04 13:49:54 · 1745 阅读 · 1 评论 -
14. Vuepress2.x 非根目录下的资源路径配置
(它被注入到了 Vue 的原型上),可以帮助你生成正确的路径。(docs\README.md)中有效,且不加 /VuePress 提供了内置的一个 helper。原创 2023-08-18 16:29:51 · 332 阅读 · 0 评论 -
05. Vuepress2.x 修改默认样式(小技巧)
一、前言Vuepress2.x 对样式的设置有较大变化,点此查看官方推荐使用插件@vuepress/plugin-palette和 SCSS。对此插件未做详细研究,使用了一种土方式。二、详解步骤1:新建css文件,docs/.vuepress/public/css/index.css步骤2:配置docs/.vuepress/config.ts步骤3:先看看官网详解,也可在目录下找到官方变量// 日间模式node_modules\@vuepress\theme-...原创 2021-08-04 15:04:15 · 2996 阅读 · 2 评论 -
09. Vuepress2.x 导航菜单栏-下拉菜单-二级菜单
在导航栏的下拉子菜单中再分二级目录结构,可修改 docs/.vuepress/config.ts 配置文件:设置 themeConfig.navbar 属性。 请详细查看最后一个数组,有两级 children,第一个children 为一级目录,第二个 children 为二级目录module.exports = { themeConfig: {// 主题设置 logo: '/images/logo.png',// 注意图片放在 public 文件夹下 na原创 2021-11-29 18:31:07 · 2924 阅读 · 1 评论 -
11. Vuepress2.x 关闭夜间模式
修改 docs/.vuepress/config.ts 配置文件设置 themeConfig.darkMode属性 详见官网module.exports = { host: 'localhost', // ip port: '8099', //端口号 title: '我的技术站', // 设置网站标题 description: '描述:我的技术站', base: '/', //默认路径 head: [ // 设置 favor.ic.原创 2023-08-18 14:57:41 · 411 阅读 · 0 评论 -
Vuepress 修改 Markdown 中代码默认样式
注意这是修改默认样式; 请查看 Vuepress CSS 样式覆盖:修改内容宽度,有详细说明如何修改默认样式,也就是在 styles/palette.styl 文件;原样式修改后palette.styl.page { // 代码块:行号字体 div[class*="language-"].line-numbers-mode .line-numbers-wrapper { color: #000; } // 代码块:语言(右上角).原创 2021-07-12 17:49:59 · 2145 阅读 · 0 评论 -
Vuepress Markdown 中代码显示行号
修改配置文件 config.js注意结构,就在module.exports.markdown 下module.exports = { markdown: { lineNumbers: true//代码显示行号 }}原创 2021-07-12 17:38:44 · 1075 阅读 · 8 评论 -
07. Vuepress1.x Markdown 中使用 Vue 组件
重点说明参考:中文指南、英文指南示例结构Markdown中使用# 标题 1## 标题 2### 标题 3<test-template></test-template>效果原创 2021-07-12 17:19:41 · 817 阅读 · 7 评论 -
Vuepress markdown 文件中代码段展开与隐藏
代码Markdown使用 html 标签 details<details><summary>展开查看</summary>```vue<template> <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox> <el-checkbox v-model="checked2" disabled>备选项</el-checkbox&原创 2021-06-21 18:56:07 · 1845 阅读 · 0 评论 -
Vuepress 在 markdown 中对多个 table 设置不同的宽度
markdown文件中定义了 3 个 table ,在 table 外添加 div 和对应的 class。// markdown 文件<div class="table-01">| 参数 | 说明 | 类型 ||:----:|:---:|:----:||name|姓名 |String||age|年龄 |Number||salary|薪水 |Number|</div><div class="table-02">| 参数 |原创 2021-04-21 18:05:54 · 1595 阅读 · 0 评论 -
06. Vuepress1.x 嵌入 js 文件
修改 .vuepress/config.js 配置文件设置 head 属性。 注意:base.js文件放在 .vuepress/public/js文件夹下,public/js要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { host: 'localhost', // ip port: '8099', //端口号 head: [ [ 'link', // 设置 fa..原创 2021-04-09 15:53:02 · 1720 阅读 · 0 评论 -
Vuepress markdown 文件中嵌入 iframe
直接在 markdown 中写 HTML 注意:index.html 文件放在.vuepress/public/demo 文件夹下,public 要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。# 测试01 - Typescript## 二级标题### 三级标题<iframe id="iframe" height=350 width=80% frameborder=0 allowfullscreen="true" src="/demo/index.h.原创 2021-04-09 15:23:57 · 2307 阅读 · 0 评论 -
Vuepress 导航栏与侧边栏配置详解
1、默认读取themeConfig.nav.link 以 / 结束默认读取 README.md2、sidebar.path 设为键值对时,key 以 / 结尾,与 path 拼接,为完整的 md 文档路径。path 可省略 .md 后缀3、sidebarDepth 默认为13、sidebar.path 写成 ['test01', 'test02'] 侧边栏的目录自动读取test01.md 中的 一级、二级标题...原创 2021-02-01 16:02:28 · 17856 阅读 · 8 评论 -
Vuepress:将 js 文件注释转为 markdown
一、安装npm i vuepress-jsdoc -g二、查看版本以检查是否安装成功vuepress-jsdoc -V三、在项目文件夹下使用vuepress-jsdoc --source ./src注意必须得指定文件夹,不能如下写法,否则会无线循环vuepress-jsdoc --source ./参考:https://github.com/ph1p/vuepress-jsdoc...原创 2021-01-31 23:54:02 · 684 阅读 · 1 评论 -
04. Vuepress1.x 设置导航栏 logo
修改 .vuepress/config.js 配置文件设置 themeConfig.logo 属性。 注意:图片放在 .vuepress/public 文件夹下,public 要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { host: 'localhost', // ip port: '8099', //端口号 head: [ [ 'link', // 设置 fav原创 2021-01-29 09:51:24 · 2098 阅读 · 5 评论 -
02. Vuepress1.x 修改端口号
默认端口号是 8080。 可修改.vuepress/config.js 配置文件。 新增 port 属性,这里改为 8099。module.exports = { host: 'localhost', // ip port: '8099', //端口号 head: [ [ 'link', // 设置 favicon.ico,注意图片放在 public 文件夹下 { rel: 'icon', href: 'log.原创 2021-01-29 09:39:25 · 1626 阅读 · 0 评论 -
03. Vuepress1.x 设置 favicon.ico 图标
修改 .vuepress/config.js 配置文件设置 head 属性,添加 link 标签,href 设置图片路径。 注意:图片放在 .vuepress/public 文件夹下,public 要手动创建。 编译后 dist 文件夹会将 public 文件夹下的文件放出。module.exports = { head: [ [ 'link', // 设置 favicon.ico,注意图片放在 public 文件夹下 {原创 2021-01-29 09:32:34 · 3384 阅读 · 0 评论 -
01. Vuepress1.x 创建自己的技术文档站
一、创建VuePress1) 简介VuePress官网2) 安装1、安装,注意 VuePress 基于 node 8.0+ npm install -g vuepress 2、创建项目文件夹 VueComponents3、快速初始化 package.json npm init -y 4、在 package.json 中添加如下两行 { "scripts": { "docs:dev": "vuepress dev...原创 2021-01-25 17:49:54 · 2903 阅读 · 3 评论 -
05. Vuepress1.x CSS 样式覆盖:修改内容宽度
目录一、原始样式二、修改三、其它修改一、原始样式可以看见左右两侧的红框是空白的开发者工具中可以看到页面的.theme-default-content 限制了最大 width二、修改1、.vuepress 文件夹下创建 styles/palette.styl (这里使用 stylus)2、重置取消 max-width 设置,classname 直接从 开发者工具 中复制 即可3、注意:新建文件后一定要重启,刷新是无效果的4、效果图如下PS:其它.原创 2021-01-26 17:38:26 · 3751 阅读 · 0 评论