vuepress自定义样式 vuepress自定义页面

转载

是大魔术师 2024-04-06 10:36:46

文章标签 vuepress自定义样式 github vue git json 文章分类 架构后端开发

文章目录

一、什么是VuePress
二、搭建项目
三、部署上线
四、可能用到的Markdown语法
五、出现的错误及解决

一、什么是VuePress

VuePress 是尤雨溪（vue.js 框架作者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网

其实类似的建站工具有很多，比如 WordPress、Jekyll、Hexo 等，其中 WordPress 需要自己购买虚拟主机，不考虑；Jekyll 是 Github-Page 默认支持的，听说操作比较复杂，没有用过不做过多评价了；Hexo 之前一直在用，但一直觉得主题不好看，风格不够简洁优雅。自从遇见 VuePress，嗯，就是它了~

VuePress 有很多优点：

界面简洁优雅（个人感觉比 HEXO 好看）
容易上手（半小时能搭好整个项目）
更好的兼容、扩展 Markdown 语法
响应式布局，PC端、手机端
Google Analytics 集成
支持 PWA

二、搭建项目

1.新建项目文件夹

2.在该新建文件夹下，全局安装VuePress

npm install -g vuepress

3.进入vuepressBlogDemo文件夹，初始化项目

npm init

4.创建文件夹和文件

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

5.在config.js 文件中配置网站标题、描述、主题等信息

module.exports = {
  title: 'Chen\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

6.配置首页结构

将刚开始创建的README.md文件内容改成如下:

---
home: true
heroImage: /img/banner.png
heroText: lhs的日常记录
tagline: 喜欢打王者,只会射手
features:
- title: 是个160斤的胖子
  details: 是个160多斤的胖子,想要减肥,哪天你看不到这段话了,那说明我已经瘦下来了

7.在package.json 文件中添加两个启动命令

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

8.编译项目并在浏览器中展示

npm run dev

三、部署上线

采用使用Github Pages部署网页

1.登录个人github并新建仓库

2.在项目文件夹下新建deploy.sh发布脚本，或者使用gh-pages插件

方法1：使用deploy.sh文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git 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:<USERNAME>/<USERNAME>.git master:gh-pages

cd -

在package.json文件夹中script添加发布命令

"deploy": "bash deploy.sh"

方法2：npm或yarn下载gh-pages插件

npm i -D gh-pages
yarn add -D gh-pages

在package.json文件夹中script下添加命令

"deploy": "gh-pages -d docs/.vuepress/dist"

3.运行命令

npm run deploy

完成打包并上传github，可以查看该项目的github-pages

四、可能用到的Markdown语法

1.代码高亮

在 .md 文件中书写代码是。可在 ```后面添加js 、html、json等格式类型，代码可按照指定类型高亮

2.自定义容器

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

3.支持Emoji

Emoji大全 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more (webfx.com)

4.支持PWA

配置方法如下：

config.js文件中增加

head: [ // 注入到当前页面的 HTML <head> 中的标签
  ['link', { rel: 'manifest', href: '/photo.jpg' }],
  ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],
],
serviceWorker: true // 是否开启 PWA

public 文件夹下新建 manifest.json 文件，添加

{
  "name": "张三",
  "short_name": "张三",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "张三的个人主页",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./photo.jpg",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}