VuePress 静态网站生成

news/2024/4/27 16:42:47/文章来源:https://blog.csdn.net/weixin_34162401/article/details/88614595

使用技术:

  • VuePress - Vue 驱动的静态网站生成器
仓库地址:https://github.com/yinian-R/v...

全局安装

## 安装
yarn global add vuepress # 或者:npm install -g vuepress

现有项目

如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。

## 没有项目可以初始化
yarn init## 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress## 新建一个 docs 文件夹
mkdir docs## 新建一个 markdown 文件
echo # Hello VuePress! > docs/README.md## 开始写作
npx vuepress dev docs

接着,在 package.json 里加一些脚本:

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

基本配置

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}

静态资源

创建public文件夹,主要用于存放静态资源

.
├─ docs
│  └─ .vuepress
│     └─ public
│          └─ image
│               └─ favicon.ico

添加网站 favicon,修改 .vuepress/config.js 内容

module.exports = {head:[['link', {rel:'icon', href:'/image/favicon.ico'}]]
};

导航栏

你可以通过 themeConfig.nav 增加一些导航栏链接:

module.exports = {themeConfig: {nav: [{ text: '主页', link: '/' },{ text: '指南', link: '/guide/' },{text: '语言',items: [{ text: '中文', link: '/language/chinese/' },{ text: 'English', link: '/language/english/' }]},{ text: 'GitHub', link: 'https://github.com' }]}
};

首页

需要在dosc/README.md指定 home: true

---
home: true
heroImage: /image/favicon.ico
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /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
---

侧边栏

想要使 侧边栏(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一个包含了多个链接的数组:

module.exports = {themeConfig: {sidebar: ['/',['/hello', 'hello page']]}
};

部署

设置部署站点的基础路径。

module.exports = {base: '/vuepress-demo/',};

在你的项目中,创建一个如下的 deploy.sh 文件

#!/usr/bin/env bash
# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run docs:build# 进入生成的文件夹
cd docs/.vuepress/dist# 如果是发布到自定义域名
# echo 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO>git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pagescd -

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_765626.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接入网站总结

思路&#xff1a; 认证---->获取token(请求接口时,必须要带上token的值才可以访问接口,应该是考虑到安全问题)---->请求对应的接口获取数据 现在大网站的一些都有例子的 至少我现在做的qq和新浪都是有的。新浪的简单 拿新浪的举例吧。过程都是一样的。 1&#xff0c;一个…

PaperBye一个可智能改重的免费论文查重网站。

2019独角兽企业重金招聘Python工程师标准>>> 推荐一个可以智能改重的免费论文查重软件&#xff0c;可自动降低论文重复率&#xff0c;同步修改、实时查重&#xff0c;一边修改&#xff0c;一边查重&#xff0c;修改完即查重完毕&#xff0c;修改论文效率高&#xff…

大型网站技术架构(四)网站的高性能架构

2019独角兽企业重金招聘Python工程师标准>>> 网站性能是客观的指标&#xff0c;可以具体体现到响应时间、吞吐量、并发数、性能计数器等技术指标。 1、性能测试指标 1.1 响应时间 指应用执行一个操作需要的时间&#xff0c;指从发出请求到最后收到响应数据所需要的时…

网站程序(案例)

Insus.NET分享一个案例网站程序。程序中95%的功能添加与设置在后台管理平台进行&#xff0c;剩余的5%就是前台网页的自定义设计。程序是使用.NET Framework 4.0 ASP.NET MS SQL Server 2008 R2 VB.NET进行开发。功能与特色&#xff1a;文章编辑器使用&#xff1a;CuteEditor…

SharePoint 2013 报:网站在改进过程中处于只读状态,对此给您带来的不便,我们深表歉意...

SharePoint 2013备份过程意外中断&#xff0c;导致再打开站点报&#xff1a;网站在改进过程中处于只读状态&#xff0c;对此给您带来的不便&#xff0c;我们深表歉意 英文&#xff1a;We apologize for any inconvenience, but weve made the site read only while were making…

如何在XAMPP中设置多个网站

xampp 是一个非常方便的本地 apache php mysql 的调试环境&#xff0c;在本地安装测试 WordPress 等各种博客、论坛程序非常方便。今天我们来给大家介绍一下&#xff0c;如何使用 XAMPP 在本地进行安装多个网站。 一般情况下&#xff0c;我们只需要网站程序放到 xampp/htdoc …

网站主机、域名购买和部署的方法

本文主要适用于第一次购买域名和空间的朋友。 我们都知道一个网站想要在互联网上访问&#xff0c;大致需要三个东西。第一、我们要访问的网站本身的工程文件&#xff0c;就是用户看到的东西。第二、我们需要租用一个空间用来存放我们的网站工程文件&#xff0c;在空间中会有附带…

大型网站技术架构系列2:负载均衡

2019独角兽企业重金招聘Python工程师标准>>> 本文主要讲解nginx的负载均衡。 负载均衡基于nginx的反向代理功能。 ~~~~~~~~~~~~~~~~~~ 1&#xff09;让nginx支持jsp动态文件 操作方法&#xff1a;---修改nginx.conf&#xff0c;在server里添加 location ~ \.jsp$ {p…

转载-30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

原文&#xff1a;30分钟搞定后台登录界面&#xff08;103个后台PSD源文件、素材网站&#xff09; 目录 一、界面预览二、PSD源文件预览三、工具分享四、资源说明五、素材下载网站六、下载去年八月时要做一个OA系统为了后台界面而烦恼&#xff0c;后来写了一篇博客&#xff08;《…

python怎么开发网站_python可以开发网站吗

python可以开发网站&#xff0c;python在web开发方面强大的开发框架是django。做网站开发之前&#xff0c;同样要掌握一些python的基础语法。 1、python基础&#xff0c;因为用python开发的&#xff0c;所以python指定要会&#xff0c;最起码你也得会条件判断&#xff0c;循环&…

重定向次数过多怎么解决_网站速度对搜索引擎优化到底有怎么的影响?| 谷歌SEO怎么优化...

可能有些会很难理解网站页面速度和搜索引擎优化是如何联系起来的。但早在2010年&#xff0c;谷歌就表示&#xff0c;网站页面速度将在搜索引擎优化(SEO)中占据重要作用&#xff0c;这将会影响你的网站页面在搜索引擎结果页面(Search Engine Result Page)上的排名。随着移动设备…

发布网站碰到的问题

出现这种错误 编译器错误信息: CS0016: 未能写入输出文件 当时装了2个同样的数据库&#xff08;mysql一个高版本&#xff0c;一个低版本&#xff09;&#xff0c;导致不可以发布网站&#xff0c;也不可以访问别人在本地发布的网站 解决方法删除一个数据库既可以解决 解决管理员…

一键seo提交收录_百度网站提交,选择主动提交,还是被动收录?

对于百度收录而言&#xff0c;一直以来都是困扰SEO人员的一个核心问题&#xff0c;每天都会有大量的站长在思考&#xff0c;为什么我的页面没有收录&#xff0c;于是便开始想尽各种途径&#xff0c;促使页面被百度快速收录。这其中我们一定不会脱离下面三个渠道&#xff1a;① …

新闻发布网站代码_如何把新闻稿发布到门户网站上?上海专业代发新闻稿公司...

什么是软文营销&#xff1f;简单来说&#xff0c;就是把一篇关于您企业的宣传文章&#xff0c;新闻&#xff0c;会议活动&#xff0c;或者一个新的观点&#xff0c;或者是一篇可以引起读者共鸣的文章发布多家不同新闻媒体上&#xff0c;用户就可以在媒体上&#xff0c;或者从搜…

laravel 分词搜索匹配度_电商网站上的搜索功能是如何实现的?

今天是刘小爱自学Java的第159天。感谢你的观看&#xff0c;谢谢你。学习计划安排如下&#xff1a;索引库本质上和数据库类似&#xff0c;也是存储数据的&#xff0c;既然如此自然也会有增删改查。那么这个索引库到底有何特别应用呢&#xff1f;索引库的特别之处在于它的查询&am…

一批信息查询网站汇总

一、查企业 1、全国企业信用信息公示 http://gsxt.saic.gov.cn/ 国内企业工商注册登记信息 2、信用视界 http://www.x315.com/ 全球企业信息 3、悉知 http://www.xizhi.com/ 国内企业信息含联系方式经营范围 4、纳税人 http://hd.chinatax.gov.cn/fagui/action/InitCredit.do 5…

C# 如何检测UDP是否被占用_如何检测我们博客网站是否启用了Gzip压缩?附2种方法...

一般都建议博客网站开启 Gzip 压缩&#xff0c;因为开启这个压缩后最多可以减少 70&#xff05;的文件大小&#xff0c;从而减少通过网络传输的数据量以提高浏览的速度。那么如何检测我们博客网站是否启用了 Gzip 压缩呢&#xff1f;下面老古介绍 2 种检测方法&#xff0c;具体…

php下拉框 复原 提交之后_百度搜索资源平台(原百度站长平台)网站提交链接的详细教程...

有些同学经常问&#xff0c;为什么我文章明明原创的&#xff0c;但是百度老不收录&#xff1f;那么为了加快文章的收录速度&#xff0c;我们可以用好百度站长平台的链接提交功能。(进入方式如图)来看看&#xff0c; 百度站长平台的4种链接提交方式。一、站点地图提交当网站在建…

python如何下载5个网站视频_python爬网之教你轻松下载视频

项目背景&#xff1a; 作为程序媛的我&#xff0c;在疫情发生后就彻底宅了。没事的时候就打打游戏&#xff0c;看看电视剧&#xff0c;学学当大厨。 但在下载电视剧的时候发现&#xff0c;一个一个下载太麻烦了。这不符合程序媛的习惯。我的口号是“能拿程序完成的&#xff0c;…

怎么知道 网站是否直接明文保存密码_明文存储密码这种低级漏洞,谷歌也无法避免...

日前&#xff0c;谷歌公开承认其产品G Suite存在低级安全漏洞。G Suite管理控制台允许管理员为用户重置密码&#xff0c;然而该功能竟然以纯文本的形式明文存储用户的密码而非加密存储&#xff0c;如今该功能已被移除。今年3月份&#xff0c;Facebook 也承认以明文形式存储了数…