草庐IT

vuepress构建在线博客文档

Geroge1226 2023-03-28 原文

1、 说明

VuePress 是尤雨溪（vue.js 框架作者）发布基于vue 的静态网站生成器， vue 的 spa应用，内置 webpack，可以用来写文档。详见vuepress官网：https://vuepress.vuejs.org/zh/。

  • 官网有介绍与其他博客工具的区别如下：

    image.png

  • vuepress 特点：

    image.png

2、 安装使用

（1）创建文件夹存作为vuepress生成网站资源位置。这里我用vuepress-starter 名字可以自己取。

  mkdir  vuepress-starter

(2) 进入(1)创建目录，初始化。生成package.json

npm init -y

（3）全局安装vuepress，会拉下相关依赖包，放在node_modules下

npm install -g vuepress
image.png

（4）接下来就是进行vuepress配置了，VuePress 遵循 “约定优于配置” 的原则。我们先认识一下逛网推荐的目录结构

├── 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

各文件目录结构说明如下：

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: 客户端应用的增强。

（5）vuepress-starter 文件夹中创建docs文件夹，在 docs 中创建 .vuepress文件夹，在 .vuepress中创建 config.js 文件。(这里的vuepress前面是有一个实心点号。不然下面的文件不生效)。

（6）在package.json中添加scripts脚本

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

（7）在docs下增加README.md
随便补充点文字用于演示

image.png

（8）运行跑起来，浏览器访问 localhost:8080

npm run dev
image.png

浏览器示意图如下：


image.png

3、简单配置

vuepress 配置项都会存放在 .vuepress文件目录下。config.js是vuepress必要的配置项，它应该导出一个 JavaScript对象

module.exports = {
  title: '技术栈',
  description: '这是个人博哥网站'
}

3.1 主题配置

默认主题vue风格主题，修改主题需先安装主题，在配置。例如：vuepress-theme-hope
安装主题 ：vuepress-theme-hope。详情见主题文档 https://vuepress-theme-hope.gitee.io/v2/zh/guide/get-started/install.html

npm init vuepress-theme-hope@next [dir]

4、博客内容

5、发布到静态资源服务器

借助github的page功能

vuepress构建sectioncode

有关vuepress构建在线博客文档的更多相关文章

  1. ruby - 在 Ruby 中构建长字符串的简洁方法 - 2

    在编写Ruby(客户端脚本)时，我看到了三种构建更长字符串的方法，包括行尾，所有这些对我来说“闻起来”有点难看。有没有更干净、更好的方法？变量递增。ifrender_quote?quote="NowthatthereistheTec-9,acrappyspraygunfromSouthMiami."quote+="ThisgunisadvertisedasthemostpopularguninAmericancrime.Doyoubelievethatshit?"quote+="Itactuallysaysthatinthelittlebookthatcomeswithit:themo

  2. Matlab imread（）读到了什么 （浅显 当复习文档了） - 2

    matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1

  3. ruby - 使用 rbenv 和 ruby​​-build 构建 ruby​​ 失败，出现 undefined symbol : SSLv2_method - 2

    我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby​​2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby​​-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm

  4. Ruby 等同于 Sphinx 文档生成器？ - 2

    Ruby有一些不错的文档生成器，例如Yard、rDoc，甚至Glyph。问题是Sphinx可以做网站、PDF、epub、LaTex等。它在重组文本中完成所有这些事情。在Ruby世界中有替​​代方案吗？也许是程序的组合？如果我也能使用Markdown就更好了。 最佳答案 自1.0版以来，Sphinx有了“域”的概念，它是从Python和/或C以外的语言标记代码实体(如方法调用、对象、函数等)的方法。有一个rubydomain,所以你可以只使用Sphinx本身。您唯一会缺少的(我认为)是Sphinx使用autodoc从源代码自动创建文档

  5. ruby-on-rails - 如何构建复杂的 Rails 系统 - 2

    关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题editingthispost.关闭8年前。Improvethisquestion我们有以下(以及更多)系统，我们将数据从一个应用推送/拉取到另一个:托管CRM(InsideSales.com)Asterisk电话系统(内部)横幅广告系统(openx，我们托管)潜在客户生成系统(自行开发)电子商务商店(spree，我们托管)工作板(本土)一些工作网站抓取+入站工作提要电子邮件传送系统(如Mailchimp，自主开发)事件管理系统(如eventbrite，自主开发)仪表板系统(大量图表和

  6. ruby-on-rails - 在 irb 中阅读文档 - 2

    我怀念ipython的一件事是它有一个?为特定功能挖掘文档的运算符。我知道ruby​​有一个类似的命令行工具，但是我在irb中调用它非常不方便。ruby/irb有类似的东西吗？ 最佳答案 Pry是IPython的Ruby版本，它支持?命令来查找有关方法的文档，但语法略有不同:pry(main)>?File.dirnameFrom:file.cinRubyCore(CMethod):Numberoflines:6visibility:publicsignature:dirname()Returnsallcomponentsofthef

  7. ruby-on-rails -/usr/local/lib/libz.1.dylib，文件是为 i386 构建的，它不是被链接的体系结构 (x86_64) - 2

    在我的mac上安装几个东西时遇到这个问题，我认为这个问题来自将我的豹子升级到雪豹。我认为这个问题也与macports有关。/usr/local/lib/libz.1.dylib,filewasbuiltfori386whichisnotthearchitecturebeinglinked(x86_64)有什么想法吗？更新更具体地说，这发生在安装nokogirigem时日志看起来像:xslt_stylesheet.c:127:warning:passingargument1of‘Nokogiri_wrap_xml_document’withdifferentwidthduetoproto

  8. ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2

    我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

  9. ruby - 如何让 Nokogiri 解析并返回 XML 文档？ - 2

    这是一些奇怪的例子:#!/usr/bin/rubyrequire'rubygems'require'open-uri'require'nokogiri'print"withoutread:",Nokogiri(open('http://weblog.rubyonrails.org/')).class,"\n"print"withread:",Nokogiri(open('http://weblog.rubyonrails.org/').read).class,"\n"运行此返回:withoutread:Nokogiri::XML::Documentwithread:Nokogiri::

  10. H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

随机推荐