原文博客

闲扯

很久以前，本身具有一个用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上，是不是是很轻易
末了，这些都是我本身做的事变，能够会有更好的完成，所以迎接议论！！
今后想增加的东西：

• [ ] 增加下拉加在更多功用
• [ ] 增加文章浏览量和文章字数
• [ ] 雄厚列表页
• [ ] 雄厚首页

末了的末了这篇笔墨也是突发奇想写的，刚开始不知道写啥，所以就边写变想该写啥（负面教授教养，别学我），没想到写着写着，文思泉涌 ，一片文彩华美的文章就这么降生了，从没发明本身另有写文章的禀赋。
转载原文