博客的搭建 - 下

# 导航栏阴影

因为壁纸会随机出现，有时会出现颜色相近的图片导致导航栏可能不清晰的情况（东北话靠色(shai)）。

为了解决这个问题，在导航栏添加一个阴影背景，

1.在Nvabar.vue中添加行内样式

  <header class="navbar" style="position: relative;background: none rgba(0, 0, 0, 0.2);box-shadow: none;">
    ...
  </header>

1
2
3

2.注释掉.nvabar的lineheight

最终效果如下：

# 获取每日一句、每日壁纸

在参(chao)考(xi)大佬们的博客时，发现大家对首页的名言名句和背景图都有不同的处理。zeal大佬是根据星期七天轮播，yida-zyj 是根据自己的图库随机展示。我选择了一种折中的方式，每天换一次名言名句，通过调用金山词霸的每日一句获取；每天更换一次壁纸，通过获取bing的背景图获取、

0.找到金山词霸和bing的接口百度一下，你就知道 (opens new window)
1.引入axios, 挂载

import axios from 'axios'

export default ({
  Vue,
  siteData,
  isServer,
  router
}) => {
  Vue.mixin(postMixin);
  Vue.mixin(localMixin);
  Vue.prototype.$axios = axios;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

2.找到展示名言警句和图片的位置

由于两处修改套路相同，此处只以获取词霸每日一句接口举例

通过类似上述的修改，对词霸的接口进行请求解析，并绑定到变量上进行展示。
你会惊喜的发现，跨域 (opens new window)了。
_(:з」∠)_

3.请教度娘，怎么来解决axios的跨域问题
问了度娘千百遍，给的十几页答案基本上都是相同的，需要配置一个本地代理。

// 本地跨域代理
devServer : {
    proxy: {
        '/bing/': {
            target: 'https://cn.bing.com/', //接口域名
            changeOrigin: true,             //是否跨域
            ws: true,                       //是否代理 websockets
            secure: true,                   //是否https接口
            pathRewrite: {                  //路径重置
                '^/bing/': ''
            }
        },
        '/ciba/': {
            target: 'http://open.iciba.com/', //接口域名
            changeOrigin: true,             //是否跨域
            ws: true,                       //是否代理 websockets
            secure: true,                   //是否https接口
            pathRewrite: {                  //路径重置
                '^/ciba/': ''
            }
        },
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在哪配置呢？说是应该有一个vue.config.js在根目录下才对啊。
没有？创建一下。
在哪创建？所有的根都创建了一遍。
然并卵，最终在vuepress的issue中找到了思路，把这个配置放到config.js下，果然可以了。来自后端的敏锐嗅觉，放到了github pages中跑了一下，果然404了。

4.再次请教度娘, 解决devServer.proxy在github pages中不生效问题
这种需要跨域的问题，一般后端只需要配置个NGINX就可以了，但是在github上这条路明显是走不通的。继续埋头查看issue，发现了一个神奇的网站，可以通过JsonBird - 业界领先的远程代理服务 (opens new window)中转解决这个跨域问题，虽然会消耗资源加载的时间，

5.查看效果

2021.03.03 2021.03.04

感觉这个问题如果是一个有点经验的前端也不会花一小天去处理吧，奈何自己vegetable...

# 配置github自动构建

之前自己白嫖学生服务器的时候是通过Jenkins构建的页面，每次更新都需要自己去发版下。这次了解到了一个叫做github actions的东东可以自动的部署，也就学着搞了一下。大致执行过程是：master分支编译 -> 存到某个地方 -> 切换到gh-pages分支 -> 拉编译后的代码 -> 发布到gh-pages分支。
参考步骤如下：

1.复制下面的配置到根目录的.github目录下

name: Deploy to github pages
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build docs by vuepress
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install npm dependencies
        run: npm install
      - name: build docs
        run: npm run build
      - name: Upload vuepress build result
        uses: actions/upload-artifact@v2
        with:
          name: vuepress-dist
          path: dist
  deploy:
    name: Deploy to github pages
    runs-on: ubuntu-latest
    needs:
      - build
    steps:
      - name: Download previous build result
        uses: actions/download-artifact@v2
        with:
          name: vuepress-dist
      - name: View artifact files
        run: ls
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: . # The folder the action should deploy.
          CLEAN: true # Automatically remove deleted files from the deploy branch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2.创建GITHUB_TOKEN

按照下面的图示，将红框框里边的按钮都点一下，此时名字可以随便取，但是生成的token需要保存下来，只出现一次，刷新后就不会再出现了。

配置项目的GITHUB_TOKEN。按照下面的图示，将红框框里边的按钮都点一下，此时的name不可以随便写，需要与工作流配置中的参数保持一致。

3.推送代码到master，观察是否生效

# 配置个性域名

xxx.io/blog是在是不好敲也不好记，加上手中有购买的域名可以用，就将博客地址绑定到二级域名上，在此加以记录。

1.在对应的repository下的setttings的github pages的custom domain下配置二级域名
2.添加域名解析
3.测试访问

# 地址栏中文跳转404问题

我刚搭建了一个狂拽炫酷的博客，点吧点吧404了，腾讯公益？虽然我是个热心人，但是404这个实在是接受不了啊。然后去vuepress的issue看，没找到，去vuepress-theme-reco的issue看，没找到再去vuepress的issue看，最终找到了一个看起来还可以的解决方案。
原因是跳转链接中含有中文，然后balabala，按照issue配置了一下，暂时是没有跳转到腾讯公益了。

# markdown复选框插件不生效

需要通过安装插件解决此问题

npm install markdown-it-task-lists

在config.js中进行配置

"markdown": {
    "lineNumbers": false,
    extendMarkdown: md => {
        md.use(require('markdown-it-task-lists'), {enabled: true});
    }
},

1
2
3
4
5
6

示例

- [x] 完成
- [ ] 待办

1
2

完成
待办

说明

中括号中间需要有一个空格

LMS随手