闲扯
很久以前,本身具有一个用hexo搭建的静态博客网站,记得当时为了把它搞出来,废了不少劲,然后厥后又断断续续更悛改一些设置和款式,然则由于觉得种种贫苦,所以就放在github
上积聚和许多的灰尘,到如今也懒得在扫除了(实际上是良久不必,有点忘了怎样用了:-1:),前段时刻在百度统计上看了看谁人静态网站的接见人数,发明已很久很久没人接见过了,,但是就在前段时刻(没错,就是前面谁人时刻),我灵光一闪,为啥不从新弄个静态博客呢,因而我就决议洗洗睡觉(没错,那是一个夜深人静的晚上),第二天抽闲找个简朴点的框架,然后搭个静态博客,用来纪录本身的所见所闻所想
第二天一大早吃完正午饭后(睡到正午了),我就看起了VuePress官网,没错,我挑选了VuePress框架,至于为何呢,有以下几点:
1、 如今开辟用vue框架
2、 就是想用它搞一个
3、 横竖也简朴,着实不可再换呗(搞不起来是不能够的)
4、 没有别的来由了
它有什么优点、特征、和别的框架对照?看人家官网就得了,说的挺好的
项目搭建
没啥好说的,依据人家官网搭就完事了,人家写的那末清楚、清楚明了。觉得尤大出品的文档都很友爱,浏览起来很轻易
# 将 VuePress 作为一个当地依靠装置
yarn add -D vuepress # 或许:npm install -D vuepress
# 新建一个 docs 文件夹,你也能够翻开编辑器来手动建立
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 启动,让你感觉下结果-----but:这类启动体式格局不爽,照样放package.json里费事,所以感觉完了就完毕历程吧,
npx vuepress dev docs
项目装置完成后,我们进入package.json
内里,增加script启动项
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
上面一顿操纵后我们如今要知道三件事变:
1、我们今后一切的文章都将在docs
中写
2、开辟,也就是写作的时刻实行:
yarn docs:dev # 或许:npm run docs:dev // 默许端口http://localhost:8080/
3、打包天生静态html文件,实行
yarn docs:build # 或许:npm run docs:build
默许情况下,天生的静态文件放在.vuepress/dist
中,不过能够改的
好了,先来熟悉下我们今后要大展拳脚的处所 docs
目次:
.
├─ docs //今后要在这内里写文章,直接在此文件夹下新建文件夹,然后再建md文档就行,链接会自动天生
│ ├─ README.md // 这个将会是我们今后的首页
│ └─ .vuepress // 这个内里会寄存一些设置和组建
│ └─ public // 静态文件寄存地
│ └─ components // 组建寄存地
│ └─ config.js //设置文件,我们今后的一切设置基础都在这里写
└─ package.json
谅解我这部份辩的比较糙,实在这部份看官网就好了,人家讲的确实挺细致的,要讲的主假如下面的内容:
首页设置
官网默许主题供应了一个只须要写写设置就可以天生的页面,花样是牢固的,和VuePress的首页一毛一样,然则这不是我想要的(我也不知道我想要什么样的),所以我在.vuepress/components
中新建了一个组建叫home
,同时在首页引入:(md文件里能够写vue代码的哦)
// 记得不要复制解释
---
navbar: false // 不要导航栏
isNoPage: true // 自定义的属性
sidebar: false // 不要侧导航
pageClass: home-list //自定也页面类
---
<home />
.vuepress/components/home.vue
和我们日常平凡写vue没啥区分,援用的时刻就用这个文件的文件名就可以够了,官网有引见,由于如今还没想好首页改做成什么样的,所以就先如许放着 isNoPage
是我本身写的,主假如为了标志当前是不是是文章页,今后会用来做推断,在this.$site.frontmatter
中寄存 pageClass
是页面自定义类,编译的时刻会把这个类加在外层的div中,能够依据这个来写本身想要的款式
/**这段css能够写在.vuepress/style.styl中,这个是我对首页写的款式**/
home-list{
.page-edit{
display: none /**隐蔽首页的编辑和末了修正时刻标签**/
}
#gitalk-container{
display:none /**隐蔽首页的批评**/
}
}
列表页的完成
每一张文章页,我都会在头部增加
---
tags: vuepress, 前端
description: 本文引见应当VuePress搭建一个博客,据官网说:VuePress 由两部份构成:一部份是支撑用 Vue 开辟主题的极简静态网站天生器,另一个部份是为誊写手艺文档而优化的默许主题。它的降生初志是为了支撑 Vue 及其子项目标文档需求。
---
- tags: 是当前页面的标签,用于在列表页天生标签云
- description:页面的形貌信息,在列表页会显现,官网中有猎取
more
之前的要领,然则会有款式,所以会觉得很丢脸,所以我就增加的这个description
字段,固然,我也并没有放弃官网的要领,由于有时刻能够真的懒得写形貌信息了,所以加了个推断
<div v-if="item.frontmatter.description" class="art">
{{item.frontmatter.description}}……<a :href="item.path" class="look">浏览原文</a>
</div>
<div class="art" v-html="item.excerpt" v-else></div>
猎取说有文章的列表我是经由过程一开始设置的isNoPage
来做的推断
const arts = this.$site.pages.filter(item => {
return !item.frontmatter || !item.frontmatter.isNoPage
})
标签的完成
我的标签是一个vue组建,然后在列表页引入改组件;上面说到,我在每一个文章前面都会加tags
,我会在标签组件中经由过程遍历this.$site.pages
,拿到一切的标签,然后去重,等于我一切页面的标签
<template>
<div class="tags">
<h6>标签云</h6>
<span v-for="item in tags" @click="handleChangeTag(item)">{{item}}</span>
<span @click="handleChangeTag('all')">一切</span>
</div>
</template>
<script>
export default {
data() {
return {
tags: []
}
},
created() {
const tags = this.$site.pages.map(item => {
return item.frontmatter && item.frontmatter.tags || ""
})
const tagsArr = tags.join(",").split(",").filter(i => i !== "")
this.tags = [...new Set(tagsArr)]
},
methods: {
// 点击标签变动列表
handleChangeTag(tag) {
this.$emit('change-tag',tag)
}
},
}
</script>
favorite.icon设置
favorite.icon
也就是网页左上角谁人小图标
起首我们须要一个小图标,然后放在.vuepess/public
下,然后
翻开.vuepress/config.js
,增加
head:[
['link', { rel: 'shortcut icon', href: '/favorite.icon type: 'image/jpg' }]
]
注重href写的是/favorite.icon
,而不是/public/favorite.icon
款式变动
在.vuepress
下新建两个styl
文件用来写款式
override.styl
:用来掩盖默许主体款式,比方我想让我的内容占有屏幕的90%,能够:
$contentWidth = 90%
style.styl
:写本身一些自定义的款式,能够在这个文件夹里写,比方零丁修正导航的色彩
.navbar{
background:red
}
对复制举行修正
我们对掘金举行大段笔墨复制的时刻会显现版权信息:
用vuepress搭建一个够本身用的博客
作者:给我讲个笑话
链接:
https://juejin.im/post/5ce945…泉源:掘金
著作权归作者一切。贸易转载请联络作者取得受权,非贸易转载请说明出处。
那末我们如安在博客中完成这个功用呢 ,实在很简朴,
起首修正我们的.vuepress/enhanceApp.js
文件(enhanceApp.js引见)
import copy from './common/copy'
export default ({
Vue, // VuePress 正在运用的 Vue 组织函数
options, // 附加到根实例的一些选项
router, // 当前运用的路由实例
siteData // 站点元数据
}) => {
setTimeout(() => {
try {
document && (() => { //对document的推断是防备编译的时刻报错
copy()
})()
} catch (e) {
console.error(e.message)
}
},500)
}
然后新建一个copy.js
的文件
export default () => {
function addCopy(e) {
let copyTxt = ""
e.preventDefault(); // 作废默许的复制事宜
copyTxt = window.getSelection(0).toString()
copyTxt = `${copyTxt}\n作者:静水深流\n原文:${window.location.href}\n著作权归作者一切。贸易转载请联络作者取得受权,非贸易转载请说明出处。`
const clipboardData = e.clipboardData || window.clipboardData
clipboardData.setData('text', copyTxt);
}
document.addEventListener("cut", e => {
addCopy(e)
});
document.addEventListener("copy", e => {
addCopy(e)
});
}
如许就可以够完成了,有兴致能够去博客体验一下
增加批评
作为一个有灵魂的博客,怎样能够不能批评呢,我能忍,博客也不能忍,我的批评体系用的是GITALK,官网说是这是一个基于 Github Issue 和 Preact 开辟的批评插件,如今用的多的貌似另有valine、gitment,这个貌似能够统计浏览量;愿望gitalk也能出个浏览量统计功用,官网供应的体式格局有两种,一种是在html中引入js文件,另一种是用npm包的情势,我挑选的是经由过程js将批评须要的js和css用js动态插进去到页面中,起首修正.vuepress/enhanceApp.js
中的代码:
import getGitalk from "./common/getGitalk"
import copy from './common/copy'
export default ({
Vue, // VuePress 正在运用的 Vue 组织函数
options, // 附加到根实例的一些选项
router, // 当前运用的路由实例
siteData // 站点元数据
}) => {
setTimeout(() => {
try {
document && (() => {
getGitalk.call(this, siteData)
copy()
})()
} catch (e) {
console.error(e.message)
}
},500)
}
getGitalk.js
的完成以下
export default ({pages})=> {
const path = window.location.pathname
// 猎取当前页面信息
const dist = pages.filter(item => {
return item.path === path
})[0]
//只要在isNoPage是false的时刻才会显现批评
if (!dist.frontmatter || !dist.frontmatter.isNoPage) {
const page =document.querySelector('.page')
const linkGitalk = document.createElement('link');
linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
linkGitalk.rel = 'stylesheet';
document.body.appendChild(linkGitalk);
const scriptGitalk = document.createElement('script');
scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
document.body.appendChild(scriptGitalk);
scriptGitalk.onload= () => {
let gitalk = document.createElement('div')
gitalk.id = 'gitalk-container'
page.appendChild(gitalk)
var _gitalk = new Gitalk({
clientID: '11111111111111',
clientSecret: '2222222222222222',
repo: 'slbyml.github.io', // 存储批评的堆栈名字
owner: 'slbyml',
admin: ['slbyml'], //堆栈的管理员,能够有多个
id: decodeURI(path), // 每一个页面依据url天生对应的issue,保证页面之间的批评都是自力的
})
_gitalk.render('gitalk-container')
}
}
}
关于gitalk
的用法请看官网,然则要讲两个元素clientSecret
和clientSecret
,这两个怎样来的呢,是在这请求的,建立完成后能够看到天生的这两个字段
::: tip 注重:
假如想在框架中引入第三方框架,比方element-ui,也能够在这个js中引入注册
:::
布置
布置就简朴了,我如今是两个堆栈,一个私有的,用来寄存源代码,一个就是用来寄存天生的静态文件的堆栈
变动package.json->script
:
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh" // 新加的,用来天生静态文件及上传到github
}
然后根目次下新建deploy.sh
文件:
#!/usr/bin/env sh
# 确保剧本抛出碰到的毛病
set -e
# 天生静态文件
npm run docs:build
# 进入天生的文件夹
cd dist
git init
git add -A
git commit -m 'deploy'
# 假如宣布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:slbyml/blog.git master
cd -
我的默许天生的静态文件在根目次下的dist
,由于我变动了config.js
里的设置,保证docs内里的文件是清洁的
dest: 'dist'
如许在我实行npm run deploy
的时刻就会自动天生静态文件,并上传的github上,是不是是很轻易
末了,这些都是我本身做的事变,能够会有更好的完成,所以迎接议论!!
今后想增加的东西:
- [ ] 增加下拉加在更多功用
- [ ] 增加文章浏览量和文章字数
- [ ] 雄厚列表页
- [ ] 雄厚首页
末了的末了这篇笔墨也是突发奇想写的,刚开始不知道写啥,所以就边写变想该写啥(负面教授教养,别学我
),没想到写着写着,文思泉涌 ,一片文彩华美的文章就这么降生了,从没发明本身另有写文章的禀赋。
转载原文