lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化首页 and 添加在线工具

This commit is contained in:
xugaoyi 2019-12-15 17:02:24 +08:00
parent 5e332e4d66
commit 2adb10ce55
15 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ci.yml vendored
View File

@ -29,4 +29,4 @@ jobs: # 工作流
BASE_BRANCH: master # 要部署的文件夹所在的分支. BASE_BRANCH: master # 要部署的文件夹所在的分支.
BRANCH: gh-pages # 部署到的分支 BRANCH: gh-pages # 部署到的分支
FOLDER: docs/.vuepress/dist # 要部署的文件夹. FOLDER: docs/.vuepress/dist # 要部署的文件夹.
BUILD_SCRIPT: npm install && npm run build && npm run chame # 部署前要执行的命令 #&& npm run list BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && echo 'b.evanblogweb.com' > CNAME # 部署前要执行的命令 #&& npm run list

18
README.MD
View File

@ -38,7 +38,7 @@ npm run dev # or yarn dev
```bash ```bash
# 如果是发布到自定义域名 # 如果是发布到自定义域名
echo 'www.evanblogweb.com' > CNAME echo 'evanblogweb.com' > CNAME
# 如果发布到 https://<USERNAME>.github.io # 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
@ -74,9 +74,9 @@ npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支
参考 [教程](http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html) 参考 [教程](http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)
> 注意：如果您有自定义域名，需要在package.json修改`www.evanblogweb.com`为你的域名。 > 注意：如果您有自定义域名，需要在`.github/workflows/ci.yml`中修改`evanblogweb.com`为你的域名。
> >
> 如没有自定义域名，需去掉`.github/workflows/ci.yml`脚本的`npm run chame`命令 > 如没有自定义域名，需要在`.github/workflows/ci.yml`中去掉`cd docs/.vuepress/dist && echo 'evanblogweb.com' > CNAME`命令
@ -109,20 +109,14 @@ npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支
deploy.sh添加如下脚本 deploy.sh添加如下脚本
```bash ```bash
echo 'www.evanblogweb.com' > CNAME # // 域名替换成你的 echo 'evanblogweb.com' > CNAME # // 域名替换成你的
```
pageage.json文件scripts中添加如下脚本
```js
"chame": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME"
// 域名替换成你的
``` ```
在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy\>.env.BUILD_SCRIPT中添加脚本 在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy\>.env.BUILD_SCRIPT中添加脚本
```sh ```sh
npm run chame "cd docs/.vuepress/dist && echo 'evanblogweb.com' > CNAME"
# 域名替换成你的
``` ```

2
deploy.sh
View File

@ -26,7 +26,7 @@ git commit -m 'deploy'
git push -f git@github.com:xugaoyi/evanblog.git master:gh-pages git push -f git@github.com:xugaoyi/evanblog.git master:gh-pages
# coding # coding
echo 'evanblogweb.com' > CNAME echo 'evanblogweb.com\nwww.evanblogweb.com' > CNAME
git add -A git add -A
git commit -m 'deploy' git commit -m 'deploy'
git push -f git@git.dev.tencent.com:xugaoyi/xugaoyi.git master # 发布到coding.net git push -f git@git.dev.tencent.com:xugaoyi/xugaoyi.git master # 发布到coding.net

4
docs/.vuepress/config.js
View File

@ -6,7 +6,7 @@ module.exports = {
// process.env.VUEPRESS_BASE 在package.json生成 // process.env.VUEPRESS_BASE 在package.json生成
// base: process.env.VUEPRESS_BASE || '/', // 基础路径，默认'/',如果放到github pages要改成仓库名 // base: process.env.VUEPRESS_BASE || '/', // 基础路径，默认'/',如果放到github pages要改成仓库名
head: [ // 注入到当前页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?] head: [ // 注入到当前页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
['link', { rel: 'icon', href: '/img/logo.png' }], //favicons，资源放在public文件夹 ['link', { rel: 'icon', href: '/img/logo2.png' }], //favicons，资源放在public文件夹
['meta', { name: 'keywords', content: 'Evan Blog,个人博客,技术博客,vuepress,技术文档,web前端,前端学习,技术总结与分享,JavaScript,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,面试问答集锦'}], ['meta', { name: 'keywords', content: 'Evan Blog,个人博客,技术博客,vuepress,技术文档,web前端,前端学习,技术总结与分享,JavaScript,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,面试问答集锦'}],
['meta', { name: 'baidu-site-verification', content: 'YwUALncFiI'}], ['meta', { name: 'baidu-site-verification', content: 'YwUALncFiI'}],
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}] // ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
@ -15,7 +15,7 @@ module.exports = {
lineNumbers: true // 代码行号 lineNumbers: true // 代码行号
}, },
themeConfig: { // 主题配置 themeConfig: { // 主题配置
logo: '/img/logo.png', // 导航栏logo logo: '/img/logo2.png', // 导航栏logo
nav, nav,
repo: 'xugaoyi/evanblog', // 导航栏右侧生成Github链接 repo: 'xugaoyi/evanblog', // 导航栏右侧生成Github链接
// editLinks: true, // 编辑链接 // editLinks: true, // 编辑链接

1
docs/.vuepress/config/nav.js
View File

@ -31,6 +31,7 @@ module.exports = [
{text: '面试问答集锦', link: '/other/interview'}, {text: '面试问答集锦', link: '/other/interview'},
]}, ]},
{text: '其他',items:[ {text: '其他',items:[
{text: '在线工具', link: '/other/utils'},
{text: '关于本博客搭建', link: 'https://github.com/xugaoyi/evanblog'}, {text: '关于本博客搭建', link: 'https://github.com/xugaoyi/evanblog'},
]}, ]},
]}, ]},

1
docs/.vuepress/config/sidebar.js
View File

@ -59,6 +59,7 @@ module.exports = { // 侧边栏
title: '其他', title: '其他',
collapsable: false, collapsable: false,
children: [ children: [
['utils','在线工具'],
['https://github.com/xugaoyi/evanblog','关于本博客搭建'], ['https://github.com/xugaoyi/evanblog','关于本博客搭建'],
] ]
}, },

BIN
docs/.vuepress/public/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/.vuepress/public/img/logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/.vuepress/public/img/other.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/.vuepress/public/img/python.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
docs/.vuepress/public/img/web.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

15
docs/.vuepress/theme/components/Home.vue
View File

@ -63,7 +63,7 @@ export default {
max-width: 100%; max-width: 100%;
max-height: 280px; max-height: 280px;
display: block; display: block;
margin: 3rem auto 1.5rem; margin: 2rem auto 1.5rem;
} }
h1 { h1 {
@ -100,7 +100,7 @@ export default {
.features { .features {
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;
padding: 1.2rem 0; padding: 2rem 0;
margin-top: 2.5rem; margin-top: 2.5rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -113,11 +113,12 @@ export default {
flex-grow: 1; flex-grow: 1;
flex-basis: 30%; flex-basis: 30%;
max-width: 30%; max-width: 30%;
text-align: center;
.image_title { .image_title {
width: 14rem; width: 14rem;
height: 10rem; height: 14rem;
border-radius: 15px; transition: all .3s;
} }
h2 { h2 {
@ -133,6 +134,12 @@ export default {
} }
} }
.feature:hover {
.image_title {
transform:scale(1.1,1.1)
}
}
.footer { .footer {
padding: 2.5rem; padding: 2.5rem;
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;

22
docs/other/utils.md Normal file
View File

@ -0,0 +1,22 @@
# 在线工具
| 名称 | 网址 | 描述 |
| ----------------- | ----------------------------------------------- | -------------------------- |
| codepen代码编辑器 | <https://codepen.io> | 在线代码编辑与演示 |
| tinypng图片压缩 | <https://tinypng.com> | png 和 jpg 图片压缩 |
| emoji表情备忘单 | <https://www.webfx.com/tools/emoji-cheat-sheet> | |
| processon在线作图 | <https://www.ecma-international.org> | 流程图、思维导图、原型图等 |
| 百度脑图 | <https://naotu.baidu.com> | 思维导图 |
#### CSS相关
| 名称 | 网址 | 描述 |
| --------------------- | ------------------------------------------------------ | ---- |
| CSS渐变生成器 | <https://www.colorzilla.com/gradient-editor/> | |
| CSS3-Box Shadow(阴影) | <https://www.html.cn/tool/css3Preview/Box-Shadow.html> | |
| 贝塞尔曲线生成器 | <https://cubic-bezier.com> | |

9
docs/readme.md
View File

@ -8,15 +8,15 @@ features:
- title: 前端 - title: 前端
details: web前端开发相关技术 details: web前端开发相关技术
url: /web/JavaScript/01.JavaScript中的名词概念 url: /web/JavaScript/01.JavaScript中的名词概念
imgname: /img/web.jpg imgname: /img/web.png
- title: python - title: python
details: 人生苦短，我学python details: 人生苦短，我学python
url: /python/ url: /python/
imgname: /img/python.jpg imgname: /img/python.png
- title: 技术杂谈 - title: 技术杂谈
details: 各种技术文档、教程、技巧分享、学习笔记等 details: 技术文档、教程、技巧、学习笔记等
url: /other/git url: /other/git
imgname: /img/article.jpg imgname: /img/other.png
footer: Copyright © 2019-present evanblog footer: Copyright © 2019-present evanblog
--- ---
@ -56,6 +56,7 @@ footer: Copyright © 2019-present evanblog
* 面试 * 面试
* [面试问题集锦](other/interview) * [面试问题集锦](other/interview)
* 其他 * 其他
* [在线工具](other/utils)
* [关于本博客搭建](https://github.com/xugaoyi/evanblog) * [关于本博客搭建](https://github.com/xugaoyi/evanblog)
* [更多... 👉](other/git) * [更多... 👉](other/git)

1
package.json
View File

@ -5,7 +5,6 @@
"dev": "vuepress dev docs", "dev": "vuepress dev docs",
"list": "node utils/getFilenames.js", "list": "node utils/getFilenames.js",
"build": "vuepress build docs", "build": "vuepress build docs",
"chame": "cd docs/.vuepress/dist && echo 'b.evanblogweb.com' > CNAME",
"deploy": "bash deploy.sh" "deploy": "bash deploy.sh"
}, },
"license": "MIT", "license": "MIT",