From c44b0f7c21176a69a59b594c2b636baaec1a2f31 Mon Sep 17 00:00:00 2001
From: dev <710328466@qq.com>
Date: Mon, 19 Feb 2024 14:20:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.dumi/global.less | 1 -
.dumi/tsconfig.json | 4 +
docs/blog/changelogAutoPlay.md | 144 +++++++++++++++++++++++++++
docs/blog/changelogUpdate.md | 176 +++++++++++++++++++++++++++++++++
docs/blog/firstPage.md | 136 +++++++++++++++++++++++++
docs/blog/sshLoginECS.md | 90 +++++++++++++++++
docs/blog/trivisCIIntro.md | 118 ++++++++++++++++++++++
docs/fea/Q&A/index.md | 4 +
docs/tools/record.md | 20 ++++
9 files changed, 692 insertions(+), 1 deletion(-)
create mode 100644 .dumi/tsconfig.json
create mode 100644 docs/blog/changelogAutoPlay.md
create mode 100644 docs/blog/changelogUpdate.md
create mode 100644 docs/blog/firstPage.md
create mode 100644 docs/blog/sshLoginECS.md
create mode 100644 docs/blog/trivisCIIntro.md
create mode 100644 docs/tools/record.md
diff --git a/.dumi/global.less b/.dumi/global.less
index 0f8ae40..fa89006 100644
--- a/.dumi/global.less
+++ b/.dumi/global.less
@@ -2,7 +2,6 @@
text-align: center;
}
#root .dumi-default-doc-layout > main {
- max-width: none;
}
#root .dumi-default-sidebar {
diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json
new file mode 100644
index 0000000..a32dd4f
--- /dev/null
+++ b/.dumi/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../tsconfig.json",
+ "include": ["**/*"]
+}
diff --git a/docs/blog/changelogAutoPlay.md b/docs/blog/changelogAutoPlay.md
new file mode 100644
index 0000000..a5e7028
--- /dev/null
+++ b/docs/blog/changelogAutoPlay.md
@@ -0,0 +1,144 @@
+---
+nav:
+ title: 文章
+ path: /blog
+order: 999
+category: Components
+title: changelog 日志自动生成插件
+group: 2018年
+---
+
+## changelog 日志自动生成插件
+
+该工具针对一些需要手动输入更新日志的项目，实现自动化输出更新日志，并且对更新日志进行内容格式化，便于后期维护，目前主要有以下几个功能模块。
+
+1. cz -- 定制化 git 提交
+2. log -- 自动生成 CHANGELOG.MD 日志文件
+3. lint -- 校验 commit 信息
+
+安装依赖包
+
+```js
+npm install @nicecode/changelog --save
+// or
+yarn add @nicecode/changelog --save-dev
+```
+
+## 一、cz 模块
+
+### 1. 安装 commitizen 依赖包
+
+> cnpm i commitizen --save-dev
+
+### 2. 在 package.json 中加入以下内容
+
+```json
+{
+ ...
+ "config": {
+ "commitizen": {
+ "path": "@nicecode/commit"
+ }
+ },
+}
+```
+
+### 3. 在 package.json 中创建以下 script 命令
+
+```json
+{
+ "cz": "git add . && git cz"
+}
+```
+
+按照提示正确输出 commit 信息内容，如下示例：
+
+
+
+## 二、log 模块
+
+### 1. 安装 conventional-changelog-cli 依赖包
+
+```js
+cnpm i conventional-changelog-cli --save-dev
+```
+
+### 2. 创建以下命令
+
+```json
+{
+ ...
+ "script": {
+ "log": "conventional-changelog --n node_modules/@nicecode/changelog -i CHANGELOG.md -s -r 0",
+ }
+}
+> 结尾数字若为 1 ，生成当前版本的变化情况，若为 0， 生成所有的日志文件。
+```
+
+### 3. 示例
+
+
+
+## 三、lint 模块
+
+### 1. 安装 husky commitlint 依赖
+
+```shall
+cnpm i husky commitlint @nicecode/commit-lint --save-dev
+```
+
+### 2. 在 package.json 中引入以下配置
+
+```json
+{
+ ...
+ "husky": {
+ "hooks": {
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+ }
+ },
+}
+```
+
+### 3. 在项目根路径下创建 .commitlint.js 或者 commitlint.config.js
+
+具体配置可以参考 commitlint 官方，例子：
+
+```js
+module.exports = {
+ extends: ['@nicecode/commit-lint'],
+};
+```
+
+## 建议
+
+可以搭配 **husky** 和 **lint-stage** 效果更佳。它能在你每次提交代码前校验你的代码格式并修复错误的代码格式，具体配置可以参考当前根目录下的 package.json 和 .eslintrc.
+
+## Q&A
+
+### 1. No files added to staging! Did you forget to run git add？
+
+应该没有文件内容变动还执行 git add . 提交导致的。试着对项目进行更改再保存试试。
+
+### 2. 提交后，输入更新日志命令，CHANGELOG.MD 内容没有更新？
+
+只有每次版本迭代的的时候才会更新这一次的日志信息。可以尝试打个标签最为封版。
+
+### 3. mac 无法运行 git 命令，报错？
+
+可以试试安装 xcode.
+
+> xcode-select --install
+
+### 4. 打印日志没有版本号？
+
+版本号目前支持的格式为 vX.X.X，👀 格式对吗？
+
+### 5. js 如何读取 md 文件？
+
+如果该项目使用了 webpack，可以使用 markdown-loader.
+
+```
+第一次写工具库，难免有瑕疵，欢迎大家 pr，但是还请口下留情😄
+喜欢的话给个 star吧
+```
diff --git a/docs/blog/changelogUpdate.md b/docs/blog/changelogUpdate.md
new file mode 100644
index 0000000..94e1b7a
--- /dev/null
+++ b/docs/blog/changelogUpdate.md
@@ -0,0 +1,176 @@
+---
+nav:
+ title: 文章
+ path: /blog
+order: 999
+category: Components
+title: changelog 日志自动生成工具升级啦~
+group: 2020年
+---
+
+# changelog 日志自动生成工具升级啦~
+
+19 年我发了一篇文章[changelog 日志自动生成插件](https://juejin.cn/post/6844903767876304904),里面介绍了我开源的一套【auto changelog、commit-lint】规范化代码提交的工具插件合集。
+
+但是由于是第一次发布一些开源的项目，难免开发方案不是很丝滑，用起来也不是很柔顺。
+
+所以基于这些问题，用 lerna 对这个工具进行了一次升级。大概内容如下：
+
+```js
+jimi-web-changelog/cz --> @nicecode/commit // git 格式化 cli 提交插件
+jimi-web-changelog/lint --> @nicecode/commit-lint // git 提交 lint 校验插件
+jimi-web-changelog --> @nicecode/changelog // 日志自动生成插件
+```
+
+## CZ 模块配置优化
+
+[官方文档](https://nicecoders.github.io/#/changelog/commit)
+
+### 原配置
+
+```js
+// 1、安装依赖
+cnpm i commitizen jimi-web-changelog --save-dev
+
+// 2、在 package.json 中添加
+{
+ ...
+ "config": {
+ "commitizen": {
+ "path": "./node_modules/jimi-web-changelog/lib/cz"
+ }
+ },
+ ...
+}
+```
+
+### 新配置
+
+```js
+// 1、安装依赖
+cnpm i commitizen @nicecode/commit --save-dev
+
+// 2、在 package.json 中添加
+{
+ ...
+ "config": {
+ "commitizen": {
+ "path": "@nicecode/commit"
+ }
+ },
+ ...
+}
+
+```
+
+## lint 模块配置优化
+
+[官方文档](https://nicecoders.github.io/#/changelog/commit-lint)
+
+### 原配置
+
+```js
+1. 安装依赖
+cnpm i husky commitlint jimi-web-changelog --save-dev
+
+2. 在 package.json 中引入以下配置
+{
+ ...
+ "husky": {
+ "hooks": {
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+ }
+ },
+ ...
+}
+
+3、根目录下 .commitlint.js
+modules.exports = Object.assign({}, require('jimi-web-changelog/lib/lint'), {
+ rules: {
+ 'subject-empty': [2, 'never'],
+ 'type-empty': [2, 'never'],
+ 'type-enum': [2, 'always',
+ [
+ '新功能',
+ '修复',
+ ...
+ ]
+ ]
+ }
+}
+```
+
+### 新配置
+
+```js
+// 1. 安装依赖
+cnpm i husky commitlint @nicecode/commit-lint --save-dev
+
+// 2. 在 package.json 中引入以下配置
+{
+ ...
+ "husky": {
+ "hooks": {
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+ }
+ },
+ ...
+}
+
+// 3、根目录下 .commitlint.js
+modules.exports = {
+ extends: ["@nicecode/commit-lint"]
+}
+```
+
+## changelog 模块配置优化
+
+[官方文档](https://nicecoders.github.io/#/changelog)
+
+### 原配置
+
+```js
+// 1、安装依赖
+cnpm i conventional-changelog-cli jimi-web-changelog --save-dev
+
+// 2、在package.json 中添加命令
+{
+ ...
+ "script": {
+ "log": "conventional-changelog --config node_modules/jimi-web-changelog/lib/log -i CHANGELOG.md -s -r 0",
+ }
+ ...
+}
+```
+
+### 新配置
+
+```js
+// 1、安装依赖
+cnpm i conventional-changelog-cli @nicecode/changelog --save-dev
+
+// 2、在package.json 中添加命令
+{
+ ...
+ "script": {
+ "log": "conventional-changelog --n node_modules/@nicecode/changelog -i CHANGELOG.md -s -r 0",
+ }
+ ...
+}
+```
+
+## 后记
+
+[nicecoder 团队](https://github.com/nicecoders) 目前 4 人，致力整合一套提高工作效率和代码规范的工具库，目前我们的计划的和已完成的有以下几个板块：
+
+
+
+期待你的加入：[nicecoder](https://github.com/nicecoders)
+
+### 相关链接
+
+[@nicecode/tools 常用函数库](https://nicecoders.github.io/#/tools)
+
+[nicecode 官网](https://nicecoders.github.io/#/)
+
+[nicecode github 地址](https://github.com/nicecoders)
diff --git a/docs/blog/firstPage.md b/docs/blog/firstPage.md
new file mode 100644
index 0000000..6c2379b
--- /dev/null
+++ b/docs/blog/firstPage.md
@@ -0,0 +1,136 @@
+---
+nav:
+ title: 文章
+ path: /blog
+order: 999
+category: Components
+title: 用Vue高仿qq音乐官网-pc端
+group: 2017年
+---
+
+## 用 Vue 高仿 qq 音乐官网-pc 端
+
+一直想做一个 vue 项目 然后呢 我就做了
+
+## 效果预览
+
+部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果加载太慢，可以下载下来再本地运行
+
+> [网易云音乐 API](https://github.com/Binaryify/NeteaseCloudMusicApi)
+
+> 项目地址：[github](https://github.com/j710328466/vue-qqmusic)
+
+> 预览地址：[demo](http://182.254.147.168:8564/#/)
+
+## Build Setup
+
+```
+# install dependencies
+cnpm i
+(可以用cnpm或yarn，更方便快捷，你值得拥有)
+
+# serve with hot reload at localhost:8564
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# 网易云API部署 listen localhost:3000
+npm run start
+```
+
+## 技术栈
+
+- vue(数据绑定)
+- vue-router
+- vuex(管理组件状态，实现组件通信）
+- webpack(打包工具)
+- scss（原来想用 stylus,回头看看我都快写完了...）
+- axios（我等下要重点讲这\*\*\*\*）
+- 组件库: element-UI(本来想用 muse-UI,感觉那个更 cool，下次吧..)
+- API: 网易云音乐 API(仿 qq 音乐我用网易云音乐的东西，你怕不怕...)
+
+## 核心功能组件的实现
+
+### 搜索功能
+
+
+
+### 播放功能
+
+
+ (播放页面正在完善中，样式只是大概，待细化...)
+
+### 跳转功能
+
+
+(目前子目录只开通歌手列表)
+
+## 自己挖的坑，自己埋
+
+### vuex 的模块应用
+
+- 一开始我并没有使用 vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟 vuex 针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了 vuex 的使用，这就很大一部分影响了项目进行的进度。（目前只用到 action 和 state）
+
+### qq 音乐的轮播图
+
+- 不用说，qq 音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层 margin,padding 也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了 element-UI 里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。
+
+### axios 后端数据获取时产生的跨域问题
+
+- 重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用 axios 都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座
+
+- 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
+
+①. 针对本地相同端口服务器之间的跨域
+
+- 这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到 build 文件中的 dev-server，找到引用 express 的位置，给它加上一个头文件：
+
+ ```
+ app.all('*', function (req, res, next) {
+ res.header("Access-Control-Allow-Credentials", true)
+ res.header("Access-Control-Allow-Origin", "*")
+ res.header("Access-Control-Allow-Headers", "X-Requested-With")
+ res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
+ res.header("X-Powered-By", ' 3.2.1')
+ res.header("Content-Type", "application/json;charset=utf-8")
+ next()
+ })
+ ```
+
+> 
+
+- 然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域...
+
+
+②. 针对本地不同端口的服务器之间的跨域
+
+- 就是将上面的头文件放在当前项目申请的服务器的那个 api 中。
+
+
+③. 针对本地服务器对域名服务器访问的跨域问题
+
+- 找到当前项目 congfig 文件夹下 index.js 文件，然后在文件中将 proxyTable 内容改为：
+
+ ```
+ proxyTable: {
+ '/api': {
+ target: '[1]',
+ changeOrigin: true,
+ pathRewrite: {
+ '^/api': '/'
+ }
+ }
+ }
+ ```
+
+> 就是你当前想访问的 api 地址，项目中访问的时候就只要用/api 做反向代理即可
+
+## 终于
+
+- 这是我第一个用 vue 撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么 bug，也希望大家多多提 issue
+
+- 如果对你有帮助，给个 star 吧
diff --git a/docs/blog/sshLoginECS.md b/docs/blog/sshLoginECS.md
new file mode 100644
index 0000000..0d550a3
--- /dev/null
+++ b/docs/blog/sshLoginECS.md
@@ -0,0 +1,90 @@
+---
+nav:
+ title: 文章
+ path: /blog
+order: 999
+category: Components
+title: 如何终端 ssh 免密登录 ECS
+group: 2018年
+---
+
+## 如何终端 ssh 免密登录 ECS
+
+你是不是登录自己的远端服务器还是在使用输入账号密码？那么问题来了：
+
+1. 密码忘了咋办！
+1. 比较复杂的密码输入起来浪费时间！
+1. ip 地址忘了咋整！
+1. ...
+
+## 第一步：查看本机是否有 id_rsa.pub 文件
+
+```javascript
+cat ~/.ssh/id_rsa.pub
+```
+
+如果输出为空，就在下一步创建一下
+
+## 第二步：创建 id_rsa.pub 文件
+
+如果本机已经存在该文件，就直接跳到第三步
+
+###
+
+### 先登录 git 账号
+
+```javascript
+git config --globaluser.name "XXX"
+git config --global user.email "XXX@163.com"
+```
+
+###
+
+### 生成 ssh 相关文件
+
+```javascript
+ssh-keygen -t rsa -C "XXX@163.com"
+```
+
+##
+
+## 第三步：授权到远端 Ecs
+
+### 复制本地端的 id_rsa.pub
+
+注意应该是以 ssh-rsa 开头到 XXXXX.XXXXX.XXXX 结束的一段，这个可能是个会导致错误的点，建议如果你登录失败的时候可以回来看看这边是不是错了
+
+###
+
+### 登录远程 Ecs，创建 authorized_keys 文件
+
+在 .ssh 文件夹下创建 authorized_keys 文件，并将之前复制的 id_rsa.pub 内容粘贴进去
+
+```javascript
+# 参考代码
+cd ~/.ssh
+touch authorized_keys
+vim authorized_keys
+```
+
+###
+
+### 更改授权 （可选）
+
+```javascript
+# 设置所有人可以读写及执行
+chmod 777 ~/.ssh
+
+# 设置拥有者可读写
+chmod 600 ~/.ssh/authorized_keys
+```
+
+> 这一步可以按自己的需要来设置
+
+## 最后：就可以免密登录啦~
+
+现在打开本机的终端，terminal，zsh 输入下面的代码就可以实现免密登录啦
+
+```javascript
+ssh ${用户名}@${ip地址 或者 域名}
+```
diff --git a/docs/blog/trivisCIIntro.md b/docs/blog/trivisCIIntro.md
new file mode 100644
index 0000000..78fdeac
--- /dev/null
+++ b/docs/blog/trivisCIIntro.md
@@ -0,0 +1,118 @@
+---
+nav:
+ title: 文章
+ path: /blog
+order: 999
+category: Components
+title: travisCI 持续集成 gh-page 并部署
+group: 2018年
+---
+
+## travisCI 持续集成 gh-page 并部署
+
+我们大多数公司在做项目时，应该都碰到过，当代码被 push 上 git 或者是 svn 时，过几分钟就可以在线上实时看到我们的项目，就像看到亲生儿子一样，但是肯定很多人不知道这是怎么实现的（如果你知道，那可以不用往下看了，点个赞就去吃饭吧...），所以今天我就来给大家介绍一下其中的一款 travis-CI，请记住它的 face：
+
+
+持续集成（Continuous integration）的核心思想，代码先自动化测试用例，通过后集成到主干。它细分的话有两个概念：
+
+- 持续交付
+- 持续部署
+
+> 简单来说持续部署是持续交付的下一步，持续交付是测试阶段，部署就是测试通过阶段。,这个就有很多东西展开了，求我我就告诉你...
+
+## 准备
+
+- GitHub 账号（作为一个合格的程序员，你没有真的好吗？）
+- travis-CI 平台接入
+- GITHUB_TOKEN
+- 给我点赞...
+
+## 第一步
+
+登录 CI 官网，然后连接自己的 gitHub，这个时候 Legacy Services Integration 应该默认显示了几个自己 gitHub 的项目
+
+如果显示不全，可以按左边的 sync 同步一下
+
+然后第一张图每个项目的边上有一个 switch 开关，你想要让哪个集成就打开哪个吧（不截图了，我懒...）
+
+## 第二步
+
+进入自己的 gh 主页，依次：GitHub settings -> developer settings -> Personal access tokens，勾选权限，自由发挥，你要全勾也行...
+
+
+将生成的 token 复制备用
+
+## 第三步
+
+回到 CI，打开你打开开关的那个项目的 settings（看到你很绕我就放心了...），进入配置页面，在 Environment Variables 里填入以下内容：
+
+
+> 分别对应：git 项目、项目分支（我这里的分支是 gh-pages）、token、Git-email、Git-username
+
+## 第四步
+
+在项目根目录配置个文件叫 .travis.yml,打包项目以 vue-cli 为例，内容如下：
+
+```
+language: node_js
+# nodejs版本
+node_js:
+ - '8.9.1'
+
+# S: Build Lifecycle
+install:
+ - npm install
+script:
+ - npm run build
+
+# 这个是不是看着很熟悉？
+after_script:
+ - cd ./dist
+ - git init
+ - git config user.name "${USER_NAME}"
+ - git config user.email "${USER_EMAIL}"
+ - git add .
+ - git commit -m "nicecoders.github.io"
+ - git push --force --quiet "https://${test_token}@${GH_REF}" master:${P_BRANCH}
+# E: Build LifeCycle
+
+# 只对某个分支行为生效
+branches:
+ only:
+ - master
+```
+
+## 第四点五步
+
+打开 CI，进入自己构建项目的那个页面，打开 job log，感受那生怕 error 的快感！（都是泪...）
+
+
+当然如果你通过的话，就会有一个 passing 在你的项目标题旁边。
+
+
+每次看到这个我都激动的热泪盈眶...
+
+## 第五步
+
+看一下自己在 git 上的项目，是不是出现了这个分支，并且已经自动部署好了？成功的截图。
+
+
+### 部署好的页面
+
+
+
+## 后记
+
+现在，你可以疯狂的 push 代码了，其他的事交给 CI 去做就行。
+
+好了，码了这么久的字，你是不是应该：
+
+点个赞？
+
+个赞？
+
+赞？
+
+👍
+
+原文链接：
diff --git a/docs/fea/Q&A/index.md b/docs/fea/Q&A/index.md
index b2b4445..177bde3 100644
--- a/docs/fea/Q&A/index.md
+++ b/docs/fea/Q&A/index.md
@@ -14,6 +14,10 @@ group:
可能是因为手机插件类似 ADB 将弹框事件拦截了，关闭或加入白名单就好了
+## 适配类问题
+
+
+
## 通过浏览器打开 https 后，无法再次打开 http 链接？
请将下面这串代码删除，删干净一点：
diff --git a/docs/tools/record.md b/docs/tools/record.md
new file mode 100644
index 0000000..2cd9daf
--- /dev/null
+++ b/docs/tools/record.md
@@ -0,0 +1,20 @@
+---
+nav:
+ title: 工具
+ path: /tools
+group:
+ title: 录屏
+ order: 4
+---
+
+## 软件推荐
+
+obs: 开源软件，后续好好研究一下，也有 mac 版本
+
+
+
+## 常见问题
+
+1. 英伟达显卡不支持
+
+将流媒体的导出格式改为软件，有两个地方：视频编码器，和直播编码器