合肥手机网站开发,做个视频网站,做电影网站的服务器,专业的网站设计建设最近准备对前端知识做一个梳理#xff0c;将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 VuePress 的主要过程#xff0c;同时也提供了部分自定义的配置#xff0c;示例地址#xff1a;http://doc.i-fanr.com 环境搭建 VuePress 有着比较完善的中文文… 最近准备对前端知识做一个梳理将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 VuePress 的主要过程同时也提供了部分自定义的配置示例地址http://doc.i-fanr.com 环境搭建 VuePress 有着比较完善的中文文档我们可以直接参照文档搭建首先确保电脑上已经安装了 Node.js 并且版本号不小于 8.6 # 检查 Node.js 版本号
node -v建立一个文件夹用来搭建 VuePress, 例如我的 VuePress 搭建在 spacexcode目录 下 mkdir spacexcode cd spacexcode将 VuePress 安装为本地依赖 yarn add -D vuepress # npm install -D vuepress创建你的第一篇文档 mkdir docs echo # Hello VuePress docs/README.md在 package.json 中添加一些 scripts {scripts: {docs:dev: vuepress dev docs,docs:build: vuepress build docs}
}在本地启动服务器 yarn docs:dev # npm run docs:dev添加主题 环境添加完毕后接下来就是装修完善了VuePress 的原始样式更适合制作文档因此我们需要自定义样式。VuePress 提供了自定义主题与样式的方法为了简单我们可以直接使用别人制作好的博客主题 这里推荐一个我正在使用的主题 vuepress-theme-reco 主题的使用方法文档中已经介绍的很详细了这里分享几个我自己的自定义设置 修改页面样式 原始主题的页面内容宽度最大值是固定的在我的大屏幕上显得有些窄了因此我将文本宽度改为了页面宽度的 50%这个设置与 Hexo 的设置一致每个人可以根据自己的爱好修改。在 .vuepress/styles/palette.styl 文件中添加如下样式 // 首页内容宽度更改为页面的 75%
.home-blog.home-blog-wrapperwidth :75%// 文章页内容宽度更改为页面的 50%
.page.page-titlemax-width :50%.content__default:not(.custom)max-width :50%.page-navmax-width :50%.comments-wrappermax-width :50% !important添加插件 安装插件以 vuepress-plugin-image插件为例 yarn add vuepress-plugin-image然后在 config.js 中添加插件 plugins: [vuepress/plugin-back-to-top,vuepress/plugin-medium-zoom,image]添加主题中未包含的插件这里介绍几个我使用的插件 vuepress-plugin-viewer 一个图片查看插件 vuepress-plugin-pangu 自动在文章中英文与汉字之间添加空格 vuepress-plugin-tabs 增加一个带有 tab 标签的容器 vuepress-plugin-click 鼠标点击时增加特殊效果 vuepress-plugin-demo-block 添加 H5 代码预览区块 部署 博客搭建完成后需要部署我们可以创建一个 shell 文件来打包部署我的部署到 github.io 下面这是我的 shell 文件 #!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
yarn docs:build# 进入生成的文件夹
cd docs/.vuepress/distgit init
git add -A
git commit -m deploy
git push -f gitgithub.com:fantingsheng/spacexcode.git master- END - 太空编程 分享硬核的编程知识 分享精彩码上快乐。JavaScript已然上天有朝一日实现太空编程回复【pdf】更有海量的优质电子书供下载。 spacexcode
