更新:README.md
This commit is contained in:
parent
dbc8a8954f
commit
d61142356a
215
README.MD
215
README.MD
|
|
@ -1,191 +1,96 @@
|
|||
# 基于VuePress构建的静态博客
|
||||
|
||||
## 简介
|
||||
## Introduce
|
||||
|
||||
基于 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 构建静态博客站。内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。
|
||||
1. 根据 vuepress 的默认主题修改而成,追求**极简主义**。
|
||||
|
||||
* **简洁至上**
|
||||
* 继承了[VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 简洁至上的特性,以 Markdown 为中心的项目结构,让你专注于写作
|
||||
* **高自动化**
|
||||
* 项目结合了各种自动化技术,[自动生成侧边栏](https://github.com/xugaoyi/blog/issues/113),[CI持续集成部署](https://xugaoyi.com/pages/6b9d359ec5aa5019/),[自动百度链接推送](#百度自动推送和统计),结合GitHub Actions开发的自动化[每天定时推送](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/)
|
||||
* **SEO友好**
|
||||
* 让你的博客给更多人看到
|
||||
2. 这是一个兼具**博客文章** 与 **学习笔记** 管理的博客主题。
|
||||
|
||||
3. 添加博客所需的**评论**、**时间轴**、**分类**、**最近更新** 等。
|
||||
|
||||
4. 这主题可以很方便的管理你的**学习笔记**和**教程文档**,**扩展的搜索框**让你快速查找文档。
|
||||
|
||||
5. 添加对*前端程序员*很友好**demo演示模块**,很方便的在博客中插入demo,同时可以查看demo源码,跳转到codepen在线编辑。
|
||||
|
||||
6. 自动侧边栏满足不了需求?手动配置侧边栏工作繁杂?没关系,我们有**自动生成侧边栏**!
|
||||
|
||||
[根据目录自动生成侧边栏的约定说明](https://github.com/xugaoyi/blog/issues/113)
|
||||
|
||||
> **分类标签**不需要你每个文件都设置 [Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html),只需按照我们的目录约定,我们会按照目录来进行分类,这更适合管理你的学习笔记。
|
||||
|
||||
7. vuepress 的页面链接对于博客来说是一个阴暗面,官方对于 [永久链接](https://vuepress.vuejs.org/zh/guide/permalinks.html) 的处理我个人不是特别喜欢,因此我们就有了**自动生成永久链接**,你不需要给每个页面定义一个[Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html)指定永久链接,我们会通过文件名来生成一个永久链接码到你的页面Front Matter。但这并不妨碍你在特定页面手动指定自己喜欢的永久链接。
|
||||
|
||||
[自动生成的Front Matter](https://github.com/xugaoyi/blog/issues/324)
|
||||
|
||||
8. **自动部署**,内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。
|
||||
|
||||
[自动部署到 github 或 coding](https://github.com/xugaoyi/blog/issues/325)
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
#### 1、克隆项目后进入
|
||||
## Quick start
|
||||
|
||||
```bash
|
||||
# 克隆项目后进入
|
||||
git clone https://github.com/xugaoyi/blog
|
||||
cd blog
|
||||
```
|
||||
|
||||
#### 2、安装依赖并运行开发服务
|
||||
|
||||
```bash
|
||||
# 安装依赖并运行开发服务
|
||||
npm install # or yarn install
|
||||
npm run dev # or yarn dev
|
||||
```
|
||||
|
||||
> 使用yarn的可以把以下`npm run`命令替换为`yarn`
|
||||
|
||||
#### 3、编辑
|
||||
|
||||
编辑或新增 \*.md文件,以及修改 `docs/.vuepress/config.js` 中的 nav 导航栏等信息(具体可查看 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 文档),需重新运行·`npm run dev`并刷新浏览器查看更新。
|
||||
## Other
|
||||
|
||||
#### 4、部署
|
||||
1. **百度推送和统计**
|
||||
|
||||
本项目包含两种部署方式:
|
||||
以插件的形式加入百度推送和统计,`npm`安装如下插件并配置
|
||||
|
||||
##### 1)、使用deploy.sh脚本部署
|
||||
```js
|
||||
//config.js
|
||||
'vuepress-plugin-baidu-autopush', // 百度推送
|
||||
|
||||
[
|
||||
'vuepress-plugin-baidu-tongji', // 百度统计
|
||||
{
|
||||
hm: '8a5**************47d607481723b7815d' // 设置你自己的hm参数
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
第一步,修改`deploy.sh`脚本内的仓库地址为你的仓库,如有自定义域名则一并修改,没有则注释
|
||||
2. **评论模块**
|
||||
|
||||
```bash
|
||||
# 如果是发布到自定义域名
|
||||
echo 'xugaoyi.com' > CNAME
|
||||
[使用Gitalk实现静态博客无后台评论系统](https://xugaoyi.com/pages/1da0bf9a988eafe5/)
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io
|
||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||
3. **自定义域名及解析**
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
|
||||
```
|
||||
[自定义域名及解析](https://github.com/xugaoyi/blog/issues/326)
|
||||
|
||||
第二步,一键部署命令
|
||||
4. **SEO相关**
|
||||
|
||||
```bash
|
||||
npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支
|
||||
```
|
||||
> windows系统下使用bash命令窗
|
||||
```js
|
||||
// config.js
|
||||
module.exports = {
|
||||
description: '填写网站描述', // 以 <meta> 标签渲染到页面html中
|
||||
head: [ // 注入到页面<head> 中的标签,[tagName, { attrName: attrValue }]
|
||||
['meta', { name: 'keywords', content: '填写关键字'}]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
第三步,设置GitHub Pages为gh-pages分支。
|
||||
5. **图床**
|
||||
|
||||
[GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床](https://xugaoyi.com/pages/a5f73af5185fdf0a/)
|
||||
|
||||
6. **结合GitHub Actions开发的每天定时百度推送,加快收录**
|
||||
|
||||
##### 2)、使用GitHub Action自动持续集成
|
||||
[GitHub Actions 定时运行代码:每天定时百度链接推送](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/)
|
||||
|
||||
第一步,按照[官方文档](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line),生成一个github token (令牌)。
|
||||
7. **在线编辑和新增文章的方法**
|
||||
|
||||
第二步,将这个密钥储存到当前仓库的`Settings/Secrets`里面。
|
||||
> `Settings/Secrets`是储存秘密的环境变量的地方。环境变量的名字可以随便起,这里用的是`ACCESS_TOKEN`。如果你不用这个名字,`.github/workflows/ci.yml`脚本里的变量名也要跟着改。
|
||||
[在线编辑和新增文章的方法](https://github.com/xugaoyi/blog/issues/327)
|
||||
|
||||
第三步,push提交代码到GitHub仓库master分支。
|
||||
|
||||
第四步,设置GitHub Pages为gh-pages分支。
|
||||
|
||||
|
||||
|
||||
|
||||
> 注意:如果您有自定义域名,需要在`.github/workflows/ci.yml`中修改`xugaoyi.com`为你的域名。
|
||||
>
|
||||
> 如没有自定义域名,需要在`.github/workflows/ci.yml`中去掉`cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME && cd -`命令
|
||||
>
|
||||
> 参考 [GitHub Action实现自动部署静态博客](http://xugaoyi.com/pages/6b9d359ec5aa5019/)
|
||||
|
||||
|
||||
|
||||
#### 4.1、部署升级:同时部署到github和[coding](https://dev.tencent.com/)
|
||||
|
||||
为了让博客站能够让百度收录,因此我把博客部署到了coding。相关[文章](https://xugaoyi.com/pages/41f87d890d0a02af/)。
|
||||
|
||||
在原有部署方式上做了升级,主要修改代码文件有下面这两个:
|
||||
|
||||
`deploy.sh`文件看 [这里](https://github.com/xugaoyi/blog/blob/master/deploy.sh)
|
||||
|
||||
> 看不懂代码shell代码? 参考:[shell教程](https://ipcmen.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
`ci.yml`文件看 [这里](https://github.com/xugaoyi/blog/blob/master/.github/workflows/ci.yml)
|
||||
|
||||
> 看不懂yaml代码? 参考:[yaml教程](https://xugaoyi.com/pages/4e8444e2d534d14f/)
|
||||
|
||||
|
||||
|
||||
使用前先将[github token (令牌) ](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)和[coding token (令牌)](https://dev.tencent.com/help/doc/account/access-token) 同时设置到github仓库的`Settings/Secrets`位置。
|
||||
|
||||

|
||||
|
||||
##### 部署方式有两种:
|
||||
|
||||
##### 1) 、使用如下命令一键部署到github和coding
|
||||
|
||||
```sh
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
##### 2)、使用GitHub Action自动部署到github和coding
|
||||
|
||||
只需要push提交代码到github仓库master分支即可。
|
||||
|
||||
> 参考 [《GitHub Action实现自动部署静态博客》](http://xugaoyi.com/pages/6b9d359ec5aa5019/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 自定义域名以及解析 (可选)
|
||||
|
||||
#### 1、申请域名
|
||||
|
||||
申请域名当然去哪都行。 国内的[阿里云](https://link.zhihu.com/?target=https%3A//wanwang.aliyun.com/domain/),[腾讯云](https://cloud.tencent.com/),国外的[freenom](https://link.zhihu.com/?target=http%3A//www.freenom.com/),namecheap什么的 。 操作大同小异,都是
|
||||
|
||||
* 注册账号,登录
|
||||
|
||||
* 搜索并找到可用的域名,买下来。比如我在腾讯云买的一个域名:`xugaoyi.com`
|
||||
|
||||
#### 2、DNS解析
|
||||
|
||||
想要在浏览器里面输入`xugaoyi.com`就能跳到博客页面。我们首先需要做的就是通过DNS解析将`xugaoyi.com` 与某已有域名绑定起来(CNAME),或者是固定的ip地址绑定起来(A)。
|
||||
|
||||
这里以腾讯云操作为例,步骤如下:
|
||||
|
||||
* 域名列表中点击`解析`
|
||||
|
||||

|
||||
|
||||
* 进入解析页面后,点击`添加记录`。填入,记录类型:`CNAME`,主机记录:`www`或`@`,解析线路:默认,记录值:你的github pages地址`<userName>.github.io`,TTL:默认的10分钟,确定。
|
||||
|
||||

|
||||
|
||||
#### 3、使github pages与域名关联
|
||||
|
||||
deploy.sh添加如下脚本
|
||||
|
||||
```bash
|
||||
echo 'xugaoyi.com' > CNAME # // 域名替换成你的
|
||||
```
|
||||
|
||||
在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy\>.env.BUILD_SCRIPT中添加脚本
|
||||
|
||||
```sh
|
||||
"cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME" && cd -
|
||||
# 域名替换成你的
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## 其他
|
||||
|
||||
|
||||
#### 百度自动推送和统计
|
||||
|
||||
加入了自动推送和统计插件
|
||||
|
||||
```js
|
||||
'vuepress-plugin-baidu-autopush', // 百度自动推送,作用:加快将页面推送给百度搜索,https://ziyuan.baidu.com/
|
||||
|
||||
[
|
||||
'vuepress-plugin-baidu-tongji', // 百度统计,https://tongji.baidu.com
|
||||
{
|
||||
hm: '8a5**************47d607481723b7815d'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
> 如果你也需要百度统计功能,请把hm参数改为你自己的,请到<https://tongji.baidu.com>获取你自己的hm参数
|
||||
|
|
@ -3,14 +3,13 @@ const sidebar = require('./config/sidebar-auto.js');
|
|||
|
||||
module.exports = {
|
||||
title: "Evan's blog", // 标题
|
||||
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
|
||||
// base: '/blog/', //默认'/' || github仓库名'/<仓库名>/',
|
||||
head: [ // 注入到当前页面<head> 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?]
|
||||
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
|
||||
// base: '/blog/', // 默认'/' || github仓库名'/<仓库名>/',
|
||||
head: [ // 注入到页面<head> 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?]
|
||||
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons,资源放在public文件夹
|
||||
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
|
||||
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],
|
||||
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
|
||||
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
|
||||
|
||||
// 以下是vuepress-plugin-demo-block插件所需依赖
|
||||
// ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }], // 此文件会影响导航router-link-active样式的切换
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ module.exports = {
|
|||
|
||||
"/about/": [["01.about.md","about"]],
|
||||
|
||||
"/timeline/": [["01.timeline.md","timeline"]],
|
||||
"/timeline/": [["01.时间轴.md","时间轴"]],
|
||||
|
||||
"/《ES6 教程》笔记/": [{"title":"《ES6 教程》笔记","collapsable":false,"children":[]},["01.ECMAScript 6 简介.md","ECMAScript 6 简介"],["02.let 和 const 命令.md","let 和 const 命令"],["03.变量的解构赋值.md","变量的解构赋值"],["04.字符串的扩展.md","字符串的扩展"],["05.字符串的新增方法.md","字符串的新增方法"],["06.正则的扩展.md","正则的扩展"],["07.数值的扩展.md","数值的扩展"],["08.函数的扩展.md","函数的扩展"],["09.数组的扩展.md","数组的扩展"],["10.对象的扩展.md","对象的扩展"],["11.对象的新增方法.md","对象的新增方法"],["12.Symbol.md","Symbol"],["13.Set 和 Map 数据结构.md","Set 和 Map 数据结构"],["14.Proxy.md","Proxy"],["15.Reflect.md","Reflect"],["16.Promise 对象.md","Promise 对象"],["17.Iterator 和 for-of 循环.md","Iterator 和 for-of 循环"],["18.Generator 函数的语法.md","Generator 函数的语法"],["19.Generator 函数的异步应用.md","Generator 函数的异步应用"],["20.async 函数.md","async 函数"],["21.Class 的基本语法.md","Class 的基本语法"],["22.Class 的继承.md","Class 的继承"],["23.Module 的语法.md","Module 的语法"],["24.Module 的加载实现.md","Module 的加载实现"],["25.编程风格.md","编程风格"],["26.读懂 ECMAScript 规格.md","读懂 ECMAScript 规格"],["27.异步遍历器.md","异步遍历器"],["28.ArrayBuffer.md","ArrayBuffer"],["29.最新提案.md","最新提案"],["30.装饰器.md","装饰器"],["31.函数式编程.md","函数式编程"],["32.Mixin.md","Mixin"],["33.SIMD.md","SIMD"],["34.参考链接.md","参考链接"]],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
// 样式重置
|
||||
body
|
||||
background: none
|
||||
a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}
|
||||
a,input,button
|
||||
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
|
||||
|
||||
|
||||
// md文件中的按钮
|
||||
|
|
@ -30,7 +31,6 @@ table
|
|||
.gt-container .gt-comments-null
|
||||
color #999
|
||||
|
||||
|
||||
// 侧边栏高出评论区
|
||||
.sidebar
|
||||
z-index 11
|
||||
|
|
@ -49,30 +49,28 @@ table
|
|||
fill $accentColor!important
|
||||
|
||||
// qq徽章
|
||||
.qq{position: relative;}
|
||||
.qq::after{
|
||||
content: "可撩";
|
||||
background: $accentColor;
|
||||
color:#fff;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
font-size:12px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -35px;
|
||||
transform:scale(0.85);
|
||||
}
|
||||
.qq
|
||||
position: relative;
|
||||
.qq::after
|
||||
content: "可撩";
|
||||
background: $accentColor;
|
||||
color:#fff;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
font-size:12px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -35px;
|
||||
transform:scale(0.85);
|
||||
|
||||
// demo模块图标颜色
|
||||
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover .vuepress-plugin-demo-block__expand::before {
|
||||
border-top-color: $accentColor !important;
|
||||
border-bottom-color: $accentColor !important;
|
||||
}
|
||||
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover svg {
|
||||
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover
|
||||
.vuepress-plugin-demo-block__expand::before
|
||||
border-top-color: $accentColor !important;
|
||||
border-bottom-color: $accentColor !important;
|
||||
svg
|
||||
fill: $accentColor !important;
|
||||
}
|
||||
|
||||
|
||||
//iframe
|
||||
iframe {
|
||||
margin: 1rem 0
|
||||
}
|
||||
iframe
|
||||
margin: 1rem 0
|
||||
|
|
@ -71,6 +71,11 @@ export default {
|
|||
font-size 1.3rem
|
||||
font-weight bold
|
||||
padding 0 0 .5rem 1rem
|
||||
h1
|
||||
font-size 1.8rem
|
||||
img
|
||||
width 28px
|
||||
margin-bottom: -4px;
|
||||
.article-wrapper
|
||||
overflow hidden
|
||||
dl
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PC端features块 s -->
|
||||
<!-- PC端features块 e -->
|
||||
</main>
|
||||
|
||||
<!-- 移动端slide s -->
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function changeURLArg(url, arg, arg_val) {
|
|||
|
||||
## 不刷新页面修改url参数
|
||||
|
||||
https://www.cnblogs.com/wuting/p/8946927.html
|
||||
<https://www.cnblogs.com/wuting/p/8946927.html>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: timeline
|
||||
title: 时间轴
|
||||
date: 2019-12-31 13:49:34
|
||||
permalink: /timeline
|
||||
sidebar: false
|
||||
|
|
@ -165,8 +165,8 @@ ul
|
|||
height: 100%;
|
||||
background: #EAECEF;
|
||||
>li
|
||||
transition: transform 0.25s ease-in-out 0.08s;
|
||||
margin-bottom: 50px;
|
||||
transition: all .25s ease-in-out;
|
||||
margin-bottom: 55px;
|
||||
.year
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
|
|
@ -195,7 +195,7 @@ ul
|
|||
border-bottom: 1px dashed #EAECEF;
|
||||
position: relative;
|
||||
color: #666;
|
||||
transition: all 0.25s ease-in-out 0.08s;
|
||||
transition: all 0.25s ease-in-out;
|
||||
.date
|
||||
min-width: 40px;
|
||||
line-height: 30px;
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
"name": "evanblog",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"test": "node utils/frontmatter.js",
|
||||
"test2": "node utils/frontmatter.js -update",
|
||||
"dev": "node utils/frontmatter.js && node utils/sidebar.js && vuepress dev docs",
|
||||
"build": "node utils/frontmatter.js && node utils/sidebar.js && vuepress build docs",
|
||||
"deploy": "bash deploy.sh",
|
||||
|
|
|
|||
|
|
@ -76,27 +76,6 @@ function main() {
|
|||
|
||||
}
|
||||
|
||||
|
||||
// if(dataStr.substring(0,3) !== '---'){ // 没有FrontMatter
|
||||
///console.log(`写入FrontMatter:${file.filePath}`)
|
||||
// writeFrontMatter(file, dataStr);
|
||||
// } else { // 已有FrontMatter
|
||||
// if (arg !== '-update'){
|
||||
// return;
|
||||
// }
|
||||
// // 重新写入FrontMatter
|
||||
// const dataArr = dataStr.split(/\r\n|\n|\r/gm);
|
||||
// const fmArr = dataArr.slice(0,5);
|
||||
// const dataStrOld = dataArr.slice(5).join('\r\n');
|
||||
// // 判断FrontMatter 是否为自动生成的格式
|
||||
// if (fmArr[0] === '---' && /title/.test(fmArr[1]) && /date/.test(fmArr[2]) && /permalink/.test(fmArr[3]) && fmArr[4] === '---') {
|
||||
// console.log(`更新FrontMatter:${file.filePath} `)
|
||||
// writeFrontMatter(file, dataStrOld);
|
||||
// } else {
|
||||
// logger.warn(`此文件FrontMatter更新失败${file.filePath},因为它的FrontMatter格式并非自动生成的。`)
|
||||
// }
|
||||
// }
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue