blog: 更新友链信息

feat:page edit 支持 gitee.com

.github/ISSUE_TEMPLATE/ join_case.md

@@ -0,0 +1,24 @@
+---
+name: 申请加入案例
+about: 申请将你的站点展示在文档站案例页
+title: 申请加入案例
+labels: 申请加入案例
+---
+
+<!--
+请按照模板填写，否则此申请将可能不会被通过并直接关闭。
+
+站点要求：
+1.使用Vdoing主题
+2.有10篇以上文章
+3.保留 footer 的主题推荐链接
+-->
+
+名称：站点名称
+简介：站点简介
+链接：站点链接
+截图：站点截图链接
+作者：作者名称
+头像：作者头像链接
+
+备注(可选)： 知识库兼博客 | 社区 | 知识库 | 博客 | 文档站

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: 报告bug
+about: 创建一个报告来帮助我们改进
+title: "[bug]: "
+labels: bug
+---
+
+<!--请按照模板填写，否则此issue将可能被关闭-->
+
+## 问题描述
+<!--xxxx-->
+
+## 重现步骤
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxx]
+-->
+
+## 重现链接（如有）
+<!--https://xxx.com-->
+
+## 问题截图（如有）
+<!--![](xxx.jpg)-->
+
+## 依赖版本
+- node.js: <!--v1x.x.x-->
+- @vuepress: <!--v1.x.x-->
+- vuepress-theme-vdoing: <!--v1.x.x-->
+
+## 补充说明（可选）
+<!--xxxx-->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,32 @@
+---
+name: 提交疑问
+about: 提交你的疑问
+title: "[提问]: "
+labels: 提问
+---
+
+<!--提示：问题描述越详细，提供的信息越完整越可能得到回答。但也不能保证所有问题都能得到回答。你也可以加入我们的交流QQ群：694387113-->
+
+## 问题描述
+<!--xxxx-->
+
+## 重现步骤（可选）
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxx]
+-->
+
+## 重现链接（可选）
+<!--https://xxx.com-->
+
+## 问题截图（可选）
+<!--![](xxx.jpg)-->
+
+## 依赖版本（可选）
+- node.js: <!--v1x.x.x-->
+- @vuepress: <!--v1.x.x-->
+- vuepress-theme-vdoing: <!--v1.x.x-->
+
+## 补充说明（可选）
+<!--xxxx-->

.github/workflows/ci.yml

@@ -3,37 +3,46 @@ name: CI
 #on: [push]
 
 # 在master分支发生push事件时触发。
-on: 
+on:
   push:
     branches:
       - master
 
-jobs: # 工作流
+env: # 设置环境变量
+  TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用该时区时间）
+
+jobs:
   build: # 自定义名称
-    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest
+    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: [18.x]
 
-    steps: # 步骤
+    steps:
       - name: Checkout # 步骤1
         uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
       - name: Use Node.js ${{ matrix.node-version }} # 步骤2
-        uses: actions/setup-node@v1 # 作用：安装nodejs
+        uses: actions/setup-node@v3 # 作用：安装nodejs
         with:
           node-version: ${{ matrix.node-version }} # 版本
-      - name: run deploy.sh # 步骤3 （同时部署到github和coding）
-        env: # 设置环境变量
-          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
-          CODING_TOKEN: ${{ secrets.CODING_TOKEN }}
-        run: npm install && npm run deploy
-
-      # - name: Build and Deploy # 步骤3 （只提交到github可以使用这个步骤）
-      #   uses: JamesIves/github-pages-deploy-action@master # 作用：将项目构建和部署到github。 https://github.com/JamesIves/github-pages-deploy-action
-      #   env: # 设置环境变量
-      #     ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
-      #     BASE_BRANCH: master # 要部署的文件夹所在的分支.
-      #     BRANCH: gh-pages # 部署到的分支
-      #     FOLDER: docs/.vuepress/dist # 要部署的文件夹.
-      #     BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME && cd - # 部署前要执行的命令（记得cd进入某个目录后，后面要cd -退回开始的目录）
+      - name: Build-and-deploy # 步骤3
+        run: |
+          remote_addr=`git remote get-url --push origin`
+          commit_info=`git describe --all --always --long`
+          user_name=`git log -1 --pretty=format:'%an'`
+          user_email=`git log -1 --pretty=format:'%ae'`
+          deploy_branch=gh-pages
+          yarn
+          yarn build
+          cd docs/.vuepress/dist
+          git config --global init.defaultBranch $deploy_branch
+          git init
+          git config user.name ${user_name}
+          git config user.email ${user_email}
+          git add -A
+          git commit -m "auto deploy, $commit_info"
+          remote_addr=`echo $remote_addr | awk -F'://' '{print $2}'`
+          remote_addr=https://${user_name}:${{secrets.GITHUB_TOKEN}}@${remote_addr}
+          git remote add origin ${remote_addr}
+          git push origin HEAD:$deploy_branch --force # 推送到github $deploy_branch分支

.gitignore

@@ -2,11 +2,21 @@
 package-lock.json
 node_modules
 
+# yarn
+yarn.lock
+yarn-error.log
+
+# pnpm
+pnpm-lock.yaml
+
 # vscode
 .vscode
 
-# vuepress 
+# vuepress
 docs/.vuepress/dist
 
 # 百度链接推送
-urls.txt
+urls.txt
+
+# mac
+.DS_Store

README.MD

@@ -1,22 +1,31 @@
-<p align="center"><a href="https://xugaoyi.com/" target="_blank" rel="noopener noreferrer"><img width="180" src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200409124835.png" alt="logo"></a></p>
+<p align="center"><a href="https://xugaoyi.com/" target="_blank" rel="noopener noreferrer"><img width="180" src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200409124835.png" alt="logo"></a></p>
 
 <p align="center">
+  <a href="https://www.npmjs.com/package/vuepress-theme-vdoing"><img alt="npm" src="https://img.shields.io/npm/v/vuepress-theme-vdoing"></a>
+   <a href="https://www.npmjs.com/package/vuepress-theme-vdoing" target="_blank"><img src="https://img.shields.io/npm/dt/vuepress-theme-vdoing" alt="npm" ></a>
+  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/stargazers"><img src="https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing?logo=ReverbNation&logoColor=rgba(255,255,255,.6)" alt="GitHub stars"></a>
   <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/actions?query=workflow%3ACI"><img src="https://github.com/xugaoyi/vuepress-theme-vdoing/workflows/CI/badge.svg" alt="CI"></a>
   <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/actions?query=workflow%3AbaiduPush"><img src="https://github.com/xugaoyi/vuepress-theme-vdoing/workflows/baiduPush/badge.svg" alt="baiduPush"></a>
-  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE"><img src="https://img.shields.io/github/license/xugaoyi/vuepress-theme-vdoing
-" alt="License"></a>
-  <a href="https://www.npmjs.com/package/vuepress-theme-vdoing"><img alt="npm" src="https://img.shields.io/npm/v/vuepress-theme-vdoing"></a>
-  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/stargazers"><img src="https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing?logo=ReverbNation&logoColor=rgba(255,255,255,.6)" alt="GitHub stars"></a>
-
-  
-
 </p>
 
 <h2 align="center">vuepress-theme-vdoing</h2>
 
 
 
-[使用文档](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/) | [Evan's blog](https://xugaoyi.com/) 
+ [文档](https://doc.xugaoyi.com/)  |
+ [效果](https://xugaoyi.com/)  |
+ [本仓库的gitee镜像](https://gitee.com/xugaoyi/vuepress-theme-vdoing)
+
+<br/>
+<p align="center" style="color: #999;">
+  赞助商
+</p>
+<p align="center">
+<!-- <a href="http://apifox.cn/a103xugaoyi" target="_blank"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/blog-gitalk-comment@master/img/Apifox-860x320.ic7tz1417sw.png" alt="赞助商" style="width: 400px;border-radius: 2px;"></a> -->
+<a href="http://apifox.cn/a103xugaoyi" target="_blank"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/blog-gitalk-comment@master/img/441669861566_.2bedplbm21hc.jpg" alt="赞助商" style="width: 400px;border-radius: 2px;"></a>
+</p>
+
+<p align="center" style="color: #999; font-size:13px;">（进入赞助商扫码注册可为本项目作者充电~）</p>
 
 ## 介绍
 1. 这个主题的初衷是打造一个好用的、面向程序员的`知识管理工具`
@@ -24,18 +33,13 @@
 3. 博客功能提供一种知识的`碎片化`形态，并支持个性化博客配置。
 4. `简洁高效`，以 Markdown 为中心的项目结构。内置自动化工具，以更少的配置完成更多的事。配合多维索引快速定位每个知识点。
 
-## 上新推荐 🎉
-
-* `v1.2.x`：这个版本对整体的UI细节做了很多优化，比如标签栏和分类栏等 (2020.06.09)
-* `v1.1.x`：从这个版本开始主题新增了两个`超好用`、`高颜值`的Markdown容器，快去 [体验](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/pages/d0d7eb) 吧~ (2020.05.29)
-
-更多上新请查阅：[更新日志](https://github.com/xugaoyi/vuepress-theme-vdoing/releases)
+[**更新日志**](https://github.com/xugaoyi/vuepress-theme-vdoing/releases)
 
 ## 这个主题可以做什么？
 * 案例1：[知识库兼博客站](https://xugaoyi.com/)
 * 案例2：[仅博客站](https://xugaoyi.github.io/vdoing-demo-blog/)
 * 案例3：[仅知识库](https://xugaoyi.github.io/vdoing-demo-repository/)
-* 案例4：[文档站](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/)
+* 案例4：[文档站](https://doc.xugaoyi.com/)
 
 
 ## 快速上手
@@ -53,16 +57,54 @@ npm install # or yarn install
 # develop
 npm run dev # or yarn dev
 ```
-## 更新日志
-[更新日志](https://github.com/xugaoyi/vuepress-theme-vdoing/releases)
 
-## 赞赏
-**愿这款知识管理主题能够助你变得强大。**
-你任何形式的支持都是对我的肯定，我会坚持初心把这个项目做得更好。当然，能获得赞赏将会使我更有动力去做好这个项目😀~~
-如果你觉得这个项目对你有帮助，可以给作者打赏一杯咖啡☕ ，前往 [赞赏](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/pages/1b12ed/) 。
+<!-- ## ⚡️未来...
+
+
+期待 [VuePress v2.0](https://github.com/vuepress/vuepress-next) 以及 [VitePress](https://github.com/vuejs/vitepress) 的正式发布...
+
+届时，VuePress 1.x 编译慢的缺点将得到极大的改善。我将会视情况把主题升级至 VuePress v2.0 或 VitePress，也可能两个都升级。目前(2020.10.29)来看还需要一段时间才能让大家使用上基于它们的新版本，还希望大家多多 [:sparkling_heart:支持](https://doc.xugaoyi.com/pages/1b12ed/) 哟，持续关注吧~ -->
+
+## :sparkling_heart:支持这个项目
+
+如果你正在使用这个项目并感觉良好，或只是想要支持我继续开发，你可以通过如下*任意* 方式支持我：
+
+1. *Star* 并 分享这个项目 :rocket:
+2. 保留主题 footer(页脚) 的主题链接 :D
+3. 关注公众号`yqyjs666`，回复`前端资源`，可获取 [前端学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study)
+<!-- 4. 轻轻点击一次页面广告 ✨ -->
+4. 通过以下二维码 一次性捐款。 我多半会买一杯 ~~咖啡~~ 茶。:tea:
+
+谢谢！ :heart:
+
+| 微信赞赏 | 微信 | 支付宝 |
+| :---: | :---: | :---: |
+| <img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200523131533.jpg" alt="赞赏码" width=150> | <img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200410113708.jpg" alt="Wechat QRcode" width=150>| <img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200410113707.jpg" alt="Alipay QRcode" width=150> |
+
+二维码没有正常显示？点 [这里😎](https://doc.xugaoyi.com/pages/1b12ed/)
 
 ## 致谢
-感谢为这个项目贡献过代码的朋友们 → [Contributors](https://github.com/xugaoyi/vuepress-theme-vdoing/graphs/contributors)
+:heart:感谢支持这个项目的朋友
+
+:heart:感谢为这个项目贡献代码的朋友 → [Contributors](https://github.com/xugaoyi/vuepress-theme-vdoing/graphs/contributors)
+
+## 交流群
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="middle">
+        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/SaV6d0YfaAS0naAeQWibGVkSt6DxSaqGxdkJaeEqoJJ6M1NV1kq9aUqE3lGo7BuroTAoMg4rgibIIay1ibfvqXEiaA/0?wx_fmt=jpeg" class="no-zoom" style="width:120px;margin: 10px;">
+        <p>vdoing微信群(添加我微信备注"加群")</p>
+      </td>
+      <td align="center" valign="middle">
+        <img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/qq.3ugglfuuwz00.webp" alt="群号: 694387113" class="no-zoom" style="width:120px;margin: 10px;">
+        <p>vdoing QQ群: 694387113</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 
 ## 许可证
 [MIT](https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE)

baiduPush.sh

@@ -6,4 +6,4 @@ set -e
 # 百度链接推送
 curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=https://xugaoyi.com&token=T5PEAzhGaPNbjQ2X"
 
-rm -rf urls.txt # 灭迹
+rm -rf urls.txt # 删除文件

deploy.sh

@@ -3,38 +3,22 @@
 # 确保脚本抛出遇到的错误
 set -e
 
+
+push_addr=`git remote get-url --push origin` # git提交地址，也可以手动设置，比如：push_addr=git@github.com:xugaoyi/vuepress-theme-vdoing.git
+commit_info=`git describe --all --always --long`
+dist_path=docs/.vuepress/dist # 打包生成的文件夹路径
+push_branch=gh-pages # 推送的分支
+
 # 生成静态文件
 npm run build
 
 # 进入生成的文件夹
-cd docs/.vuepress/dist
+cd $dist_path
 
-# deploy to github
-echo 'b.xugaoyi.com' > CNAME
-if [ -z "$GITHUB_TOKEN" ]; then
-  msg='deploy'
-  githubUrl=git@github.com:xugaoyi/vuepress-theme-vdoing.git
-else
-  msg='来自github actions的自动部署'
-  githubUrl=https://xugaoyi:${GITHUB_TOKEN}@github.com/xugaoyi/vuepress-theme-vdoing.git
-  git config --global user.name "xugaoyi"
-  git config --global user.email "894072666@qq.com"
-fi
 git init
 git add -A
-git commit -m "${msg}"
-git push -f $githubUrl master:gh-pages # 推送到github
+git commit -m "deploy, $commit_info"
+git push -f $push_addr HEAD:$push_branch
 
-# deploy to coding
-echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME  # 自定义域名
-if [ -z "$CODING_TOKEN" ]; then  # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
-  codingUrl=git@e.coding.net:xgy/xgy.git
-else
-  codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git
-fi
-git add -A
-git commit -m "${msg}"
-git push -f $codingUrl master # 推送到coding
-
-cd - # 退回开始所在目录
-rm -rf docs/.vuepress/dist
+cd -
+rm -rf $dist_path

docs/.vuepress/config.js

@@ -1,200 +0,0 @@
-const nav = require('./config/nav.js');
-
-module.exports = {
-  title: "Evan's blog",
-  description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
-  // base: '/vuepress-theme-vdoing/', // '/<github仓库名>/'， 默认'/' 
-  head: [ // 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
-    ['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
-    ['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
-    ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],// 百度统计博主验证
-    ['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
-    // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放
-  ],
-  markdown: {
-    lineNumbers: true // 代码行号
-  },
-
-  theme: 'vdoing', // 使用依赖包主题
-  // theme: require.resolve('../../theme-vdoing'), // 使用本地主题
-
-  themeConfig: { // 主题配置
-    nav,
-    sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
-    logo: '/img/EB-logo.png', // 导航栏logo
-    repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接
-    searchMaxSuggestions: 10, // 搜索结果显示最大数
-    lastUpdated: '上次更新', // 更新的时间，及前缀文字   string | boolean (取值为git提交时间)
-    docsDir: 'docs', // 编辑的文件夹
-    editLinks: true, // 启用编辑
-    editLinkText: '编辑',
-
-    // 以下配置是Vdoing主题改动的和新增的配置
-    // category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
-    // tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
-    // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。
-    // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
-    // bodyBgImg: [
-    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
-    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
-    //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
-    // ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
-    // titleBadge: false, // 文章标题前的图标是否显示，默认true
-    // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
-    //   '图标地址1',
-    //   '图标地址2'
-    // ],
-
-    sidebar: 'structuring', // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
-    
-    // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true
-    // updateBar: { // 最近更新栏
-    //   showToArticle: true, // 显示到文章页底部，默认true
-    //   moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
-    // },
-    
-    author: { // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
-      name: 'Evan Xu', // 必需
-      link: 'https://github.com/xugaoyi' // 可选的
-    },
-    blogger:{ // 博主信息，显示在首页侧边栏
-      avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
-      name: 'Evan Xu',
-      slogan: '前端界的小学生'
-    },
-    social:{ // 社交图标，显示于博主信息栏和页脚栏
-      // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
-      icons: [
-        {
-          iconClass: 'icon-youjian',
-          title: '发邮件',
-          link: 'mailto:894072666@qq.com'
-        },
-        {
-          iconClass: 'icon-github',
-          title: 'GitHub',
-          link: 'https://github.com/xugaoyi'
-        },
-        {
-          iconClass: 'icon-erji',
-          title: '听音乐',
-          link: 'https://music.163.com/#/playlist?id=755597173'
-        }
-      ]
-    },
-    footer:{ // 页脚信息
-      createYear: 2019, // 博客创建年份
-      copyrightInfo: 'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签
-    }
-  },
-  plugins: [ // 插件
-    // [require('./plugins/love-me'), { // 鼠标点击爱心特效
-    //   color: '#11a8cd', // 爱心颜色，默认随机色
-    //   excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空''
-    // }],
-
-    ['thirdparty-search', { // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
-      thirdparty: [ // 可选，默认 []
-        {
-          title: '在MDN中搜索',
-          frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
-          behindUrl: '' // 搜索链接的后面部分，可选，默认 ''
-        },
-        {
-          title: '在Runoob中搜索',
-          frontUrl: 'https://www.runoob.com/?s=',
-        },
-        {
-          title: '在Vue API中搜索',
-          frontUrl: 'https://cn.vuejs.org/v2/api/#',
-        },
-        {
-          title: '在Bing中搜索',
-          frontUrl: 'https://cn.bing.com/search?q='
-        },
-        {
-          title: '通过百度搜索本站的',
-          frontUrl: 'https://www.baidu.com/s?wd=site%3Axugaoyi.com%20'
-        }
-      ]
-    }],
-
-    'vuepress-plugin-baidu-autopush', // 百度自动推送
-
-    ['one-click-copy', { // 代码块复制按钮
-      copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
-      copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
-      duration: 1000, // prompt message display time.
-      showInMobile: false // whether to display on the mobile side, default: false.
-    }],
-    ['demo-block', { // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block
-      settings: {
-        // jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖
-        // cssLib: ['http://xxx'], // 在线示例中的css依赖
-        // vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖
-        jsfiddle: false, // 是否显示 jsfiddle 链接
-        codepen: true, // 是否显示 codepen 链接
-        horizontal: false // 是否展示为横向样式
-      }
-    }],
-    [
-      'vuepress-plugin-zooming', // 放大图片
-      {
-        selector:'.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
-        options: {
-          bgColor: 'rgba(0,0,0,0.6)'
-        },
-      },
-    ],
-    [
-      'vuepress-plugin-baidu-tongji', // 百度统计
-      {
-        hm: '503f098e7e5b3a5b5d8c5fc2938af002'
-      }
-    ],
-    [
-      'vuepress-plugin-comment', // 评论
-      // {
-      //   choosen: 'valine', 
-      //   options: {
-      //     el: '#valine-vuepress-comment',
-      //     appId: 'Your own appId',
-      //     appKey: 'Your own appKey'
-      //   }
-      // }
-      {
-        choosen: 'gitalk', 
-        options: {
-          clientID: 'a6e1355287947096b88b',
-          clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71',
-          repo: 'vuepress-theme-vdoing', // GitHub 仓库
-          owner: 'xugaoyi', // GitHub仓库所有者
-          admin: ['xugaoyi'], // 对仓库有写权限的人
-          // distractionFreeMode: true,
-          pagerDirection: 'last', // 'first'正序 | 'last'倒序
-          id: "<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>", //  页面的唯一标识,长度不能超过50
-          title: "「评论」<%- frontmatter.title %>", // GitHub issue 的标题
-          labels: ["Gitalk", "Comment"], // GitHub issue 的标签
-          body:"页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
-        }
-      }
-    ],
-    [
-      '@vuepress/last-updated', // "上次更新"时间格式
-      {
-        transformer: (timestamp, lang) => {
-          const moment = require('moment') // https://momentjs.com/
-          return moment(timestamp).format('YYYY/MM/DD, H:MM:SS');
-        }
-      }
-    ]
-  ],
-  // configureWebpack: {
-  //   //webpack别名 如![Image from alias](~@alias/image.png)
-  //   resolve: {
-  //     alias: {
-  //       '@alias': 'path/to/some/dir'
-  //     }
-  //   }
-  // }
-}

docs/.vuepress/config.ts

@@ -0,0 +1,367 @@
+/**
+ * 提示：如您想使用JS版本的配置文件可参考：https://github.com/xugaoyi/vuepress-theme-vdoing/tree/a2f03e993dd2f2a3afdc57cf72adfc6f1b6b0c32/docs/.vuepress
+ */
+import { resolve } from 'path'
+import { defineConfig4CustomTheme, UserPlugins } from 'vuepress/config'
+import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
+import dayjs from 'dayjs'
+import baiduCode from './config/baiduCode' // 百度统计hm码
+import htmlModules from './config/htmlModules' // 自定义插入的html块
+
+const DOMAIN_NAME = 'xugaoyi.com' // 域名 (不带https)
+const WEB_SITE = `https://${DOMAIN_NAME}` // 网址
+
+export default defineConfig4CustomTheme<VdoingThemeConfig>({
+  theme: 'vdoing', // 使用npm主题包
+  // theme: resolve(__dirname, '../../vdoing'), // 使用本地主题包
+
+  locales: {
+    '/': {
+      lang: 'zh-CN',
+      title: "Evan's blog",
+      description: 'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。',
+    }
+  },
+  // base: '/', // 默认'/'。如果你想将你的网站部署到如 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/",（否则页面将失去样式等文件）
+
+  // 主题配置
+  themeConfig: {
+    // 导航配置
+    nav: [
+      { text: '首页', link: '/' },
+      {
+        text: '前端',
+        link: '/web/', //目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
+        items: [
+          // 说明：以下所有link的值只是在相应md文件头部定义的永久链接（不是什么特殊编码）。另外，注意结尾是有斜杠的
+          {
+            text: '前端文章',
+            items: [
+              { text: 'JavaScript', link: '/pages/8143cc480faf9a11/' },
+            ],
+          },
+          {
+            text: '学习笔记',
+            items: [
+              { text: '《JavaScript教程》', link: '/note/javascript/' },
+              { text: '《JavaScript高级程序设计》', link: '/note/js/' },
+              { text: '《ES6 教程》', link: '/note/es6/' },
+              { text: '《Vue》', link: '/note/vue/' },
+              { text: '《React》', link: '/note/react/' },
+              {
+                text: '《TypeScript 从零实现 axios》',
+                link: '/note/typescript-axios/',
+              },
+              {
+                text: '《Git》',
+                link: '/note/git/',
+              },
+              {
+                text: 'TypeScript',
+                link: '/pages/51afd6/',
+              },
+              {
+                text: 'JS设计模式总结',
+                link: '/pages/4643cd/',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        text: '页面',
+        link: '/ui/',
+        items: [
+          { text: 'HTML', link: '/pages/8309a5b876fc95e3/' },
+          { text: 'CSS', link: '/pages/0a83b083bdf257cb/' },
+        ],
+      },
+      {
+        text: '技术',
+        link: '/technology/',
+        items: [
+          { text: '技术文档', link: '/pages/9a7ee40fc232253e/' },
+          { text: 'GitHub技巧', link: '/pages/4c778760be26d8b3/' },
+          { text: 'Nodejs', link: '/pages/117708e0af7f0bd9/' },
+          { text: '博客搭建', link: '/pages/41f87d890d0a02af/' },
+        ],
+      },
+      {
+        text: '更多',
+        link: '/more/',
+        items: [
+          { text: '学习', link: '/pages/f2a556/' },
+          { text: '面试', link: '/pages/aea6571b7a8bae86/' },
+          { text: '心情杂货', link: '/pages/2d615df9a36a98ed/' },
+          { text: '实用技巧', link: '/pages/baaa02/' },
+          { text: '友情链接', link: '/friends/' },
+        ],
+      },
+      { text: '关于', link: '/about/' },
+      {
+        text: '收藏',
+        link: '/pages/beb6c0bd8a66cea6/',
+        // items: [
+        //   { text: '网站', link: '/pages/beb6c0bd8a66cea6/' },
+        //   { text: '资源', link: '/pages/eee83a9211a70f9d/' },
+        //   { text: 'Vue资源', link: '/pages/12df8ace52d493f6/' },
+        // ],
+      },
+      {
+        text: '索引',
+        link: '/archives/',
+        items: [
+          { text: '分类', link: '/categories/' },
+          { text: '标签', link: '/tags/' },
+          { text: '归档', link: '/archives/' },
+        ],
+      },
+    ],
+    sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
+    logo: '/img/logo.png', // 导航栏logo
+    repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接
+    searchMaxSuggestions: 10, // 搜索结果显示最大数
+    lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字   string | boolean (取值为git提交时间)
+    docsDir: 'docs', // 编辑的文件夹
+    // docsBranch: 'master', // 编辑的文件所在分支，默认master。 注意：如果你的分支是main则修改为main
+    editLinks: true, // 启用编辑
+    editLinkText: '编辑',
+
+    //*** 以下是Vdoing主题相关配置，文档：https://doc.xugaoyi.com/pages/a20ce8/ ***//
+
+    // category: false, // 是否打开分类功能，默认true
+    // tag: false, // 是否打开标签功能，默认true
+    // archive: false, // 是否打开归档功能，默认true
+    // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
+
+    // pageStyle: 'line', // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框
+
+    // bodyBgImg: [
+    //   'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
+    //   'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
+    //   'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
+    // ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
+    // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~1.0, 默认0.5
+    // bodyBgImgInterval: 15, // body多张背景图时的切换间隔, 默认15，单位s
+    // titleBadge: false, // 文章标题前的图标是否显示，默认true
+    // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
+    //   '图标地址1',
+    //   '图标地址2'
+    // ],
+    // contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 方格 | 2 横线 | 3 竖线 | 4 左斜线 | 5 右斜线 | 6 点状
+
+    // updateBar: { // 最近更新栏
+    //   showToArticle: true, // 显示到文章页底部，默认true
+    //   moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
+    // },
+    // rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
+    // sidebarOpen: false, // 初始状态是否打开左侧边栏，默认true
+    // pageButton: false, // 是否显示快捷翻页按钮，默认true
+
+    // 默认外观模式（用户未在页面手动修改过模式时才生效，否则以用户设置的模式为准），可选：'auto' | 'light' | 'dark' | 'read'，默认'auto'。
+    // defaultMode: 'auto',
+
+    // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义>    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
+    sidebar: 'structuring',
+
+    // 文章默认的作者信息，(可在md文件中单独配置此信息) string | {name: string, link?: string}
+    author: {
+      name: 'xugaoyi', // 必需
+      link: 'https://github.com/xugaoyi', // 可选的
+    },
+
+    // 博主信息 (显示在首页侧边栏)
+    blogger: {
+      avatar: 'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg',
+      name: 'Evan Xu',
+      slogan: '前端界的小学生',
+    },
+
+    // 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)
+    social: {
+      // iconfontCssFile: '//at.alicdn.com/t/xxx.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加。阿里图片库：https://www.iconfont.cn/
+      icons: [
+        {
+          iconClass: 'icon-youjian',
+          title: '发邮件',
+          link: 'mailto:894072666@qq.com',
+        },
+        {
+          iconClass: 'icon-github',
+          title: 'GitHub',
+          link: 'https://github.com/xugaoyi',
+        },
+        {
+          iconClass: 'icon-erji',
+          title: '听音乐',
+          link: 'https://music.163.com/#/playlist?id=755597173',
+        },
+      ],
+    },
+
+    // 页脚信息
+    footer: {
+      createYear: 2019, // 博客创建年份
+      copyrightInfo:
+        'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息、备案信息等，支持a标签或换行标签</br>
+    },
+
+    // 扩展自动生成frontmatter。（当md文件的frontmatter不存在相应的字段时将自动添加。不会覆盖已有的数据。）
+    extendFrontmatter: {
+      author: {
+        name: 'xugaoyi',
+        link: 'https://github.com/xugaoyi'
+      }
+    },
+
+    // 自定义hmtl(广告)模块
+    htmlModules
+  },
+
+  // 注入到页面<head>中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
+  head: [
+    ['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
+    [
+      'meta',
+      {
+        name: 'keywords',
+        content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown',
+      },
+    ],
+    ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc' }], // 百度统计的站长验证（你可以去掉）
+    ['meta', { name: 'theme-color', content: '#11a8cd' }], // 移动浏览器主题颜色
+    // [
+    //   'script',
+    //   {
+    //     'data-ad-client': 'ca-pub-7828333725993554',
+    //     async: 'async',
+    //     src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
+    //   },
+    // ], // 网站关联Google AdSense 与 html格式广告支持（你可以去掉）
+  ],
+
+
+  // 插件配置
+  plugins: <UserPlugins>[
+    [
+      "sitemap", // 网站地图
+      {
+        hostname: WEB_SITE,
+      },
+    ],
+
+    'vuepress-plugin-baidu-autopush', // 百度自动推送
+
+    [
+      'vuepress-plugin-baidu-tongji', // 百度统计
+      {
+        hm: baiduCode,
+      },
+    ],
+
+    // 全文搜索。 ⚠️注意：此插件会在打开网站时多加载部分js文件用于搜索，导致初次访问网站变慢。如在意初次访问速度的话可以不使用此插件！（推荐：vuepress-plugin-thirdparty-search）
+    // 'fulltext-search',
+
+    // 可以添加第三方搜索链接的搜索框（继承原官方搜索框的配置参数）
+    [
+      'thirdparty-search',
+      {
+        thirdparty: [
+          {
+            title: '在MDN中搜索',
+            frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
+            behindUrl: '', // 搜索链接的后面部分，可选，默认 ''
+          },
+          {
+            title: '在Runoob中搜索',
+            frontUrl: 'https://www.runoob.com/?s=',
+          },
+          {
+            title: '在Vue API中搜索',
+            frontUrl: 'https://cn.vuejs.org/v2/api/#',
+          },
+          {
+            title: '在Bing中搜索',
+            frontUrl: 'https://cn.bing.com/search?q=',
+          },
+          {
+            title: '通过百度搜索本站的',
+            frontUrl: `https://www.baidu.com/s?wd=site%3A${DOMAIN_NAME}%20`,
+          },
+        ],
+      }
+    ],
+
+    [
+      'one-click-copy', // 代码块复制按钮
+      {
+        copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
+        copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
+        duration: 1000, // prompt message display time.
+        showInMobile: false, // whether to display on the mobile side, default: false.
+      },
+    ],
+
+    [
+      'demo-block', // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block
+      {
+        settings: {
+          // jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖
+          // cssLib: ['http://xxx'], // 在线示例中的css依赖
+          // vue: 'https://jsd.cdn.zzko.cn/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖
+          jsfiddle: false, // 是否显示 jsfiddle 链接
+          codepen: true, // 是否显示 codepen 链接
+          horizontal: false, // 是否展示为横向样式
+        },
+      },
+    ],
+    [
+      'vuepress-plugin-zooming', // 放大图片
+      {
+        selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
+        options: {
+          bgColor: 'rgba(0,0,0,0.6)',
+        },
+      },
+    ],
+    [
+      'vuepress-plugin-comment', // 评论
+      {
+        choosen: 'gitalk',
+        options: {
+          clientID: 'a6e1355287947096b88b',
+          clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71',
+          repo: 'blog-gitalk-comment', // GitHub 仓库
+          owner: 'xugaoyi', // GitHub仓库所有者
+          admin: ['xugaoyi'], // 对仓库有写权限的人
+          // distractionFreeMode: true,
+          pagerDirection: 'last', // 'first'正序 | 'last'倒序
+          id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', //  页面的唯一标识,长度不能超过50
+          title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
+          labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
+          body:
+            '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
+        },
+      },
+    ],
+    [
+      '@vuepress/last-updated', // "上次更新"时间格式
+      {
+        transformer: (timestamp, lang) => {
+          return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
+        },
+      },
+    ],
+  ],
+
+  markdown: {
+    lineNumbers: true,
+    extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'], // 提取标题到侧边栏的级别，默认['h2', 'h3']
+  },
+
+  // 监听文件变化并重新构建
+  extraWatchFiles: [
+    '.vuepress/config.ts',
+    '.vuepress/config/htmlModules.ts',
+  ]
+})

docs/.vuepress/config/baiduCode.ts

@@ -0,0 +1 @@
+export default '503f098e7e5b3a5b5d8c5fc2938af002'

docs/.vuepress/config/htmlModules.ts

@@ -0,0 +1,122 @@
+import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
+
+/** 插入自定义html模块 (可用于插入广告模块等)
+ * {
+ *   homeSidebarB: htmlString, 首页侧边栏底部
+ *
+ *   sidebarT: htmlString, 所有左侧边栏顶部
+ *   sidebarB: htmlString, 所有左侧边栏底部
+ *
+ *   pageT: htmlString, 页面顶部
+ *   pageB: htmlString, 页面底部
+ *   pageTshowMode: string, 页面顶部-显示方式：未配置默认所有页面；'article' => 仅文章页①； 'custom' => 仅自定义页①
+ *   pageBshowMode: string, 页面底部-显示方式：未配置默认所有页面；'article' => 仅文章页①； 'custom' => 仅自定义页①
+ *
+ *   windowLB: htmlString, 全局窗口左下角②
+ *   windowRB: htmlString, 全局窗口右下角②
+ * }
+ *
+ * ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。
+ * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
+ */
+const htmlModule: VdoingThemeConfig['htmlModules'] = {
+  homeSidebarB:
+    `<div style="padding: 0.95rem">
+    <p style="
+      color: var(--textColor);
+      opacity: 0.9;
+      font-size: 20px;
+      font-weight: bold;
+      margin: 0 0 8px 0;
+    ">公众号</p>
+    <img src="https://open.weixin.qq.com/qr/code?username=gh_0cf4b813918c"  style="width:100%;" />
+    关注公众号，回复[<b>前端资源</b>]，可获取 <a href="https://game.xugaoyi.com" arget="_blank" >前端学习资源<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+    </p>
+    </div>`,
+  // `<!-- 纵向自适应 -->
+  // <ins class="adsbygoogle"
+  //     style="display:block;padding: 0.95rem;"
+  //     data-ad-client="ca-pub-7828333725993554"
+  //     data-ad-slot="7802654582"
+  //     data-ad-format="auto"
+  //     data-full-width-responsive="true"></ins>
+  // <script>
+  //     (adsbygoogle = window.adsbygoogle || []).push({});
+  // </script>`,
+  // sidebarT:
+  //   `<!--  固定100% * 150px可显示，max-height:150px 未见显示-->
+  //   <ins class="adsbygoogle"
+  //         style="display:inline-block;width:100%;max-height:150px"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="6625304284"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>`,
+  // sidebarB:
+  //   `<!-- 正方形 -->
+  //     <ins class="adsbygoogle"
+  //         style="display:block"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="3508773082"
+  //         data-ad-format="auto"
+  //         data-full-width-responsive="true"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>`,
+  // pageT:
+  //   `<!-- 固定100% * 90px可显示，max-height:90px未见显示-->
+  //    <ins class="adsbygoogle"
+  //         style="display:inline-block;width:100%;max-height:90px"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="6625304284"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>`,
+  // pageTshowMode: 'article',
+  // pageB:
+  //   `<!-- 横向自适应 -->
+  //     <ins class="adsbygoogle"
+  //         style="display:block"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="6620245489"
+  //         data-ad-format="auto"
+  //         data-full-width-responsive="true"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>`,
+  // pageBshowMode: 'article',
+  // windowLB: // 会遮挡部分侧边栏
+  //   `<!-- 固定200*200px -->
+  //     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+  //     <ins class="adsbygoogle"
+  //         style="display:inline-block;width:200px;height:200px"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="6625304284"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>`,
+  // windowRB:
+  //   `<!-- 固定160*160px -->
+  //     <ins class="adsbygoogle"
+  //         style="display:inline-block;max-width:160px;max-height:160px"
+  //         data-ad-client="ca-pub-7828333725993554"
+  //         data-ad-slot="8377369658"></ins>
+  //     <script>
+  //         (adsbygoogle = window.adsbygoogle || []).push({});
+  //     </script>
+  //     `,
+}
+
+
+// const htmlModule = {
+//   homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   sidebarT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   sidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   pageT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   pageB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   windowLB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+//   windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
+// }
+
+
+export default htmlModule

docs/.vuepress/config/nav.js

@@ -1,67 +0,0 @@
-module.exports = [
-  {text: '首页', link: '/'},
-  {
-    text: '前端',
-    link: '/web/',  //目录页，vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
-    items: [
-      {text: '前端文章', items: [
-        {text: 'JavaScript', link: '/pages/8143cc480faf9a11/'}, // 注意link结尾有斜杠和没有斜杠的区别
-        {text: 'Vue', link: '/pages/802a1ca6f7b71c59/'},
-      ]},
-      {text: '学习笔记', items:[
-        {text: '《JavaScript教程》笔记', link: '/note/javascript/'},
-        {text: '《ES6 教程》笔记', link: '/note/es6/'},
-        {text: '《Vue》笔记', link: '/note/vue/'},
-        {text: '《TypeScript 从零实现 axios》', link: '/note/typescript-axios/'},
-        {text: '小程序笔记', link: '/note/wx-miniprogram/'},
-      ]}
-    ]
-  },
-  {
-    text: '页面', 
-    link: '/ui/',
-    items: [
-      {text: 'HTML', link: '/pages/8309a5b876fc95e3/'},
-      {text: 'CSS', link: '/pages/0a83b083bdf257cb/'},
-    ]
-  },
-  {
-    text: '技术',
-    link: '/technology/',
-    items: [
-      {text: '技术文档', link: '/pages/9a7ee40fc232253e/'},
-      {text: 'GitHub技巧', link: '/pages/4c778760be26d8b3/'},
-      {text: 'Nodejs', link: '/pages/117708e0af7f0bd9/'},
-      {text: '博客搭建', link: '/pages/41f87d890d0a02af/'},
-    ]
-  },
-  {
-    text: '更多', 
-    link: '/more/',
-    items: [
-      {text: '学习', link: '/pages/a8692ab3bdcb4588/'},
-      {text: '面试', link: '/pages/aea6571b7a8bae86/'},
-      {text: '心情杂货', link: '/pages/2d615df9a36a98ed/'},
-      {text: '友情链接', link: '/friends/'},
-    ]
-  },
-  {text: '关于', link: '/about/'},
-  {
-    text: '收藏',
-    link: '/pages/beb6c0bd8a66cea6/',
-    items: [
-      {text: '网站', link: '/pages/beb6c0bd8a66cea6/'},
-      {text: '资源', link: '/pages/eee83a9211a70f9d/'},
-      {text: 'Vue资源', link: '/pages/12df8ace52d493f6/'},
-    ]
-  },
-  {
-    text: '索引',
-    link: '/archives/',
-    items: [
-      {text: '分类', link: '/categories/'},
-      {text: '标签', link: '/tags/'},
-      {text: '归档', link: '/archives/'},
-    ]
-  }
-]

docs/.vuepress/config/sidebar.js

@@ -1,12 +1,13 @@
-// 此文件没有用到，仅用于测试和侧边栏数据格式的参考。
+// ！！！注：此文件没有使用到，仅用于测试和侧边栏数据格式的参考。
 
-module.exports = { // 侧边栏
+// 侧边栏
+module.exports = {
   '/01.前端/': [
     {
       title: 'JavaScript',
       collapsable: false, //是否可折叠，可选的，默认true
       children: [
-        ['01.JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'], 
+        ['01.JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'],
         ['01.JavaScript/02.数据类型转换','数据类型转换'],
         ['01.JavaScript/03.ES5面向对象','ES5面向对象'],
         ['01.JavaScript/04.ES6面向对象','ES6面向对象'],
@@ -21,13 +22,13 @@ module.exports = { // 侧边栏
       collapsable: false,
       children: [
         ['01.html-css/00.flex布局语法','flex布局语法'],
-        ['01.html-css/01.flex布局案例-基础','flex布局案例-基础'], 
+        ['01.html-css/01.flex布局案例-基础','flex布局案例-基础'],
         ['01.html-css/02.flex布局案例-骰子','flex布局案例-骰子'],
         ['01.html-css/03.flex布局案例-网格布局','flex布局案例-网格布局'],
         ['01.html-css/04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'],
-        ['01.html-css/05.flex布局案例-输入框布局','flex布局案例-输入框布局'], 
-        ['01.html-css/06.CSS3之transform过渡','CSS3之transform过渡'], 
-        ['01.html-css/07.CSS3之animation动画','CSS3之animation动画'], 
+        ['01.html-css/05.flex布局案例-输入框布局','flex布局案例-输入框布局'],
+        ['01.html-css/06.CSS3之transform过渡','CSS3之transform过渡'],
+        ['01.html-css/07.CSS3之animation动画','CSS3之animation动画'],
       ]
     },
   ],
@@ -50,7 +51,7 @@ module.exports = { // 侧边栏
   '/04.其他/': [
     {
       title: '学习',
-      collapsable: false, 
+      collapsable: false,
       children: [
         ['01.学习/01.学习网站','学习网站'],
         ['01.学习/02.学习效率低，忘性很大怎么办？','学习效率低，忘性很大怎么办？'],
@@ -58,7 +59,7 @@ module.exports = { // 侧边栏
     },
     {
       title: '学习笔记',
-      collapsable: false, 
+      collapsable: false,
       children: [
         ['02.学习笔记/01.小程序笔记','小程序笔记'],
       ]
@@ -101,4 +102,4 @@ module.exports = { // 侧边栏
   //   //   ]
   //   // }
   // ],
-}
+}

docs/.vuepress/public/CNAME

@@ -0,0 +1 @@
+b.xugaoyi.com

docs/.vuepress/styles/index.styl

@@ -57,3 +57,16 @@ body .vuepress-plugin-demo-block__wrapper
       border-bottom-color: $accentColor !important;
     svg
       fill: $accentColor !important;
+
+// 全文搜索框
+.suggestions
+  overflow: auto
+  max-height: calc(100vh - 6rem)
+  @media (max-width: 719px) {
+    width: 90vw;
+    min-width: 90vw!important;
+    margin-right: -20px;
+  }
+  .highlight
+    color: $accentColor
+    font-weight: bold

docs/.vuepress/styles/palette.styl

@@ -1,16 +1,13 @@
-//***vdoing主题-样式变量***//
+//***vdoing主题-样式变量（你可以修改这些变量值以覆盖主题使用的样式变量）***//
 
 // 以下注释的变量仅供参考，主题使用的最新变量请查看：https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/theme-vdoing/styles/palette.styl
-// 你可以在这个文件内修改这些变量的值
 
 // // 颜色
- 
+
 // $bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
-// $accentColor = #11A8CD
+// $accentColor = #11A8CD // 主题色
+// $activeColor = #ff5722
 // $arrowBgColor = #ccc
-// $badgeTipColor = #42b983
-// $badgeWarningColor = darken(#ffe564, 35%)
-// $badgeErrorColor = #DA5961
 
 // // 布局
 // $navbarHeight = 3.6rem
@@ -31,9 +28,14 @@
 //   --textColor: #004050
 //   --textLightenColor: #0085AD
 //   --borderColor: rgba(0,0,0,.15)
+//   // 代码块浅色主题
 //   --codeBg: #f6f6f6
 //   --codeColor: #525252
 //   codeThemeLight()
+//   // // 代码块深色主题
+//   // --codeBg: #252526
+//   // --codeColor: #fff
+//   // codeThemeDark()
 
 // // 深色模式
 // .theme-mode-dark
@@ -59,4 +61,4 @@
 //   --borderColor: rgba(0,0,0,.15)
 //   --codeBg: #282c34
 //   --codeColor: #fff
-//   codeThemeDark()
+//   codeThemeDark()

docs/00.目录页/01.前端.md

@@ -1,16 +1,18 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 01.前端
+  data:
+    path: 01.前端
     imgUrl: /img/web.png
     description: JavaScript、ES6、Vue框架等前端技术
 title: 前端
 date: 2020-03-11 21:50:53
-permalink: /web
+permalink: /web/
 sidebar: false
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
-

docs/00.目录页/02.页面.md

@@ -1,15 +1,18 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 02.页面
+  data:
+    path: 02.页面
     imgUrl: /img/ui.png
     description: html(5)/css(3)，前端页面相关技术
 title: 页面
 date: 2020-03-11 21:50:54
-permalink: /ui
+permalink: /ui/
 sidebar: false
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/00.目录页/03.技术.md

@@ -1,15 +1,18 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 03.技术
+  data:
+    path: 03.技术
     imgUrl: /img/other.png
     description: 技术文档、教程、技巧、总结等文章
 title: 技术
 date: 2020-03-11 21:50:55
-permalink: /technology
+permalink: /technology/
 sidebar: false
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/00.目录页/04.更多.md

@@ -1,15 +1,18 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 04.更多
+  data:
+    path: 04.更多
     imgUrl: /img/more.png
     description: 学习、面试、在线工具等更多文章和页面
 title: 更多
 date: 2020-03-11 21:50:56
-permalink: /more
+permalink: /more/
 sidebar: false
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/01.前端/25.JavaScript文章/01.33个非常实用的JavaScript一行代码.md

@@ -0,0 +1,395 @@
+---
+title: 33个非常实用的JavaScript一行代码
+date: 2021-11-02 09:51:37
+permalink: /pages/a61298/
+categories:
+  - 前端
+  - JavaScript文章
+tags:
+  - JavaScript
+author: CUGGZ
+---
+
+## 一、日期处理
+
+### 1. 检察日期是否有效
+
+该方法用于检测给出的日期是否有效：
+
+```javascript
+const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
+
+isDateValid("December 17, 1995 03:24:00");  // true
+复制代码
+```
+
+### 2. 计算两个日期之间的间隔
+
+该方法用于计算两个日期之间的间隔时间：
+
+```javascript
+const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
+
+dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90
+复制代码
+```
+
+距离过年还有90天~
+
+### 3. 查找日期位于一年中的第几天
+
+该方法用于检测给出的日期位于今年的第几天：
+
+```javascript
+const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
+
+dayOfYear(new Date());   // 307
+复制代码
+```
+
+2021年已经过去300多天了~
+
+### 4. 时间格式化
+
+该方法可以用于将时间转化为hour:minutes:seconds的格式：
+
+```javascript
+const timeFromDate = date => date.toTimeString().slice(0, 8);
+
+timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
+timeFromDate(new Date());  // 返回当前时间 09:00:00
+复制代码
+```
+
+## 二、字符串处理
+
+### 1. 字符串首字母大写
+
+该方法用于将英文字符串的首字母大写处理：
+
+```javascript
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
+capitalize("hello world")  // Hello world
+复制代码
+```
+
+### 2. 翻转字符串
+
+该方法用于将一个字符串进行翻转操作，返回翻转后的字符串：
+
+```javascript
+const reverse = str => str.split('').reverse().join('');
+
+reverse('hello world');   // 'dlrow olleh'
+复制代码
+```
+
+### 3. 随机字符串
+
+该方法用于生成一个随机的字符串：
+
+```javascript
+const randomString = () => Math.random().toString(36).slice(2);
+
+randomString();
+复制代码
+```
+
+### 4. 截断字符串
+
+该方法可以从指定长度处截断字符串:
+
+```javascript
+const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
+
+truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'
+复制代码
+```
+
+### 5. 去除字符串中的HTML
+
+该方法用于去除字符串中的HTML元素：
+
+```javascript
+const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
+复制代码
+```
+
+## 三、数组处理
+
+### 1. 从数组中移除重复项
+
+该方法用于移除数组中的重复项：
+
+```javascript
+const removeDuplicates = (arr) => [...new Set(arr)];
+
+console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
+复制代码
+```
+
+### 2. 判断数组是否为空
+
+该方法用于判断一个数组是否为空数组，它将返回一个布尔值：
+
+```javascript
+const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
+
+isNotEmpty([1, 2, 3]);  // true
+复制代码
+```
+
+### 3. 合并两个数组
+
+可以使用下面两个方法来合并两个数组：
+
+```javascript
+const merge = (a, b) => a.concat(b);
+
+const merge = (a, b) => [...a, ...b];
+复制代码
+```
+
+## 四、数字操作
+
+### 1. 判断一个数是奇数还是偶数
+
+该方法用于判断一个数字是奇数还是偶数：
+
+```javascript
+const isEven = num => num % 2 === 0;
+
+isEven(996);
+复制代码
+```
+
+### 2. 获得一组数的平均值
+
+```javascript
+const average = (...args) => args.reduce((a, b) => a + b) / args.length;
+
+average(1, 2, 3, 4, 5);   // 3
+复制代码
+```
+
+### 3. 获取两个整数之间的随机整数
+
+该方法用于获取两个整数之间的随机整数
+
+```javascript
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
+
+random(1, 50);
+复制代码
+```
+
+### 4. 指定位数四舍五入
+
+该方法用于将一个数字按照指定位进行四舍五入：
+
+```javascript
+const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
+
+round(1.005, 2) //1.01
+round(1.555, 2) //1.56
+复制代码
+```
+
+## 五、颜色操作
+
+### 1. 将RGB转化为十六机制
+
+该方法可以将一个RGB的颜色值转化为16进制值：
+
+```javascript
+const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+
+rgbToHex(255, 255, 255);  // '#ffffff'
+复制代码
+```
+
+### 2. 获取随机十六进制颜色
+
+该方法用于获取一个随机的十六进制颜色值：
+
+```javascript
+const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
+
+randomHex();
+复制代码
+```
+
+## 六、浏览器操作
+
+### 1. 复制内容到剪切板
+
+该方法使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板：
+
+```javascript
+const copyToClipboard = (text) => navigator.clipboard.writeText(text);
+
+copyToClipboard("Hello World");
+复制代码
+```
+
+### 2. 清除所有cookie
+
+该方法可以通过使用 document.cookie 来访问 cookie 并清除存储在网页中的所有 cookie：
+
+```javascript
+const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
+复制代码
+```
+
+### 3. 获取选中的文本
+
+该方法通过内置的 getSelection 属性获取用户选择的文本：
+
+```javascript
+const getSelectedText = () => window.getSelection().toString();
+
+getSelectedText();
+复制代码
+```
+
+### 4. 检测是否是黑暗模式
+
+该方法用于检测当前的环境是否是黑暗模式，它是一个布尔值：
+
+```javascript
+const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+console.log(isDarkMode)
+复制代码
+```
+
+### 5. 滚动到页面顶部
+
+该方法用于在页面中返回顶部：
+
+```javascript
+const goToTop = () => window.scrollTo(0, 0);
+
+goToTop();
+复制代码
+```
+
+### 6. 判断当前标签页是否激活
+
+该方法用于检测当前标签页是否已经激活：
+
+```javascript
+const isTabInView = () => !document.hidden;
+复制代码
+```
+
+### 7. 判断当前是否是苹果设备
+
+该方法用于检测当前的设备是否是苹果的设备：
+
+```javascript
+const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+isAppleDevice();
+复制代码
+```
+
+### 8. 是否滚动到页面底部
+
+该方法用于判断页面是否已经底部：
+
+```javascript
+const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
+复制代码
+```
+
+### 9. 重定向到一个URL
+
+该方法用于重定向到一个新的URL：
+
+```javascript
+const redirect = url => location.href = url
+
+redirect("https://www.google.com/")
+复制代码
+```
+
+### 10. 打开浏览器打印框
+
+该方法用于打开浏览器的打印框：
+
+```javascript
+const showPrintDialog = () => window.print()
+复制代码
+```
+
+## 七、其他操作
+
+### 1. 随机布尔值
+
+该方法可以返回一个随机的布尔值，使用Math.random()可以获得0-1的随机数，与0.5进行比较，就有一半的概率获得真值或者假值。
+
+```javascript
+const randomBoolean = () => Math.random() >= 0.5;
+
+randomBoolean();
+复制代码
+```
+
+### 2. 变量交换
+
+可以使用以下形式在不适用第三个变量的情况下，交换两个变量的值：
+
+```javascript
+[foo, bar] = [bar, foo];
+复制代码
+```
+
+### 3. 获取变量的类型
+
+该方法用于获取一个变量的类型：
+
+```javascript
+const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+
+trueTypeOf('');     // string
+trueTypeOf(0);      // number
+trueTypeOf();       // undefined
+trueTypeOf(null);   // null
+trueTypeOf({});     // object
+trueTypeOf([]);     // array
+trueTypeOf(0);      // number
+trueTypeOf(() => {});  // function
+复制代码
+```
+
+### 4. 华氏度和摄氏度之间的转化
+
+该方法用于摄氏度和华氏度之间的转化：
+
+```javascript
+const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
+const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
+
+celsiusToFahrenheit(15);    // 59
+celsiusToFahrenheit(0);     // 32
+celsiusToFahrenheit(-20);   // -4
+fahrenheitToCelsius(59);    // 15
+fahrenheitToCelsius(32);    // 0
+复制代码
+```
+
+### 5. 检测对象是否为空
+
+该方法用于检测一个JavaScript对象是否为空：
+
+```javascript
+const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
+复制代码
+```
+
+
+
+> 作者：CUGGZ
+> 链接：https://juejin.cn/post/7025771605422768159

docs/01.前端/25.JavaScript文章/02.new命令原理.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # new命令原理
 

docs/01.前端/25.JavaScript文章/03.ES5面向对象.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # ES5面向对象
 

docs/01.前端/25.JavaScript文章/04.ES6面向对象.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # ES6面向对象
 

docs/01.前端/25.JavaScript文章/06.多种数组去重性能对比.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 多种数组去重性能对比
 

docs/01.前端/25.JavaScript文章/100.比typeof运算符更准确的类型判断.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 比typeof运算符更准确的类型判断
 

docs/01.前端/25.JavaScript文章/1110.三级目录/00.四级文件.md

@@ -0,0 +1,32 @@
+---
+title: 四级文件(测试)
+date: 2020-12-11 11:15:53
+permalink: /pages/8481d1/
+categories: 
+  - 前端
+  - JavaScript文章
+  - 三级目录
+tags: 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+## 测试文件
+Test Test
+
+<code-group>
+  <code-block title="YARN" active>
+  ```bash
+  yarn create vuepress-site [optionalDirectoryName]
+  # OR npx create-vuepress-site [optionalDirectoryName]
+  ```
+  </code-block>
+
+  <code-block title="NPM">
+  ```bash
+  npx create-vuepress-site [optionalDirectoryName]
+  ```
+  </code-block>
+</code-group>

docs/01.前端/25.JavaScript文章/50.js随机打乱数组.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # JS随机打乱数组
 

docs/01.前端/25.JavaScript文章/60.判断是否为移动端浏览器.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 判断是否为移动端浏览器
 

docs/01.前端/25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md

@@ -2,11 +2,14 @@
 title: 将一维数组按指定长度转为二维数组
 date: 2020-02-23 13:49:31
 permalink: /pages/f1acb712033ac8da
-categories: 
+categories:
   - 前端
   - JavaScript文章
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 将一维数组按指定长度转为二维数组
 
@@ -35,7 +38,7 @@ console.log(pages(arr, 8)) // [[1, 2, 3, 4, 5, 6, 7, 8], [9]]
 
 如图，按需求，图标模块中的图标个数是不确定的，每页最多显示8个，超出8个的显示到第二页，实现向左滑动翻页。提供的数据是一个一维数组，这时就可以使用上面的代码按长度为8转为二维数组，再分页渲染到页面。
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200223142410.jpg)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200223142410.jpg)
 
 ```html
 <template>
@@ -72,4 +75,3 @@ console.log(pages(arr, 8)) // [[1, 2, 3, 4, 5, 6, 7, 8], [9]]
   }
 </script>
 ```
-

docs/01.前端/25.JavaScript文章/80.防抖与节流函数.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 防抖与节流函数
 

docs/01.前端/25.JavaScript文章/90.JS获取和修改url参数.md

@@ -6,7 +6,10 @@ categories:
   - 前端
   - JavaScript文章
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # JS获取和修改url参数
 

docs/01.前端/30.Vue文章/10.Vue项目开发前的一些准备工作.md

@@ -1,79 +0,0 @@
----
-title: Vue项目开发前的一些准备工作
-date: 2020-02-21 14:40:19
-permalink: /pages/802a1ca6f7b71c59
-categories: 
-  - 前端
-  - Vue文章
-tags: 
-  - 
----
-# Vue项目开发前的一些准备工作
-
-在使用Vue CLi创建一个项目之后，正式进入开发前可能需要做一些工作，比如引入重置样式表、解决移动端点击300ms延迟等等。
-<!-- more -->
-## <meta\>修改
-
-根据项目需要看情况是否需要修改meta
-
-```html
-<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
-```
-
-
-
-## 重置样式表
-
-为了统一每个浏览器的样式，以及去掉一些浏览器默认样式，需要加载引入重置样式表，常用的有 [normalize.css](http://necolas.github.io/normalize.css/)。或使用如下reset.css（可根据项目需要作修改）。
-
-```css
-@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
-body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
-body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
-h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
-h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
-h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
-address,cite,dfn,em,i,optgroup,var{font-style:normal}
-table{border-collapse:collapse;border-spacing:0;text-align:left}
-caption,th{text-align:inherit}
-ul,ol,menu{list-style:none}
-fieldset,img{border:0}
-img,object,input,textarea,button,select{vertical-align:middle}
-article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
-audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
-blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
-textarea{overflow:auto;resize:vertical}
-input,textarea,button,select,a{outline:0 none;border: none;}
-button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
-mark{background-color:transparent}
-a,ins,s,u,del{text-decoration:none}
-sup,sub{vertical-align:baseline}
-html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
-body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
-hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
-a {color: #25a4bb;text-decoration: none;}
-```
-
-在main.js引入样式
-
-```js
-import './assets/styles/reset.css'
-```
-
-
-
-## 解决移动端点击300ms延迟
-
-通过npm安装 [fastclick](https://github.com/ftlabs/fastclick)
-
-```sh
-npm install fastclick -S
-```
-
-在main.js导入和使用
-
-```js
-import fastClick from 'fastclick'
-fastClick.attach(document.body)
-```
-

docs/01.前端/30.Vue文章/20.Vue CLi3 修改webpack配置.md

@@ -1,127 +0,0 @@
----
-title: Vue CLi3 修改webpack配置
-date: 2020-02-22 15:00:36
-permalink: /pages/5d463fbdb172d43b
-categories: 
-  - 前端
-  - Vue文章
-tags: 
-  - 
----
-# Vue CLi3 修改webpack配置
-
-## 审查项目的 webpack 配置
-
-因为 `@vue/cli-service` 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 `inspect`命令：
-<!-- more -->
-```sh
-vue inspect # 在终端打印 webpack配置信息
-```
-
-```sh
-vue inspect > output.js # 把webpack配置信息生成到output.js文件
-```
-
-注意，`output.js` 文件不是一个有效的 webpack 配置文件，仅用于审查。
-
-
-
-## 修改webpack配置
-
-以**修改路径别名**为例：
-
-1. 项目根目录创建文件 `vue.config.js`
-
-2. 参考如下代码修改路径别名：
-
-```js
-// vue.config.js
-const path = require('path')
-const resolve = dir => path.resolve(__dirname, dir)
-
-module.exports = {
-  chainWebpack: config => {
-    config.resolve.alias
-      .set('styles', resolve('src/assets/styles'))
-  }
-}
-```
-
-
-
-## 参考
-
-* [官方文档](https://cli.vuejs.org/zh/guide/webpack.html)
-* [官方 vue.config.js 参数说明](https://cli.vuejs.org/zh/config/#vue-config-js)
-* [vue.config.js 设置接口代理示例](https://github.com/ustbhuangyi/vue-music/blob/master/vue.config.js)
-
-* 配置示例：
-
-```js
-const path = require('path')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const ProxyAgent = require('proxy-agent')
-const resolve = dir => path.resolve(__dirname, dir)
-module.exports = {
-  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
-  runtimeCompiler: true,
-  assetsDir: 'static',
-  productionSourceMap: false, // 生产环境的 source map
-  parallel: require('os').cpus().length > 1,
-  configureWebpack: config => {
-    // 公共配置
-    // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
-    config.externals = {
-      'vue': 'Vue',
-      'vue-router': 'VueRouter',
-      'element-ui': 'ELEMENT',
-      'vuex': 'Vuex',
-      'axios': 'axios'
-    }
-    config.resolve.alias = Object.assign({}, config.resolve.alias, {
-      'src': resolve('src/common'),
-      'common': resolve('src/views/common'),
-      'static': resolve('static')
-    })
-    if (process.env.NODE_ENV === 'production') {
-      // 为生产环境修改配置...
-      config.optimization = {
-        minimizer: [
-          new UglifyJsPlugin({
-            uglifyOptions: {
-              compress: {
-                drop_console: true, // console
-                drop_debugger: false,
-                pure_funcs: ['console.log']// 移除console
-              }
-            }
-          })
-        ]
-      }
-    } else {
-      // 为开发环境修改配置...
-    }
-  },
-  css: {
-    loaderOptions: {
-      css: {
-        importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
-      }
-    }
-  },
-  devServer: {
-    port: 80,
-    disableHostCheck: true, // 可使用本地host配置的域名访问
-    proxy: {
-      '/api': {
-        agent: new ProxyAgent('http://132.128.11.12'),
-        target: 'http://132.128.11.12',
-        ws: false,
-        changeOrigin: true
-      }
-    }
-
-  }
-}
-```
-

docs/01.前端/30.Vue文章/30.Vue中的scoped和scoped穿透.md

@@ -1,91 +0,0 @@
----
-title: Vue中的scoped和scoped穿透
-date: 2020-02-23 10:54:23
-permalink: /pages/c80d2751cf1f4268
-categories: 
-  - 前端
-  - Vue文章
-tags: 
-  - 
----
-# Vue中的scoped和scoped穿透
-
-## 什么是scoped？
-
-在Vue文件中的style标签上有一个特殊的属性`scoped`。当一个style标签拥有`scoped`属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了`scoped`属性，相当于实现了样式的模块化。
-<!-- more -->
-```html
-<style lang="less" scoped>
-```
-
-## scoped的实现原理
-
-Vue中的`scoped`属性的效果主要是通过`PostCss`实现的。以下是转译前后的代码:
-
-转译前:
-
-```html
-<style lang="less" scoped>
-    .example{
-        color:red;
-    }
-</style>
-<template>
-    <div class="example">scoped测试案例</div>
-</template>
-```
-
-转译后:
-
-```html
-<style>
-    .example[data-v-5558831a] {
-      color: red;
-    }
-</style>
-<template>
-    <div class="example" data-v-5558831a>scoped测试案例</div>
-</template>
-```
-
-`PostCSS`给一个组件中的所有DOM添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的DOM,这种做法使得样式只作用于含有该属性的DOM元素(组件内部的DOM)。
-
-**总结：`scoped`的渲染规则**：
-
-1. 给HTML的DOM节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个DOM 元素
-2. 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
-
-## scoped穿透
-
-`scoped`看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除`scoped`属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
-
-**stylus的样式穿透 使用 `>>>`**
-
-```stylus
-外层 >>> 子组件元素
-  样式
-        
-.wrapper >>> .swiper-pagination-bullet-active
-  background: #fff
-```
-
-**sass和less的样式穿透 使用`/deep/`**
-
-```less
-外层 /deep/ 子组件元素 {
-    样式
-}
-.wrapper /deep/ .swiper-pagination-bullet-active{
-    background: #fff;
-}
-```
-
-## 在组件中修改第三方组件库样式的其它方法
-
-上面我们介绍了在使用`scoped` 属性时，通过`scoped`穿透的方式修改引入第三方组件库样式的方法，下面我们介绍其它方式来修改引入第三方组件库的样式：
-
-* 在vue组件中不使用`scoped`属性
-
-* 在vue组建中使用两个style标签，一个加上`scoped`属性，一个不加`scoped`属性，把需要覆盖的css样式写在不加`scoped`属性的style标签里
-
-* 建立一个reset.css(基础全局样式)文件，里面写覆盖的css样式，在入口文件main.js 中引入

docs/01.前端/30.Vue文章/40.Vue项目使用mock数据的几种方式.md

@@ -1,220 +0,0 @@
----
-title: Vue项目使用mock数据的几种方式
-date: 2020-02-26 14:06:58
-permalink: /pages/bd1af2f75fd361fc
-categories: 
-  - 前端
-  - Vue文章
-tags: 
-  - 
----
-# Vue项目使用mock数据的几种方式
-
-本文是基于vue/cli 3.0创建的项目进行讲解
-
-首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：
-
-1.  3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。
-<!-- more -->
-   > 放在`public`目录下的静态资源可直接通过(http://localhost:8080/+ 文件名称)来访问，不需要在前面加一个`/public`路径
-
-2.  3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建` vue.config.js` 进行配置。
-
-## 方式一：使用mockjs插件实现本地mock数据
-
-1. 安装`mockjs`插件
-
-   ```sh
-   npm i mockjs -D
-   ```
-
-2. 在src目录下创建一个`mock`文件夹，在`mock`文件夹下创建一个`index.js`和一个`data`文件夹（用于存放项目需要的模拟数据）
-
-   ```
-   .
-   ├── src
-   │   ├── mock
-   │   │   └── data
-   │   │   │   └──  test.json
-   │   │   └── index.js 
-   .   .   
-   ```
-
-3. `mock`目录下的`index.js`示例如下：
-
-   ```js
-   const Mock = require('mockjs')
-    
-   // 格式： Mock.mock( url, 'post'|'get' , 返回的数据)
-   Mock.mock('/api/test', 'get', require('./data/test.json'))
-   Mock.mock('/api/test2', 'post', require('./data/test2.json'))
-   ```
-
-4. 在`main.js`入口文件中引入mock数据，不需要时，则注释掉
-
-   ```js
-   require('./mock') // 引入mock数据，不需要时，则注释掉
-   ```
-
-5. 最后，在vue模板中使用即可
-
-   ```js
-   axios.get('/api/test')
-   .then(function(res){
-     console.log(res);
-   })
-   .catch(function(err){
-     console.log(err);
-   });
-   ```
-
-   
-
-## 方式二：在public文件夹放mock数据（无需使用mockjs插件）
-
-1. 在`public`文件夹下创建一个`mock`文件夹，用来存放模拟数据的json文件
-
-   ```
-   .
-   ├── public
-   │   ├── mock
-   │   │   └── test.json 
-   .   .   
-   ```
-
-   > 放在`public`目录下的静态资源可直接通过(http://localhost:8080/ + 文件名称)来访问，不需要在前面加一个`/public`路径。
-
-
-
-2. 在`vue.config.js`里进行路径配置，如下:
-
-   ```js
-   module.exports = {
-    devServer: {
-      proxy: {
-        '/api': { // 代理接口
-          target: 'http://localhost:8080',
-          ws: true, // proxy websockets
-          changeOrigin: true, // 是否开启跨域
-          pathRewrite: { // 路径重写
-            '^/api': '/mock'
-          }
-        }
-      }
-    }
-   }
-   ```
-
-   [devServer.proxy官方文档](https://cli.vuejs.org/zh/config/#devserver-proxy)
-
-3. 最后，在vue模板中使用即可
-
-   ```js
-   axios.get('/api/test.json') // 注意这里需要.json后缀
-   .then(function(res){
-     console.log(res);
-   })
-   .catch(function(err){
-     console.log(err);
-   });
-   ```
-
-> 这方式貌似不支持`post`请求，有待研究。
-
-
-
-## 方式三：前端本地启动一个nodejs服务，vue项目向nodejs服务请求mock数据
-
-1. 创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）
-
-   ```
-   .
-   ├── 项目根目录
-   │   └── serve.js
-   .   .  
-   ```
-
-2. `serve.js`示例
-
-   ```js
-   const http = require('http')
-   // url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
-   const urlLib = require('url')
-   
-   http.createServer(function (req, res) {
-     const urlObj = urlLib.parse(req.url, true) // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
-     const url = urlObj.pathname
-     const get = urlObj.query
-     console.log(url)
-     // 模拟的mock数据
-     const data = {
-       "code": 200,
-       "list": [
-           {
-               "id": '0001',
-               "name": "test"
-           },
-           {
-               "id": '0002',
-               "name": "test2"
-           }
-       ]
-     }
-   
-     // console.log(get.user)
-     if (url === '/test') { // 接口名
-       res.write(JSON.stringify(data))
-     }
-     res.end()
-   }).listen(9000)
-   ```
-
-3. 启动node服务
-
-   ```sh
-   node serve.js
-   ```
-
-4. 配置`vue.config.js`的`proxy`，解决跨域
-
-   ```js
-   module.exports = {
-    devServer: {
-      proxy: {
-        '/api': {
-          target: 'http://localhost:9000',
-          ws: true, // proxy websockets
-          changeOrigin: true, // 是否开启跨域
-          pathRewrite: { // 路径重写
-            '^/api': ''
-          }
-        }
-      }
-    }
-   }
-   ```
-
-5. 最后，在vue模板中使用即可
-
-   ```js
-   axios.get('/api/test')
-   .then(function(res){
-     console.log(res);
-   })
-   .catch(function(err){
-     console.log(err);
-   });
-   ```
-
-   
-
-## 总结
-
-方式二目前来看只支持get方式请求，对于post请求还有待研究。方式三虽然也是一种实现方式，但实现起来比较麻烦。个人建议使用方式一，灵活、方便。
-
-
-
-## 相关文章
-
-[《Vue CLi3 修改webpack配置》](https://xugaoyi.com/pages/5d463fbdb172d43b/)
-

docs/01.前端/40.学习笔记/00.《JavaScript教程》笔记.md

@@ -1,14 +1,17 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 《JavaScript教程》笔记
-    imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112120340.png
+  data:
+    path: 《JavaScript教程》笔记
+    imgUrl: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200112120340.png
     description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href='https://wangdoc.com/javascript/' target='_blank'>JavaScript教程</a>
 title: 《JavaScript教程》笔记
 date: 2020-01-12 11:51:53
-permalink: /note/javascript
+permalink: /note/javascript/
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/01.前端/40.学习笔记/05.《JavaScript高级程序设计》笔记.md

@@ -0,0 +1,697 @@
+---
+title: 《JavaScript高级程序设计》笔记
+date: 2020-06-12 12:39:01
+permalink: /note/js/
+categories: 
+  - 笔记
+tags: 
+  - 笔记
+  - 红宝书
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+# 《JavaScript高级程序设计》笔记
+
+## 第1章  JavaScript简介
+
+* JavaScript诞生于**1995**年
+
+* 一个完整的JavaScript由这三部分组成：
+  * **ECMAScript** (核心)
+  * **DOM** (文档对象模型)
+  * **BOM** (浏览器对象模型)
+* ECMAScript的 **宿主环境** 包含 ：
+  * 浏览器
+  * Node
+  * flash
+
+* ECMAScript大致规定了下列组成部分：
+  * 语法
+  * 类型
+  * 语句
+  * 关键字
+  * 保留字
+  * 操作符
+  * 对象
+
+## 第2章 在HTML中使用JavaScript
+
+* `<script>` 标签有下列常见属性：
+  * async 表示立即下载脚本，不妨碍页面的其他操作（异步下载）
+    * 无法保证每个js的顺序
+    * 用于互不依赖的js
+    * 主要目的是不让页面等js
+  * defer 延迟到文档完全解析和显示之后在执行
+    * 在`</html>`标签之后执行
+  * src 外部文件链接
+  * type 表示编写代码使用的脚本语言的内容类型
+    * `text/javascript`
+
+## 第3章 基本概念
+
+* 语法，借鉴了C语言
+
+  * **区分大小写**
+  * **标识符**，指的是**变量、函数、属性**的名字
+    * 第一个字符必须是 字母、下划线、或美元符号
+    * 其他字符可以是字母、下划线、美元符号或数字
+
+* 严格模式 
+
+  ```js
+  "use strict"
+  ```
+
+* 数据类型
+
+  * 基本数据类型
+    * Undefined、Null、Boolean、Number、String
+    * `typeof`操作符，一般用于基本类型的检测，返回相应类型的字符串
+      * “undefined”,"boolean","string","number","object","function"
+  * 复杂数据类型 
+    * Object
+
+* `Null`类型
+
+  * 表示**空对象指针**
+  * 只要意在保存对象的变量还没有真正保证对象，则保存`null`
+  * `undefined`派生自`null`，因此用`==`比较返回`true`
+
+* 浮点数，指的是数值中包含一个小数点，并且小数点后面至少有一位数字
+
+* NaN 
+
+  * 任何涉及NaN的操作都返回`NaN`
+  * `NaN`与任何值都不相等，包括`NaN`本身
+
+* 数值转换
+
+  * 有3个函数可以把非数值转换为数值
+    * Number() 可以用于任何数据类型
+    * parseInt() 专门用于字符串转数值，用于解析整数
+    * parseFloat() 专门用于字符串转数值，用于解析浮点数
+
+* 字符串
+
+  * 数值、布尔值、对象、字符串值本身 都有toString()方法，用于转为字符串
+  * undefined和null没有toString()方法，但可以使用String()方法
+
+* Object类型
+
+  * 对象其实就是一组数据与功能的集合
+
+  * 使用Object()构造函数创建对象
+
+    ```js
+    var obj = new Object(); // 同 obj = {}
+    ```
+
+  * 每个对象实例都有下列属性和方法
+
+    * `constructor` 指向用于创建当前对象的构造函数 。（对于上面例子而言，就是`Object()`）
+    * `hasOwnProperty(propertyName)` 用于检查给定属性是否在当前对象实例中
+    * `isPrototypeOf(Object)` 用于检查传入的对象是否是当前对象的原型
+    * `propertyIsEnumerable(propertyName)` 用于检查给定的属性是否能够使用`for-in`来枚举
+    * `toLocaleString()` 返回对象的字符串表示，该字符串与执行环境的地区对应
+    * `toString()` 返回对象的字符串表示
+    * `valueOf()` 返回对象的字符串、数值、布尔值表示。通常与`toString()`返回值相同
+
+    **所有对象都有以上属性和方法**
+
+* **操作符**
+  * 一元操作符
+    * ++
+    * --
+    * 前置与后置的区别是与其他数运算时，前置会先执行递增（减）再与其他数运算，后置会先与其他数运算再对自身执行递增(减)
+  * 布尔操作符
+    * 与 (&&)
+      * 短路操作，即如果第一个操作数能决定结果，就不会对第二个操作数求值
+    * 或 (||)
+      * 短路操作，即如果第一个操作数能决定结果，就不会对第二个操作数求值
+    * 非 (!)
+      * 先使用Boolean()转成布尔值再取反
+
+* **语句**（也称流控制语句）
+
+  * if-else
+
+  * do-while
+
+    * 后测试循环语句，在对表达式求值之前，循环体内的代码至少会被执行一次
+
+      ```js
+      var i = 0
+      do {
+          i += 2
+      } while (i < 10)  // 只要i小于10就会一直循环
+      ```
+
+  * while
+
+    * 前测试语句
+
+      ```js
+      var i = 0
+      while (i < 10) {
+          i += 2
+      } // 只要i小于10就会一直循环
+      ```
+
+  * for 
+
+    * 使用while循环做不到的，使用for循环同样做不到。就是说，for循环只是把与循环有关的代码集合在一个位置
+
+      ```js
+      for(初始化;条件;循环后执行){
+          // ...
+      }
+      ```
+
+    * break 立即退出循环
+    * continue 退出当前单次循环
+
+  * 
+
+  * for- in 用来枚举对象的属性
+
+* 函数
+  * 任何函数都可以在任何时候返回任何值
+  * 未指定返回值的函数会返回一个undefined
+  * 通过arguments访问参数，它是一个类数组
+
+
+
+## 第4章 变量、作用域和内存问题
+
+* 变量包含两种类型的值：
+  * 基本类型值，指的是简单的数据段
+  * 引用类型值，指的是那些可能由多个值构成的**对象**
+
+* 复制变量值
+  * 复制基本类型的变量值只是复制了该值的副本
+  * 复制引用类型的变量值时，同样也会将存储在变量对象的值复制一份放到新变量的空间中，不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。两个变量指向同一个对象。
+
+* 传递参数
+  * 所有函数的参数都是按值传递的
+* 检测类型
+  * `typeof` 检测基础类型
+  * `instanceof`检测引用类型
+    * 变量 instanceof 构造函数（例：obj instanceof Object）
+    * 所有引用类型的值都是Object的实例
+
+* 执行环境
+  * 在浏览器中，全局执行环境是`window`对象
+  * 每个函数都有自己的**执行环境**
+* 作用域链
+  * 当代码在一个环境中执行时，会创建变量对象的一个**作用域链**
+  * 作用域链的前端，始终是当前执行的代码所在环境的变量对象。
+  * 作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含对象。这样一直延续到全局执行环境。
+  * 全局执行环境的变量对象始终都是作用域链中的最后一个对象。
+* 垃圾收集
+  * JavaScript具有自动垃圾收集机制
+    * 对于不再使用的变量打上标记，被打上标记的变量将在执行回收时被清除，释放内存空间。
+
+## 第5章 引用类型
+
+* 引用类型的值是引用类型的一个实例
+* 引用类型就是一种数据结构，描述了一类对象所具有的属性和方法
+
+* 创建Object实例的方式有两种：
+
+  * ```js
+    var obj = new Object()
+    ```
+
+  * ```js
+    var obj = {} // 与 new Object() 相同，但实际不会调用Object构造函数
+    ```
+
+* 访问对象的属性有两种：
+
+  * 点表示法 和 方括号表示法
+
+### Array类型
+
+  * length属性不是只读的
+
+  * 检测数组
+
+    * ```js
+      value instanceof Array
+      ```
+
+    * ```js
+      Array.isArray(value)
+      ```
+
+  * 转换方法
+
+    * toLocaleString() 与toString()相同
+    * toString() 返回数组中每个值的字符串形式用逗号分隔拼接而成的字符串
+    * valueOf() 返回数组本身
+    
+
+#### join() 转换方法 (不改原数组)
+
+接收一个参数，用作分隔符的字符串，然后返回包含所有数组项的字符串。
+
+```js
+var arr = ['red','blue','green']
+var arrStr = arr.join('|') // "red|blue|green"
+
+arr.join() // "red,blue,green"
+arr.join('') // "redbluegreen"
+```
+
+
+
+#### 栈方法，后进先出 push() 、pop()      (改变原数组)
+
+* push() 向数组末尾添加成员，返回总长
+* pop() 移除数组末尾一个成员，返回该成员
+
+#### 队列方法，先进先出  push()、shift()   、unshift() (改变原数组)
+
+* shift() 移除数组首个成员，返回该成员
+
+* unshift() 在数组前面添加成员，返回总长
+
+push()和shift() 形成队列方法
+
+unshift和pop() 形成反方向队列方法
+
+#### 重排序方法 reverse() 反转  sort() 排序   （改变原数组）
+
+* reverse() 反转数组项的顺序
+* sort() 接收一个函数作为参数，函数接收两个参数。
+  * 自定义排序：函数内，如果第一个参数应该位于第二个之前，则手动返回一个负数，如果两个参数相等，手动返回0，如果第一个参数应该位于第二个参数之后，则手动返回一个正数。
+
+```js
+// 升序
+arr.sort(function(a,b){
+    if(a < b) {
+        return -1
+    } else if (a > b) {
+        return 1
+    } else {
+        retunr 0
+    }
+})
+```
+
+简写：
+
+```js
+arr.sort((a,b) => {
+    return a-b // 升序， b-a 降序
+})
+```
+
+
+
+#### 操作方法 concat() 拼接，slice() 切片，splice() 移接
+
+* concat() 拼接数组 （**不改原数组**）
+
+  ```js
+  var arr1 = ['a','b']
+  var arr2 = arr1.concat('c','d') // ['a','b','c','d']
+  ```
+
+* slice() 切片（**不改原数组**）
+
+  * slice(起始位置 [, 结束位置])  返回起始位置到结束位置的成员，不包含结束位置。
+
+  ```js
+  var arr1 = [1,2,3,4,5]
+  var arr2 = arr1.slice(1,3) // [2,3]
+  var arr3 = arr1.slice(2) // [3,4,5]
+  ```
+
+* splice() 移接 （**改变原数组**）
+
+  * splice(起始位置, 要删除的个数，要插入的项)
+    * 要插入的项 可以有0个或多个
+  * splice() 始终返回一个数组，该数组成员中包含原始数组中被删除的项，如果没有则返回空数组。
+  * 数组最强大的方法，可用于删除、插入、替换操作
+
+  ```js
+  arr = [1,2,3,4]
+  arr.splice(1,1) // [2]
+  arr // [1,3,4]
+  
+  
+  arr = [1,2,3,4]
+  arr.splice(2,0,'a') // []
+  arr // [1,2,'a',3,4]
+  
+  arr = [1,2,3,4]
+  arr.splice(3,1,'a') // [4]
+  arr // [1,2,3,'a']
+  ```
+
+#### 位置方法 indexOf()、lastIndexOf()  
+
+* 查找项的位置，没有则返回-1
+* indexOf() 从前面开始找，lastIndexOf() 从后面开始找
+
+#### 迭代方法 every()、some() 、filter()、map() 、forEach()  （都不会改变原数组）
+
+* 5个迭代方法，每个方法都接收两个参数： 
+  * 在每项上运行的函数
+  * 运行函数的作用域对象
+* 函数接收三个参数：
+  * 数组项的值
+  * 该项的索引
+  * 数组本身
+
+
+
+* every()  如果函数对每项都返回true，则返回true
+
+  * 例：判断数组每一项是否都大于2
+
+    ```js
+    var numbers = [1,2,3,2,1]
+    var result = numbers.every((item,index,array) => {
+        return item > 2
+    })
+    result // false
+    ```
+
+* some() 如果函数对任一项返回true，则返回true
+
+  * 例：判断数组是否包含大于2的值
+
+    ```js
+    var numbers = [1,2,3,2,1]
+    var result = numbers.some((item,index,array) => {
+        return item > 2
+    })
+    result // true
+    ```
+
+* filter() 返回函数会返回true的项组成的数组
+
+  * 例：过滤掉数组中小于等于2的数
+
+    ```js
+    var numbers = [1,2,3,4,5]
+    var result = numbers.filter((item,index,array) => {
+        return item >2
+    })
+    result // [3,4,5]
+    ```
+
+* map() 返回每次函数调用的结果组成的数组
+
+  * 例：给数组每一项乘以2
+
+    ```js
+    var numbers = [1,2,3,4,5]
+    var result = numbers.map((item,index,array) => {
+        return item * 2
+    })
+    result // [2,4,6,8,10]
+    ```
+
+    
+
+* forEach() 循环数组每一项，没有返回值
+
+  * 例：循环每一项
+
+    ```js
+    var numbers = [1,2,3,4,5]
+    numbers.forEach((item,index,array) => {
+        // 做一些操作
+    })
+    ```
+
+    
+
+#### 归并方法 reduce()  reduceRight()
+
+* reduce() 归并为
+
+* reduceRight() 从右边归并
+
+* 这两个方法都会迭代数组所有项，然后构建一个最终结果并返回
+
+* 方法接收两个参数： 每一项上调用的函数，归并基础的初始值
+
+* 函数接收4个参数：前一个的值、当前值、当前值的索引、数组对象
+
+* 例：求数组每一项之和
+
+  ```js
+  var numbers = [1,2,3,4,5]
+  var result = number.reduce((prev,cur,index,arr) => {
+      return prev + cur
+  })
+  result // 15
+  ```
+
+* reduce()方法，第一次执行函数时，prev是数组的第一项，cur是数组的第二项
+
+
+
+
+
+
+
+## 第6章 面向对象的程序设计
+
+### 6.1 理解对象
+
+* 对象的定义：无序属性的集合，其属性可以包含基本值、对象或者函数。
+  * 一组键值对，其中值可以是数据或函数
+
+
+
+#### 6.1.1 对象的属性
+
+​	包含两种：**数据属性** 和 **访问器属性**
+
+##### 1.数据属性
+
+* configurable 可配置性（限制 delete删除属性和`Object.defineProperty()`方法是否起效。），默认true
+* enumerable 可列举性，默认true
+* writable 可写性，默认true
+* value 值，默认undefined
+
+使用`Object.defineProperty()`方法修改这些默认属性。接收三个值：**属性所在的对象、属性名、描述符对象**。
+
+```js
+var person = {}
+Object.defineProperty(person,'name',{
+    writable: false,
+    value: 'xu'
+})
+
+console.log(person.name) // xu
+person.name = 'gao' // 修改无效
+console.log(person.name) // xu
+```
+
+使用此方法定义属性如未指定`configurable`、`enumerable`、`writable` 将默认`false`。
+
+##### 2.访问器属性
+
+包含两个函数：getter函数和setter函数（这两个函数都是非必需）。读取时调用getter，访问时调用setter。
+
+使用`Object.defineProperty()`方法定义访问器属性。
+
+```js
+var book = {
+    _year: 2020,
+    edition: 1
+};
+
+Object.defineProperty(book, 'year', {
+    get: function() {
+        return this._year
+    },
+    set: function(newValue){
+        if(newValue > 2020) {
+            this._year = newValue
+            this.edition += newValue - 2020
+        }
+    }
+})
+
+book.year = 2021
+console.log(book.edition) // 2
+```
+
+当getter函数和setter函数只指定其中一个时，另外一个将不能用。
+
+#### 6.1.2 定义多个属性
+
+`Object.defineProperties()`方法定义多个属性。接收两个参数: 要添加或修改属性的对象 、第二个参数是一个对象，其属性与第一个参数中的属性一一对应。
+
+```js
+var book = {}
+Object.defineProperties(book, {
+    _year: { // 数据属性
+        writable: true,
+        value: 2004
+    },
+    edition: { // 数据属性
+        writable: true,
+        value: 1
+    },
+    year: { // 访问器属性
+        get: function() {
+            return this._year
+        },
+        set: function(newValue){
+            if(newValue > 2004){
+                this._year = newValue
+                this.edition += newValue - 2004
+            }
+        }
+    }
+})
+
+// 定义了三个属性，每个属性有不同的描述符
+```
+
+
+
+#### 6.1.3 读取属性的特性（描述符对象）
+
+`Object.getOwnPropertyDescriptor()`方法获取描述符，接收两个参数： 属性所在的对象、属性名
+
+```js
+var book = {}
+Object.defineProperties(book, {
+    _year: { // 数据属性
+        writable: true,
+        value: 2004
+    },
+    edition: { // 数据属性
+        writable: true,
+        value: 1
+    },
+    year: { // 访问器属性
+        get: function() {
+            return this._year
+        },
+        set: function(newValue){
+            if(newValue > 2004){
+                this._year = newValue
+                this.edition += newValue - 2004
+            }
+        }
+    }
+})
+
+var descriptor = Object.getOwnPropertyDescriptor(book, "_year")
+console.log(descriptor) // {value: 2020, writable: true, enumerable: false, configurable: false}
+var descriptor = Object.getOwnPropertyDescriptor(book, "year")
+console.log(descriptor) // {enumerable: false, configurable: false, get: ƒ, set: ƒ}
+
+```
+
+### 6.2 创建对象
+
+使用Object构造函数或对象字面量方式创建对象。缺点：使用同一个接口创建很多对象时，会产生大量重复代码。解决方案：使用工厂模式的一种变体。
+
+#### 6.2.1 工厂模式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 第7章 函数表达式
+
+
+
+## 第8章 BOM
+
+
+
+## 第9章 客户端检测
+
+
+
+## 第10章 DOM
+
+
+
+## 第11章 DOM扩展
+
+
+
+## 第12章 DOM2和DOM3
+
+
+
+## 第13章 事件
+
+
+
+## 第14章 表单脚本
+
+
+
+## 第15章 使用Canvas绘图
+
+
+
+## 第16章 HTML5脚本编程
+
+
+
+## 第17章 错误处理与调试
+
+
+
+## 第18章 JavaScript与XML
+
+
+
+## 第19章 E4X
+
+
+
+## 第20章 JSON
+
+
+
+## 第21章 Ajax与Comet
+
+
+
+## 第22章 高级技巧
+
+
+
+## 第23章 离线应用与客户端存储
+
+
+
+## 第24章 最佳实践
+
+
+
+## 第25章 新兴的API
+

docs/01.前端/40.学习笔记/10.《ES6 教程》笔记.md

@@ -1,14 +1,17 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 《ES6 教程》笔记
-    imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200112160453.png
+  data:
+    path: 《ES6 教程》笔记
+    imgUrl: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200112160453.png
     description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href='https://es6.ruanyifeng.com/' target='_blank'>ES6教程</a>
 title: 《ES6 教程》笔记
 date: 2020-01-12 15:49:22
-permalink: /note/es6
+permalink: /note/es6/
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/01.前端/40.学习笔记/20.《Vue》笔记.md

@@ -1,14 +1,17 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 《Vue》笔记
-    imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200204143633.png
-    description: 本章内容是博主的Vue学习笔记，以官方文档为准。
+  data:
+    path: 《Vue》笔记
+    imgUrl: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200204143633.png
+    description: 本章内容是博主的Vue学习笔记，非教程文档，请以官方文档为准。
 title: 《Vue》笔记
 date: 2020-02-04 12:16:12
-permalink: /note/vue
+permalink: /note/vue/
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/01.前端/40.学习笔记/25.《React》笔记.md

@@ -0,0 +1,17 @@
+---
+pageComponent:
+  name: Catalogue
+  data:
+    path: 《React》笔记
+    imgUrl: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
+    description: 本章内容是博主的React学习笔记，非教程文档，请以官方文档为准。
+title: 《React》笔记
+date: 2021-03-25 19:50:12
+permalink: /note/react/
+article: false
+comment: false
+editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---

docs/01.前端/40.学习笔记/30.《TypeScript 从零实现 axios》.md

@@ -1,14 +1,17 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
-    key: 《TypeScript 从零实现 axios》
-    imgUrl: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200105104632.png
+  data:
+    path: 《TypeScript 从零实现 axios》
+    imgUrl: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200105104632.png
     description: 学习使用 TypeScript 从零实现 axios 库
 title: 《TypeScript 从零实现 axios》
 date: 2020-01-05 10:40:48
-permalink: /note/typescript-axios
+permalink: /note/typescript-axios/
 article: false
 comment: false
 editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---

docs/01.前端/40.学习笔记/33.《Git》学习笔记.md

@@ -0,0 +1,17 @@
+---
+pageComponent:
+  name: Catalogue
+  data:
+    path: 《Git》学习笔记
+    imgUrl: https://avatars3.githubusercontent.com/u/18133?s=200&v=4
+    description: <a href='https://git-scm.com/book/zh/v2' target='_blank'>Git官网文档</a>的学习笔记，以官方文档为准。
+title: 《Git》学习笔记
+date: 2020-11-18 17:40:48
+permalink: /note/git/
+article: false
+comment: false
+editLink: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---

docs/01.前端/40.学习笔记/40.小程序笔记.md

@@ -1,12 +1,15 @@
 ---
 title: 小程序笔记
 date: 2019-12-25 14:27:01
-permalink: /note/wx-miniprogram
-tags: 
-  - null
-categories: 
+permalink: /note/wx-miniprogram/
+tags:
+  - 小程序
+categories:
   - 前端
   - 学习笔记
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
 # 小程序笔记
@@ -273,7 +276,7 @@ weUI是一套同微信原生视觉体验一致的基础样式库
 
 #### 数据类型
 
-String 字符串 
+String 字符串
 
 Number 数字
 
@@ -331,7 +334,7 @@ const testDB = wx.cloud.database({
 
 
 
-#### serverless（无服务） 
+#### serverless（无服务）
 
 概念：函数即服务，当需要后端服务的时候，不需要关心后端的IP地址、域名，只需要像调用普通函数一样既可以实现调用。
 
@@ -541,7 +544,7 @@ pages  设置页面 ，设置后会自动在pages目录下生成相应的目录
       type: Object // 数据类型
     }
    },
-       
+
  //子组件的wxml文件可直接引入数据{{playlist}}
 ```
 
@@ -559,7 +562,7 @@ key的值不建议使用index，因为当数据发生变化会dom结构产生变
       <image src="{{item.url}}" mode="widthFix" class="img"></image>
     </view>
 </block>
- 
+
 <view class="playlist-container">
   <block wx:for="{{playlist}}" wx:key="_id">
     <!-- 参数：playlist 自定义名称，传入组件的数据 -->
@@ -592,7 +595,7 @@ cloudfunctions目录 右键 `新建 Node.js 云函数`  > 输入目录名 `getPl
 
 在云函数中向第三方服务器发送请求要依赖第三方库
 
-**安装依赖包** 
+**安装依赖包**
 
 云函数目录  `getPlaylist` 右键 `在终端打开` 打开命令行  输入命令：
 
@@ -660,7 +663,7 @@ exports.main = async (event, context) => {
    */
 
   // const list = await playlistCollection.get() // 获取数据库集合的数据 （因为有条数限制，不直接用此方法）
-  
+
   // 突破条数限制 （为了读取到全部数据然后与第三方服务器获取的数据进行对比去重）
   const countResult = await playlistCollection.count() // 获取数据总条数 返回为对象
   const total = countResult.total // 取得总条数
@@ -680,7 +683,7 @@ exports.main = async (event, context) => {
       }
     })
   }
- 
+
   // 获取第三方服务器端数据
   const playlist = await rp(URL).then((res) => {
     return JSON.parse(res).result
@@ -744,9 +747,9 @@ exports.main = async (event, context) => {
     .orderBy('createTime', 'desc').get().then((res) => {
       return res.data
     })
-    
+
   })
-  
+
 
   return app.serve() // 必需返回
 }
@@ -821,9 +824,9 @@ page页面js中有这两个函数：
   onReachBottom: function() {
     this._getPlaylist()
   },
- 
- 
- 
+
+
+
  下拉刷新请求完数据后
  wx.stopPullDownRefresh() // 停止下拉刷新动画
 ```
@@ -871,7 +874,7 @@ const TcbRouter = require('router'); // 必需
 
 exports.main = (event, context) => {
     const app = new TcbRouter({ event });// 必需
-  
+
     // app.use 表示该中间件会适用于所有的路由(全局中间件) 非必需
     app.use(async (ctx, next) => { // 这个中间件表示所有路由都会调用到，而路由中间件为单独调用
         ctx.data = {}; // 获取要传给小程序端的数据
@@ -978,7 +981,7 @@ wx.setNavigationBarTitle({
 
 
 ```json
-// 需要在app.json配置，才能使用后台音乐播放的能力 
+// 需要在app.json配置，才能使用后台音乐播放的能力
 
 "requiredBackgroundModes": ["audio", "location"]
 ```
@@ -1125,7 +1128,7 @@ methods: {
 子组件1js：
 // 触发自定义事件 向父组件传值， 参数x（可选，传递给父组件的参数，可以是对象或其他）
 this.triggerEvent('自定义事件名1', 参数x)
-	
+
 
 
 子组件2js：
@@ -1174,7 +1177,7 @@ wx.getSystemInfo({
 onLaunch: function () {
 	this.globalData = {// 设置全局属性、方法
 		test: 0
-	} 
+	}
 },
 setGlobalData(dataItem, val) { // 设置全局属性
 	this.globalData[dataItem] = val
@@ -1236,11 +1239,11 @@ components内部的组件无法直接调用外部的样式。可通过以下方
     'iconfont', // 对应的是上面等号前面的名称
     'icon-sousuo'
   ],
-  
+
  子组件wxml： 即可实现调用组件外的样式
  <i class="iconfont icon-sousuo" />
-  
-  
+
+
   注意：如果想在组件内部再次修改样式，不能够引用外部传进来的class名称进行修改，可以另起一个class名称进行修改。
 ```
 
@@ -1273,7 +1276,7 @@ Component({
       <view>插槽内容</view>
     </view>
 </组件标签>
-  
+
  组件内部定义slot标签:
  <view>
     <!-- slot插槽 -->
@@ -1286,7 +1289,7 @@ Component({
 **如果需要实现多个插槽**
 
 ```
-  
+
 父组件调用传入插槽内容:
 <组件标签>
     <view slot="slot2">
@@ -1304,8 +1307,8 @@ Component({
 options: {// 设置
     multipleSlots: true // 打开多个插槽功能
 },
-  
-  
+
+
 组件内部定义slot标签:
 <view>
     <!-- slot插槽 具名插槽-->
@@ -1334,7 +1337,7 @@ options: {// 设置
            }
          })
         } else { // 未授权
-        
+
         }
       }
     })
@@ -1441,8 +1444,8 @@ wx.chooseImage({
         <icon class="iconfont icon-shanchu" bindtap="onDelImage" data-index="{{index}}"></icon>
       </view>
     </block>
-    
-    
+
+
     // 删除图片
   onDelImage(event) {
   	// event.target.dataset.index 获取标签属性data-index的值
@@ -1496,7 +1499,7 @@ wx.chooseImage({
     })
     /**
      * 实现思路及步骤：
-     * 1、图片 -> 上传 云存储  -> 生成 图片fineID（云文件ID） 
+     * 1、图片 -> 上传 云存储  -> 生成 图片fineID（云文件ID）
      * 2、数据 -> 录入 云数据库
      *    数据包括：文字内容、图片fineID、昵称、头像、发布时间、openId(用户唯一标识，在插入数据库是系统会自动添加_openId字段，不需要另外插入)
      */
@@ -1525,7 +1528,7 @@ wx.chooseImage({
       })
       promiseArr.push(p)
     })
-    
+
     // 存入云数据库
     Promise.all(promiseArr).then((res) => {
       db.collection('blog').add({
@@ -1607,7 +1610,7 @@ formatTime(new Date('Wed Aug 28 2019 16:23:06 GMT+0800 (中国标准时间)'))
 
 #### 阻止事件冒泡
 
-`bind` 和 `catch` 都可以绑定事件，它们的区别是 `bind` 有事件冒泡，而 `catch` 没有 
+`bind` 和 `catch` 都可以绑定事件，它们的区别是 `bind` 有事件冒泡，而 `catch` 没有
 
 
 
@@ -1663,7 +1666,7 @@ formatTime(new Date('Wed Aug 28 2019 16:23:06 GMT+0800 (中国标准时间)'))
     .orderBy('createTime', 'desc').get().then((res) => {
       return res.data
     })
-    
+
   })
 ```
 
@@ -1777,7 +1780,7 @@ formatTime(new Date('Wed Aug 28 2019 16:23:06 GMT+0800 (中国标准时间)'))
 
 ##### 第三种：N的数量巨大  几百成千上万个
 
-**每个 N 都存储 1 的 id** 
+**每个 N 都存储 1 的 id**
 
 如新浪博客中的一条博客下面有几千条评论
 
@@ -1872,7 +1875,7 @@ exports.main = async (event, context) => {
     page: `/pages/blog-comment/blog-comment?blogId=${event.blogId}`, // 用户点击推送消息打开的页面
     data: { // 模板的内容，keyword为在公众平台设置模板时对应的字段
       keyword1: { // 评价内容
-        value: event.context 
+        value: event.context
       },
       keyword2: { // 评价时间
         value: event.time
@@ -2018,7 +2021,7 @@ wx.getUserInfo({
     })
 ```
 
-在未授权的情况下需要用户先授权： 
+在未授权的情况下需要用户先授权：
 
 ```js
 // 判断用户是否授权
@@ -2042,12 +2045,12 @@ wx.getUserInfo({
           }
         }
       })
-      
-      
+
+
   授权按钮
  <button class="login" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取微信授权信息</button>
-    
-    
+
+
     onGetUserInfo(event) { // 获取用户信息
       const userInfo = event.detail.userInfo
       if (userInfo) { // 用户允许授权
@@ -2059,7 +2062,7 @@ wx.getUserInfo({
         this.triggerEvent('loginFail')
       }
     }
-  
+
 ```
 
 >  注意：上面这种方式没有获取到openId
@@ -2290,7 +2293,7 @@ onLoad: function (options) {
   }
   ```
 
-  
+
 
 ```js
 // 云函数入口函数
@@ -2307,7 +2310,7 @@ exports.main = async (event, context) => {
     // },
     // isHyaline: true // 是否透明
   })
-  
+
   // result为二进制数据, 先上传到云存储
 
   // 上传云存储
@@ -2469,7 +2472,7 @@ checkUpate(){
 
 vue-admin-template  <---通过ajax--> 基于Koa2；HTTP API 或 tcb-admin-node    ---->云函数、云数据库、云存储
 
-​											
+​
 
 
 
@@ -2524,7 +2527,7 @@ app.use(async (ctx) => {
 const port = 3000
 app.listen(port, () => { // 端口号，开启服务后的回调函数
   console.log(chalk.green(`> 服务已开启，访问：http://localhost:${port}`))
-}) 
+})
 ```
 
 
@@ -2713,9 +2716,9 @@ app.use(koaBody({
 
 ```js
 router.post('/updatePlaylist', async (ctx, next) => {
-    
+
   const params = ctx.request.body // post请求获取前端传来的数据，需安装和配置koa-body
-  
+
 })
 ```
 
@@ -2733,7 +2736,7 @@ router.get('/list', async (ctx, next) => {
   const query = `db.collection('swiper').get()`
   const res = await callCloudDB(ctx, 'databasequery', query)
   console.log(res)
-  
+
 })
 ```
 
@@ -2746,14 +2749,3 @@ router.get('/list', async (ctx, next) => {
 #### 后端上传图片到云存储
 
 [文件上传](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html)
-
-
-
-
-
-
-
-
-
-
-

docs/01.前端/40.学习笔记/50.JS设计模式总结笔记.md

@@ -0,0 +1,137 @@
+---
+title: JS设计模式总结笔记
+date: 2021-02-27 20:01:18
+permalink: /pages/4643cd/
+categories:
+  - 前端
+  - 学习笔记
+tags:
+  - 设计模式
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+# JS设计模式总结笔记
+
+
+
+## 开篇：前端工程师的成长论
+
+能够决定一个前端工程师的本质的，不是那些瞬息万变的技术点，而是那些**不变的东西**。
+
+所谓“不变的东西”，就是**驾驭技术的能力**。
+
+具体来说，它分为以下三个层次：
+
+- 能用健壮的代码去解决具体的问题；
+- 能用抽象的思维去应对复杂的系统；
+- 能用工程化的思想去规划更大规模的业务。
+
+> 基础理论知识是一个人的基线，理论越强基线越高。再为自己定一个目标和向上攀附的阶梯，那么达到目标就是时间问题，而很多野路子工程师搞了半辈子也未达到优秀工程师的基线，**很多他们绞尽脑汁得出的高深学问，不过是正规工程师看起来很自然的东西**。—— 吴军
+
+
+
+## 设计模式之“道”
+
+- 设计模式是“拿来主义”。如使用数学公式，不会从头推导一个公式。
+
+###  核心思想
+
+- 设计模式的核心思想——**封装变化**
+- 保证可维护性、可扩展性。
+- 将变与不变分离，确保变化的部分灵活，不变的部分稳定。——这就是所谓的“健壮”的代码。
+
+## 设计模式之“术”
+
+即最经典的**23种设计模式**。按`创建型`、`结构型`、`行为型`划分。
+
+### 创建型
+
+1. 单例模式
+2. 原型模式
+3. 构造器模式
+4. 工厂模式
+5. 抽象工厂模式
+
+### 结构型
+
+1. 桥接模式
+2. 外观模式
+3. 组合模式
+4. 装饰器模式
+5. 适配器模式
+6. 代理模式
+7. 享元模式
+
+### 行为型
+
+1. 迭代器模式
+2. 解释器模式
+3. 观察者模式
+4. 访问者模式
+5. 状态模式
+6. 备忘录模式
+7. 策略模式
+8. 模板方法模式
+9. 职责链模式
+10. 命令模式
+
+## 小结：
+
+- 创建型模型封装了创建对象过程中的变化。
+
+- 结构型模式封装了对象之间组合方式的变化。目的在于灵活的表达对象间的配合与依赖关系。
+
+- 行为型模式将对象千变万化的行为进行抽离，确保安全、方便的更改。
+
+
+
+## 创建型：工厂模式-简单工厂——区分“变与不变”
+
+先了解构造器模式，在JS中的构造函数即构造器。使用构造函数，即使用构造器模式。
+
+### 构造器模式
+
+```js
+function User(name, age, career){
+  this.name = name
+  this.age = age
+  this.career = career
+}
+const user = New User('张三', 18, '前端工程师')
+```
+
+变与不变：user的属性(name, age, car)不变，即共性。变的是属性值，即个性。
+
+### 简单工厂模式
+
+```js
+function User(name , age, career, work) {
+    this.name = name
+    this.age = age
+    this.career = career
+    this.work = work
+}
+
+// 工厂函数 （将变的部分抽离出一个函数）
+function Factory(name, age, career) {
+    let work
+    switch(career) {
+        case 'coder':
+            work =  ['写代码','写系分', '修Bug']
+            break
+        case 'product manager':
+            work = ['订会议室', '写PRD', '催更']
+            break
+        case 'boss':
+            work = ['喝茶', '看报', '见客户']
+
+        // 其它工种的职责分配
+        //case 'xxx':
+            //...
+
+    return new User(name, age, career, work)
+}
+```
+
+工厂模式就是将创建对象的过程单独封装。

docs/02.页面/10.HTML/10.常用meta整理.md

@@ -2,11 +2,14 @@
 title: 常用meta整理
 date: 2020-02-21 12:20:10
 permalink: /pages/8309a5b876fc95e3
-categories: 
+categories:
   - 页面
   - HTML
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 常用meta整理
 
@@ -54,9 +57,9 @@ meta标签提供关于HTML文档的元数据。元数据不会显示在页面上
 - **浏览器内核控制**：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。[参考文档](http://se.360.cn/v6/help/meta.html)
 
 ```html
-默认用极速核(Chrome)：<meta name="renderer" content="webkit"> 
-默认用ie兼容内核（IE6/7）：<meta name="renderer" content="ie-comp"> 
-默认用ie标准内核（IE9/IE10/IE11/取决于用户的IE）：<meta name="renderer" content="ie-stand"> 
+默认用极速核(Chrome)：<meta name="renderer" content="webkit">
+默认用ie兼容内核（IE6/7）：<meta name="renderer" content="ie-comp">
+默认用ie标准内核（IE9/IE10/IE11/取决于用户的IE）：<meta name="renderer" content="ie-stand">
 ```
 
 国内双核浏览器默认内核模式如下：
@@ -173,7 +176,7 @@ url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一
 <meta name="theme-color" content="#11a8cd">
 ```
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200221134927.jpg)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200221134927.jpg)
 
 - **隐藏状态栏/设置状态栏颜色**：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
 
@@ -205,7 +208,7 @@ url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一
 <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
 ```
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200221134638.png)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200221134638.png)
 
 - **其他** [参考文档](http://fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c)
 
@@ -239,4 +242,3 @@ url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
 ```
-

docs/02.页面/20.CSS/00.CSS教程和技巧收藏.md

@@ -0,0 +1,32 @@
+---
+title: CSS教程和技巧收藏
+date: 2020-08-11 17:13:52
+permalink: /pages/c8f128/
+categories: 
+  - 页面
+  - CSS
+tags: 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+## Flex 布局教程：语法篇
+<http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html>
+
+## CSS Grid 网格布局教程
+<http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html>
+
+## 只要一行代码，实现五种 CSS 经典布局
+<http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html>
+* 空间居中布局
+  > 不管容器的大小，项目总是占据中心点
+* 并列式布局
+  > 多个项目并列，如果宽度不够，放不下的项目就自动折行
+* 两栏式布局
+  > 一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄
+* 三明治布局
+  > 页面在垂直方向上，分成三部分：页眉、内容区、页脚。
+* 圣杯布局
+  > 最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

docs/02.页面/20.CSS/01.flex布局语法.md

@@ -8,7 +8,7 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
 ---
 # flex布局语法
 

docs/02.页面/20.CSS/02.flex布局案例-基础.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # flex布局案例-基础
 

docs/02.页面/20.CSS/03.flex布局案例-骰子.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # flex布局案例-骰子
 

docs/02.页面/20.CSS/04.flex布局案例-圣杯布局.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # flex布局案例-圣杯布局
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

docs/02.页面/20.CSS/05.flex布局案例-网格布局.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # flex布局案例-网格布局
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

docs/02.页面/20.CSS/06.flex布局案例-输入框布局.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # flex布局案例-输入框布局
 

docs/02.页面/20.CSS/07.CSS3之transition过渡.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # CSS3之transition过渡
 

docs/02.页面/20.CSS/08.CSS3之animation动画.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # CSS3之animation动画
 

docs/02.页面/20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 「布局技巧」图片未加载前自动撑开元素高度
 

docs/02.页面/20.CSS/30.文字在一行或多行时超出显示省略号.md

@@ -1,14 +1,17 @@
 ---
-title: 文字在一行或两行时超出显示省略号
+title: 文字在一行或多行时超出显示省略号
 date: 2020-02-23 15:07:08
 permalink: /pages/42b66999cc27dc25
-categories: 
+categories:
   - 页面
   - CSS
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
-# 文字在一行或两行时超出显示省略号
+# 文字在一行或多行时超出显示省略号
 
 ## 一行超出显示省略
 
@@ -28,7 +31,7 @@ text-overflow: ellipsis;
     .box-42b6{
         border: 1px solid #999;
         width: 200px;
-        
+
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -63,19 +66,36 @@ display: -webkit-box;
     .box2-42b6{
         border: 1px solid #999;
         width: 200px;
-  
+
         overflow: hidden;
         white-space: normal;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
-        
+
       }
 </style>
 ```
 
 :::
 
+## JS判断是否显示了省略号
+有时候我们需要知道是否已经溢出，显示了省略号，可以用到`clientHeight`和`scrollHeight`的知识：
+``` js
+let cHeight = noWrapDiv.clientHeight;
+let sHeight = noWrapDiv.scrollHeight;
+if (sHeight > cHeight) {
+      console.log("已经溢出显示省略号");
+} else {
+      console.log("没有溢出");
+}
+```
+> 这里可以用于判断是否溢出显示展开收缩按钮。
 
+#### 知识点拓展
+scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。
 
+clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。
+
+offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

docs/02.页面/20.CSS/35.从box-sizing属性入手，了解盒子模型.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 从box-sizing属性入手，了解盒子模型
 

docs/02.页面/20.CSS/40.水平垂直居中的几种方式-案例.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 水平垂直居中的几种方式-案例
 

docs/02.页面/20.CSS/45.如何根据系统主题自动响应CSS深色模式.md

@@ -2,18 +2,20 @@
 title: 如何根据系统主题自动响应CSS深色模式
 date: 2020-03-31 14:06:26
 permalink: /pages/5dde351274f1e39d
-sticky: 1
-categories: 
+categories:
   - 页面
   - CSS
-tags: 
+tags:
   - css
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
 # 如何根据系统主题自动响应CSS深色模式
 
 <p align="center">
-  <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200427163531.jpg" width="500">
+  <img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200427163531.jpg" width="500">
 </p>
 
 很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。
@@ -55,8 +57,6 @@ body {
 }
 ```
 
-
-
 ## 添加深色模式自动响应
 
 现在我们定义了两组变量。剩下要做的一件事就是将`prefers-color-scheme`媒体查询添加到我们的深色模式变量中。
@@ -112,8 +112,3 @@ window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
 ## 结论
 
 我们不仅可以在布局方面响应不同尺寸屏幕，还可以按系统主题响应深色模式。我相信你的深夜访客，或者那些喜欢深色模式的人，会感谢你的。
-
-
-
-
-

docs/02.页面/20.CSS/50.「css技巧」使用hover和attr()定制悬浮提示.md

@@ -6,7 +6,10 @@ categories:
   - 页面
   - CSS
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 「css技巧」使用hover和attr()定制悬浮提示-demo
 

docs/02.页面/20.CSS/60.CSS-function汇总.md

@@ -2,10 +2,13 @@
 title: CSS-function汇总
 date: 2020-05-12 09:36:44
 permalink: /pages/3da0d7
-categories: 
+categories:
   - 页面
   - CSS
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200512161232.jpg)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200512161232.jpg)

docs/02.页面/20.CSS/70.CSS给table的tbody添加滚动条.md

@@ -0,0 +1,27 @@
+---
+title: CSS给table的tbody添加滚动条
+date: 2022-06-29 09:34:23
+permalink: /pages/55f894/
+categories:
+  - 页面
+  - CSS
+tags:
+  - 
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+```css
+table tbody {
+  height: 200px;
+  overflow-y: auto;
+  display: block;
+}
+
+table thead,
+tbody tr {
+  display: table;
+  width: 100%;
+}
+```

docs/02.页面/20.CSS/80.网格布局中的动画.md

@@ -0,0 +1,18 @@
+---
+title: 网格布局中的动画
+date: 2023-09-15 17:30:57
+permalink: /pages/b35f63/
+categories:
+  - 页面
+  - CSS
+tags:
+  - 
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+<iframe height="567.2890625" style="width: 100%;" scrolling="no" title="网格布局中的动画" src="https://codepen.io/xugaoyi/embed/zYydzWQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/xugaoyi/pen/zYydzWQ">
+  Untitled</a> by xugaoyi (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>

docs/02.页面/25.stylus/10.混入(Mixins).md

@@ -1,112 +0,0 @@
----
-title: 混入(Mixins)
-date: 2020-02-23 15:47:03
-permalink: /pages/9f15c1a281d8bedb
-categories: 
-  - 页面
-  - stylus
-tags: 
-  - 
----
-# stylus混入(Mixins)
-
-## 混入(Mixins)
-
-混入和函数定义方法一致，但是应用却大相径庭。
-
-一个简单的混入应用，定义一个超出显示省略号的`ellipsis()`方法，在需要用到的地方只需插入这个方法，其样式会扩展并复制到选择器中。
-
-<!-- more -->
-
-```stylus
-ellipsis()
-  overflow hidden
-  white-space nowrap
-  text-overflow ellipsis
-```
-
-```stylus
-p
-  ellipsis()
-```
-
-
-
-下面有定义的`border-radius(n)`方法，其却作为一个*mixin*（如，作为状态调用，而非表达式）调用。
-
-当`border-radius()`选择器中调用时候，属性会被扩展并复制在选择器中。
-
-```stylus
-border-radius(n)
-  -webkit-border-radius n
-  -moz-border-radius n
-  border-radius n
-
-form input[type=button]
-  border-radius(5px)
-```
-
-编译成：
-
-```css
-form input[type=button] {
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-```
-
-使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持。
-
-```stylus
-border-radius(n)
-  -webkit-border-radius n
-  -moz-border-radius n
-  border-radius n
-
-form input[type=button]
-  border-radius 5px
-```
-
-注意到我们混合书写中的`border-radius`当作了属性，而不是一个递归函数调用。
-
-
-
-更进一步，我们可以利用`arguments`这个局部变量，传递可以包含多值的表达式。
-
-```stylus
-border-radius()
-  -webkit-border-radius arguments
-  -moz-border-radius arguments
-  border-radius arguments
-```
-
-现在，我们可以像这样子传值：`border-radius 1px 2px / 3px 4px`!
-
-另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度：
-
-```stylus
-support-for-ie ?= true
-
-opacity(n)
-  opacity n
-  if support-for-ie
-    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
-
-#logo
-  &:hover
-    opacity 0.5
-```
-
-渲染为：
-
-```css
-#logo:hover {
-  opacity: 0.5;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-}
-```
-
-
-
-来源：<https://www.zhangxinxu.com/jq/stylus/mixins.php>

docs/03.技术/01.技术文档/01.Git使用手册.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - 技术文档
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
 

docs/03.技术/01.技术文档/02.Markdown使用教程.md

@@ -2,11 +2,14 @@
 title: Markdown使用教程
 date: 2019-12-25 14:27:01
 permalink: /pages/ad247c4332211551
-categories: 
+categories:
   - 技术
   - 技术文档
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # Markdown使用教程
 
@@ -189,7 +192,7 @@ Markdown 段落没有特殊的格式，直接编写文字，**需要段落缩进
 ### 字体
 
 ```markdown
-*斜体文本* 
+*斜体文本*
 或 _斜体文本_
 **粗体文本**
 或  __粗体文本__
@@ -242,10 +245,10 @@ ___粗斜体文本___
 文字高亮能使行内部分文字高亮，使用一对反引号。
 
 ```markdown
-`html` `css` `javascript` 
+`html` `css` `javascript`
 ```
 
-`html` `css` `javascript` 
+`html` `css` `javascript`
 
 
 
@@ -432,7 +435,7 @@ ___粗斜体文本___
 
 - [ ] 第三项
 
-  
+
 
 ### 列表嵌套
 
@@ -534,7 +537,7 @@ ___粗斜体文本___
 如果是段落上的一个代码片段可以用反引号把它包起来（**`**），示例：
 
 ```markdown
-`alert()` 
+`alert()`
 ```
 
 `alert()`
@@ -645,7 +648,7 @@ function test() {
 
 [Markdown](#一Markdown)
 
-[链接](#九链接)     
+[链接](#九链接)
 
 [流程图](#流程图)
 
@@ -662,7 +665,7 @@ function test() {
 当然，你也可以像链接那样对图片地址使用变量:
 
 ```markdown
-这里链接用 img 作为图片地址变量 
+这里链接用 img 作为图片地址变量
 然后在文档的结尾或其他位置给变量赋值（图片地址）
 ![RUNOOB][img]
 [img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png
@@ -737,7 +740,7 @@ github上如果引用其他github仓库中的图片则要注意地址格式：`
 
 **对齐方式**
 
-- **-:** 设置内容和标题栏居右对齐  
+- **-:** 设置内容和标题栏居右对齐
 - **:-** 设置内容和标题栏居左对齐
 - **:-:** 设置内容和标题栏居中对齐
 
@@ -795,11 +798,11 @@ Emoji表情英文名的前后加冒号，Typore上先输入冒号再输入首字
 Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用反斜杠转义字符：
 
 ```markdown
-**未转义星号显示加粗** 
+**未转义星号显示加粗**
 \*\* 转义显示星号 \*\*
 ```
 
-**未转义星号显示加粗** 
+**未转义星号显示加粗**
 \*\* 转义显示星号 \*\*
 
 
@@ -837,7 +840,7 @@ _   下划线
 
 ```markdown
 $$
-\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
+\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
 \mathbf{i} & \mathbf{j} & \mathbf{k} \\
 \frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
 \frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
@@ -848,7 +851,7 @@ $$
 
 
 $$
-\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
+\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
 \mathbf{i} & \mathbf{j} & \mathbf{k} \\
 \frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
 \frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
@@ -857,7 +860,7 @@ $$
 
 ### 图表
 
-```markdown
+````markdown
 ​```chart
 ,Budget,Income,Expenses,Debt
 June,5000,8000,4000,6000
@@ -878,31 +881,14 @@ sequenceDiagram
 A->>B: 是否已收到消息？
 B-->>A: 已收到消息
 ​```
-```
+````
 
 > 注：在Typora中未支持
 
-```chart
-,Budget,Income,Expenses,Debt
-June,5000,8000,4000,6000
-July,3000,1000,4000,3000
-Aug,5000,7000,6000,3000
-Sep,7000,2000,3000,1000
-Oct,6000,5000,4000,2000
-Nov,4000,3000,5000,
-
-type: pie
-title: Monthly Revenue
-x.title: Amount
-y.title: Month
-y.suffix: $
-```
-
-
 
 ### 流程图
 
-```markdown
+````markdown
 语法：
 ​```mermaid
 graph TD
@@ -912,7 +898,7 @@ C -->|条件C1| D[模块D]
 C -->|条件C2| E[模块E]
 C -->|条件C3| F[模块F]
 ​```
-```
+````
 
 流程图相关文章：
 
@@ -920,40 +906,26 @@ C -->|条件C3| F[模块F]
 
 <http://www.imooc.com/article/292708>
 
-```mermaid
-graph TD
-A[模块A] -->|A1| B(模块B)
-B --> C{判断条件C}
-C -->|条件C1| D[模块D]
-C -->|条件C2| E[模块E]
-C -->|条件C3| F[模块F]
-```
+
 
 
 
 ### 时序图
 
-```markdown
+````markdown
 ​```mermaid
 sequenceDiagram
 A->>B: 是否已收到消息？
 B-->>A: 已收到消息
 ​```
-```
+````
 
 
 
-```mermaid
-sequenceDiagram
-A->>B: 是否已收到消息？
-B-->>A: 已收到消息
-```
 
+ ### 甘特图
 
-
-### 甘特图
-
-``` markdown
+```` markdown
 ​```mermaid
 gantt
 title 甘特图
@@ -965,18 +937,6 @@ section 项目B
 任务3      :2018-06-12  , 12d
 任务4      : 24d
 ​```
-```
+````
 
-```mermaid
-gantt
-title 甘特图
-dateFormat  YYYY-MM-DD
-section 项目A
-任务1           :a1, 2018-06-06, 30d
-任务2     :after a1  , 20d
-section 项目B
-任务3      :2018-06-12  , 12d
-任务4      : 24d
-```
-
-​																														     									[回到顶部](#markdown使用教程)
+​																														     									[回到顶部](#markdown使用教程)

docs/03.技术/01.技术文档/03.npm常用命令.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - 技术文档
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # npm常用命令
 

docs/03.技术/01.技术文档/10.npm packageJson属性详解.md

@@ -1,7 +1,7 @@
 ---
 author: 
-  name: TZYY
-  link: https://www.cnblogs.com/tzyy/p/5193811.html
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 title: npm packageJson属性详解
 date: 2020-04-08 17:16:38
 permalink: /pages/dec4f3f00e71a312
@@ -9,7 +9,7 @@ categories:
   - 技术
   - 技术文档
 tags: 
-  - 
+  - null
 ---
 
 

docs/03.技术/01.技术文档/15.yaml语言教程.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - 技术文档
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # yaml语言教程
 

docs/03.技术/01.技术文档/20.Git修改分支名.md

@@ -0,0 +1,34 @@
+---
+title: Git修改分支名
+date: 2022-08-11 10:51:18
+permalink: /pages/922650/
+categories:
+  - 技术
+  - 技术文档
+tags:
+  -
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+## 同时修改本地分支名和对应的远程分支名
+
+修改前要确保本地分支的代码是最新的，并且修改后不会影响到同事的代码。
+
+1. 修改本地分支名
+```sh
+git branch -m oldBranchName newBranchName
+```
+
+2. 删除远程分支
+```sh
+git push origin :oldBranchName
+# 或者 git push origin --delete oldBranchName
+```
+
+3. 改名后的本地分支推送到远程
+
+```sh
+git push --set-upstream origin newBranchName
+```

docs/03.技术/02.GitHub技巧/01.GitHub高级搜索技巧.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - GitHub技巧
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # GitHub高级搜索技巧	
 

docs/03.技术/02.GitHub技巧/02.GitHub Actions 实现自动部署静态博客.md

@@ -2,11 +2,14 @@
 title: GitHub Actions 实现自动部署静态博客
 date: 2019-12-27 11:44:41
 permalink: /pages/6b9d359ec5aa5019
-categories: 
+categories:
   - 技术
   - GitHub技巧
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 #  GitHub Actions 实现自动部署静态博客
 
@@ -32,19 +35,19 @@ coding pages在国内的访问速度比github pages要快很多，而且还可
 
 然后，将这两个token同时储存到github仓库的`Settings/Secrets`里面。变量名可以随便取，但是注意要和后面的`ci.yml`文件内的变量名一致，这里取的是`ACCESS_TOKEN`和`CODING_TOKEN`。
 
-![token设置](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124812.jpg 'token设置')
+![token设置](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103124812.jpg 'token设置')
 
 GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的`.github/workflows`目录。
 
-workflow 文件采用 [YAML 格式](https://xugaoyi.com/pages/4e8444e2d534d14f/)，文件名可以任意取，但是后缀名统一为`.yml`，比如`ci.yml`。一个库可以有多个 workflow 文件。GitHub 只要发现`.github/workflows`目录里面有`.yml`文件，就会自动运行该文件。    
+workflow 文件采用 [YAML 格式](https://xugaoyi.com/pages/4e8444e2d534d14f/)，文件名可以任意取，但是后缀名统一为`.yml`，比如`ci.yml`。一个库可以有多个 workflow 文件。GitHub 只要发现`.github/workflows`目录里面有`.yml`文件，就会自动运行该文件。
 
-我的`ci.yml`文件：    
+我的`ci.yml`文件：
 
 ```yaml
 name: CI
 
 # 在master分支发生push事件时触发。
-on: 
+on:
   push:
     branches:
       - master
@@ -56,7 +59,7 @@ jobs: # 工作流
       matrix:
         node-version: [10.x]
 
-    steps: 
+    steps:
       - name: Checkout # 步骤1
         uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
       - name: Use Node.js ${{ matrix.node-version }} # 步骤2
@@ -67,7 +70,7 @@ jobs: # 工作流
         env: # 设置环境变量
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
           CODING_TOKEN: ${{ secrets.CODING_TOKEN }} # 腾讯云开发者平台（coding）私密token
-        run: npm install && npm run deploy # 执行的命令  
+        run: npm install && npm run deploy # 执行的命令
         # package.json 中添加 "deploy": "bash deploy.sh"
 ```
 
@@ -136,11 +139,10 @@ rm -rf docs/.vuepress/dist
 
 如下你想查看部署日志，你可以到github仓库的Actions这一项查看。
 
-![部署日志](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124813.png '部署日志')
+![部署日志](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103124813.png '部署日志')
 
 
 
 ## 相关文章
 
 [《GitHub Actions 定时运行代码：每天定时百度链接推送》](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/)
-

docs/03.技术/02.GitHub技巧/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md

@@ -2,12 +2,15 @@
 title: GitHub Actions 定时运行代码：每天定时百度链接推送
 date: 2019-12-30 21:23:00
 permalink: /pages/f44d2f9ad04ab8d3
-categories: 
+categories:
   - 技术
   - GitHub技巧
-tags: 
+tags:
   - github
   - 博客
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 #  GitHub Actions 定时运行代码：每天定时百度链接推送
 
@@ -23,11 +26,11 @@ GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可
 
 链接主动推送在百度站长中有介绍，如图。
 
-![主动提交](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124306.png)
+![主动提交](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103124306.png)
 
 具体使用方法就是创建一个文件`urls.txt`，文件内每行一条链接的格式写入提交的多个链接，如图。
 
-![urls.txt](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124305.png)
+![urls.txt](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103124305.png)
 
 运行命令
 
@@ -70,7 +73,7 @@ function main() {
   const files = readFileList(); // 读取所有md文件数据
 
   files.forEach( file => {
-    const { data } = matter(fs.readFileSync(file.filePath, 'utf8')); 
+    const { data } = matter(fs.readFileSync(file.filePath, 'utf8'));
 
     if (data.permalink) {
       const link = `\r\n${DOMAIN}${data.permalink}/`;
@@ -108,7 +111,7 @@ GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可
 ```sh
 ## baiduPush.yml
 name: 'baiduPush'
- 
+
 on:
   push:
   schedule:
@@ -174,7 +177,7 @@ rm -rf urls.txt # 灭迹
 
 
 
-写好配置，推送到仓库，就会在每天的早上7点钟，自动运行命令生成一个包含博客所有页面链接的`urls.txt`文件，并把所有链接一次性推送到百度。麻麻再也不用担心我的网站不被收录~~:kissing_heart: :kissing_heart: :kissing_heart: 
+写好配置，推送到仓库，就会在每天的早上7点钟，自动运行命令生成一个包含博客所有页面链接的`urls.txt`文件，并把所有链接一次性推送到百度。麻麻再也不用担心我的网站不被收录~~:kissing_heart: :kissing_heart: :kissing_heart:
 
 在这个基础上可以扩展，使用GitHub Actions满足你自己的各种定时需求。
 
@@ -185,6 +188,3 @@ rm -rf urls.txt # 灭迹
 [《 GitHub Actions 实现自动部署静态博客》](https://xugaoyi.com/pages/6b9d359ec5aa5019/)
 
 [《解决百度无法收录搭建在GitHub上的静态博客的问题》](https://xugaoyi.com/pages/41f87d890d0a02af/)
-
-
-

docs/03.技术/02.GitHub技巧/10.GitHub加速下载项目的方法.md

@@ -2,11 +2,14 @@
 title: GitHub加速下载项目的方法
 date: 2020-03-09 10:28:09
 permalink: /pages/95331c6a9613faf8
-categories: 
+categories:
   - 技术
   - GitHub技巧
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # GitHub加速下载项目的方法
 
@@ -14,7 +17,7 @@ tags:
 
 <!-- more -->
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200309112604.png)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200309112604.png)
 
 
 
@@ -24,17 +27,17 @@ tags:
 
 2. 登录码云之后在页面右上角的加号选择`从GitHub/GitLab导入项目`
 
-   ![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200309112711.jpg)
+   ![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200309112711.jpg)
+
 
-   
 
 3. 选择`从URL导入`，粘贴从GitHub复制来的仓库地址，然后导入，这个导入过程一般是很快的。
 
-   ![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200309112710.jpg)
+   ![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200309112710.jpg)
 
 4. 从码云克隆刚导入的这个项目，克隆速度会快很多，网速好的能达到几兆每秒（具体速度就看你的网速了，吐槽一下我家网速，总在关键时刻显示"视频加载中"....）
 
-   ![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200309112712.jpg)
+   ![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200309112712.jpg)
 
 5. 另外要注意的一点，克隆下来的项目关联的是码云的仓库，如果你需要关联github仓库需要更改远程仓库。
 
@@ -47,4 +50,3 @@ tags:
 
 
 这个方法适合用于克隆比较大的项目，如果克隆小项目，20k/s的速度好像还能将就~~
-

docs/03.技术/03.Nodejs/01.nodejs递归读取所有文件.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - Nodejs
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # nodejs递归读取所有文件
 ```js

docs/03.技术/04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - 博客搭建
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 解决百度无法收录搭建在GitHub上的静态博客的问题
 

docs/03.技术/04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md

@@ -6,7 +6,10 @@ categories:
   - 技术
   - 博客搭建
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 使用Gitalk实现静态博客无后台评论系统
 

docs/03.技术/04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md

@@ -2,11 +2,14 @@
 title: GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
 date: 2020-01-03 12:55:43
 permalink: /pages/a5f73af5185fdf0a
-categories: 
+categories:
   - 技术
   - 博客搭建
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
 
@@ -19,6 +22,13 @@ A：写博客文章时，图片的上传和存放是一个问题，有的朋友
 
 <!-- more -->
 
+::: warning 更好的选择...
+以下内容是比较旧的，现在我发现一个更好用，配置更方便的图床工具：<https://picx.xpoet.cn/>
+使用方法看一下他网站的使用教程就行。 撒由那拉~~
+::: right
+2021.07.04
+:::
+
 
 **Q：图床的选择**
 
@@ -45,12 +55,11 @@ A：`jsDelivr`是国外的一家优秀的公共 CDN 服务提供商，该平台
    * 分支名：填写主分支`master`即可
    * Token：前面生成的token密钥
    * 存储路径：按你自己的需求填写
-   * 自定义域名：图片上传后，PicGo 会按照 `自定义域名+上传的图片名` 的方式生成访问链接，此处我们填写`jsDelivr`的CDN加速地址，格式：`https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>`
+   * 自定义域名：图片上传后，PicGo 会按照 `自定义域名+上传的图片名` 的方式生成访问链接，此处我们填写`jsDelivr`的CDN加速地址，格式：`https://jsd.cdn.zzko.cn/gh/<用户名>/<仓库名>`
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103105720.png)
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103105720.png)
 
 4. 使用<https://tinypng.cn/>压缩你要上传的图片（如图片已经很小或你有更好的压缩工具可省略这一步）
 5. 在PigGo的`上传区`上传你的图片，到`相册`一键复制刚刚上传的图片URL，至此，你就可以在你的文章当中愉快的插入图片啦~， 更多功能自己去探索吧~~
 
-![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103121148.png)
-
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103121148.png)

docs/03.技术/04.博客搭建/10.vdoing主题效果图.md

@@ -3,6 +3,9 @@ title: vdoing主题效果图
 date: 2020-04-08 11:27:22
 permalink: /pages/d557b9a89a215d2e
 article: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
 # vdoing主题效果图
@@ -10,39 +13,38 @@ article: false
 ## PC端
 
 <br/>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408125410.png" style="width:48%;"/>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120138.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408125410.png" style="width:48%;"/>
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120138.png"  style="width:48%;" />
 <p align="center">首页 & 目录页△</p>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120144.png"  style="width:48%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120145.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120144.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120145.png"  style="width:48%;" />
 <p align="center">文章详情页 & 时间轴页△</p>
 
 ## 首页个性化大图
 
 <br/>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408125412.png" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408125412.png" />
 <p align="center">首页个性化大图△</p>
 
 ## 深色模式和阅读模式
 
 <br/>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408125408.png"  style="width:48%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120139.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408125408.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120139.png"  style="width:48%;" />
 <p align="center">深色模式△</p>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408125409.png"  style="width:48%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120143.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408125409.png"  style="width:48%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120143.png"  style="width:48%;" />
 <p align="center">阅读模式△</p>
 
 ## 移动端
 
 <br/>
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120606.png" style="width:24%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120147.png" style="width:24%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408120148.png" style="width:24%;" />
-<img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200408130831.png" style="width:24%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120606.png" style="width:24%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120147.png" style="width:24%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408120148.png" style="width:24%;" />
+<img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200408130831.png" style="width:24%;" />
 <p align="center">移动端效果△</p>
 
 <style scoped>
     /* .content__default img{border: 1px solid #ccc;} */
 </style>
-

docs/04.更多/01.学习/00.费曼学习法.md

@@ -0,0 +1,42 @@
+---
+title: 费曼学习法
+date: 2020-07-16 10:04:14
+permalink: /pages/f2a556/
+categories: 
+  - 更多
+  - 学习
+tags: 
+  - 学习方法
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+费曼学习法，我很喜欢的一个学习方法，简单来说，就是：通过向别人清楚的解说某一件事或是写一篇浅显易懂的教程文章，来确认自己是否真正弄懂了这件事。
+可以说是在通过向别讲解过程中来对自身的 **查缺补漏**。
+
+### 步骤
+费曼学习法分为4个步骤:
+
+1. **确定学习目标**
+
+你想学习的概念、内容、主题是什么。
+
+2. **模拟教学学习法**
+
+你要模拟自己是一位老师，面对完全不懂这个领域的人，用自己的话，尽可能具体形象地讲诉。这样的讲诉有助于你活学活用，触类旁通，联系生活具体情境。
+
+3. **回顾**
+
+反思第2步遇到的问题，哪些地方卡壳了，哪些地方对方没有真正听懂。找出问题的要害，把握关键环节。
+
+4. **简化**
+
+把这些遇到问题的地方，重新梳理理解，尽可能了解更多背景和相关知识，再用尽可能简化的方式重新表达，设法看穿本质。然后，返回第2步。
+
+
+> 参考：
+> 
+> [《费曼学习法：为何被称为史上最牛的学习法，它的本质究竟是什么？》](https://zhuanlan.zhihu.com/p/88209825)
+> 
+> [《费曼学习法》](https://www.jianshu.com/p/90be6a69528a)

docs/04.更多/01.学习/01.笔记方法.md

@@ -0,0 +1,44 @@
+---
+title: 笔记方法
+date: 2020-07-16 11:00:55
+permalink: /pages/e60c81/
+categories:
+  - 更多
+  - 学习
+tags:
+  - 笔记方法
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+::: center
+
+## 康奈尔笔记法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105752.jpg)
+
+## 思维导图法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105747.jpg)
+
+## 金三角笔记法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105753.jpg)
+
+## 曼陀罗九宫格笔记法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105748.jpg)
+
+## 记号记录法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105749.jpg)
+
+## 六色笔记法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105750.jpg)
+
+## 加工笔记法
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105751.jpg)
+
+## 整理笔记要点1-科学标记重点
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105746.jpg)
+
+## 整理笔记要点2-修改不涂改
+![](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200716105745.jpg)
+
+:::

docs/04.更多/01.学习/02.提高学习效率的策略.md

@@ -2,11 +2,14 @@
 title: 提高学习效率的策略
 date: 2020-01-04 11:54:14
 permalink: /pages/a8692ab3bdcb4588
-categories: 
+categories:
   - 更多
   - 学习
-tags: 
-  - 
+tags:
+  - null
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 提高学习效率的策略
 
@@ -71,4 +74,4 @@ tags:
 
 ——以上内容摘自《认知天性》，结合本人的个人理解，更多内容请查看该书籍。
 
-![认知天性](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103144032.png '认知天性')
+![认知天性](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103144032.png '认知天性')

docs/04.更多/01.学习/03.提高记忆的技巧.md

@@ -6,7 +6,10 @@ categories:
   - 更多
   - 学习
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 提高记忆的技巧
 

docs/04.更多/01.学习/04.自律小建议.md

@@ -6,7 +6,10 @@ categories:
   - 更多
   - 学习
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 自律小建议
 

docs/04.更多/01.学习/05.处理问题的思路.md

@@ -6,7 +6,10 @@ categories:
   - 更多
   - 学习
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 处理问题的思路
 

docs/04.更多/01.学习/10.搜索引擎使用技巧.md

@@ -7,6 +7,9 @@ categories:
   - 学习
 tags: 
   - 搜索技巧
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
 搜索引擎相信大家经常在使用，但是有时候想搜某个信息时却搜出来一大堆不相关的（百度：你们都在看我干什么？）。下面我们来介绍几种搜索技巧，可以提升搜索效率，助你快速查资料，妈妈再也不担心我的学习了（'妈~我真的是在找学习资料'）

docs/04.更多/03.面试/01.面试问题集锦.md

@@ -6,7 +6,10 @@ categories:
   - 更多
   - 面试
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 面试问题集锦
 

docs/04.更多/04.英语/01.英语基础.md

@@ -1,201 +0,0 @@
----
-title: 英语基础
-date: 2020-01-13 11:55:53
-permalink: /pages/6f9525eecdd51d5a
-categories: 
-  - 更多
-  - 英语
-tags: 
-  - 
----
-# 英语基础
-
-
-
-## 1.基础
-
-### 拼法
-
-同一个英文字母可能会有不同的发音；同一个发音也会有不同的拼法。看看下面的例子：
-
-* two（二）里的 **w** 不发音
-* phone（电话），**ph**的发音跟 **f** （如 **佛**）一样 
-
-
-
-### 拥有
-
-在中文，我们可以在**我**或**你**的后面加**的**，来表示某个东西属于某人。在英语中却有独特的单词来表示这些概念。
-
-| 英文      | 中文     |
-| --------- | -------- |
-| my car    | `我的`车 |
-| your book | `你的`书 |
-| his cat   | `他的`猫 |
-| her dog   | `她的`狗 |
-
-### 你喜欢什么？
-
-在英语，**我喜欢...**就是 I like...
-
-I like my cat（我喜欢我的猫）
-
-
-
-### 提问 or
-
-如果你想给人提供选择，就在问题里用 or
-
-Coffee or tea？(咖啡还是茶)
-
-
-
-### 英语发音 -er
-
--er 结尾的单词。
-
-computer，summer，water
-
-这个er像中文里的**er**（如**儿**），但是发元音时要更轻。
-
-> 元音：是像a、i、u等的声音 。发音时气流自由地经过口腔，不受阻碍。
-
-
-
-
-
-## 2.介绍
-
-### 动词 to be
-
-`是` 在中文里一般不会改变形式，像`我是`、`你是`、`他是`，英语的动词形式却会因 `I`、`you`、`he`等而改变。来看看to be这个最常用的动词是怎么改变形式的吧！
-
-> 动词：表示动作（做饭）或存在（我是老师）等的词。
-
-#### 动词 to be（是）的改变形式
-
-| 人称      | to be的改变形式 |
-| --------- | --------------- |
-| I（我）   | am（是）        |
-| you（你） | are（是）       |
-| he（他）  | is（是）        |
-| she（她） | is（是）        |
-
-
-
-#### He is a boy
-
-中文说**他是男孩子**，在英文里必须加上 a 这个词，表示一。
-
-He is a boy,she is a girl.
-
-
-
-## 3.问候
-
-### 首字母大写
-
-英文中首字母大写的情况有：
-
-* 句子的第一个词
-* 名字
-* 国家、国籍、语言
-* I 这个词
-
-Hello,I am Johm（你好，我是约翰）
-
-Is she from South korea?（她来自韩国吗）
-
-I speak Chinese（我是中文）
-
-
-
-### 提问-改变to be词序
-
-只需要改变词序，就能用 to be 提问啦
-
-| 陈述句              | 疑问句              |
-| ------------------- | ------------------- |
-| Yor are from Chine. | Are you from Chine? |
-| He is from Chine.   | Is he from Chine?   |
-
-英语里的 **where** 和 **how** 这样的词要放在问题的开头。
-
-Where  are you from?（你来自哪里？）
-
-How is he?（他怎么样？）
-
-
-
-### 怎么样？
-
-用英语问**你好吗？**或**怎么样？**，可以说 How are you?
-
-Hello,how are you?
-
-I am find. How are you?
-
-I am find,thanks!
-
-
-
-## 4.餐厅
-
-### I want a sandwich
-
-用中文说**我想要汉堡包**，在英文中说 **I want a burger**. 一定要用 **a**，表示`一个`、`一份`、`一件`东西...
-
-I want a sandwich（我想要一个三明治）
-
-I want a menu（我想要一份菜单）
-
-但是如果`名词`以 **-s** 结尾，我们一般不用a
-
-I want fries（我想要薯条）
-
-> 名词：表示事物（勺子）、概念（爱）、人（安娜）等的词。
-
-### Please
-
-说话时用please（请、请给我），礼多人不怪。
-
-Follow me,please.（请跟我来）
-
-A burger,please!（请给我一个汉堡包）
-
-
-
-
-
-## 5.家庭
-
-### 兄弟姐妹
-
-中文里我们有一大堆描述家人亲属的单词，英语就没那么复杂！**姐姐**和**妹妹**都是sister，**哥哥**和**弟弟**都是brother，祖父母是 grandparents
-
-### 动词 （to be 代替 很）
-
-在中文，我们是**我很忙**，但是在英语我们用to be这个动词来代替**很**。把to be 放在**我**和**忙**中间—— I am busy.
-
-She is busy（她很忙）
-
-He is intelligent（他很聪明）
-
-You are funny（你很好笑）
-
-### 英语发音 r、v、th
-
-* restaurant（餐厅）,parents（父母）,short（短）
-  * 发 `r`这个音，舌尖要卷一点，但是舌头后半要放到口腔里的后面一点，口型跟**w**一样。
-
-* very（非常）,evening（晚上）,have（有）
-  * `v`的发音很像**f**
-
-
-
-
-
-
-
-
-

docs/04.更多/05.心情杂货/01.一个完美主义者的自我救赎.md

@@ -6,7 +6,10 @@ categories:
   - 更多
   - 心情杂货
 tags: 
-  - 
+  - null
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 # 一个完美主义者的自我救赎
 

docs/04.更多/05.心情杂货/10.反向拆解让人上瘾的套路，找回自律.md

@@ -0,0 +1,113 @@
+---
+title: 反向拆解让人上瘾的套路，找回自律
+date: 2020-07-22 13:05:49
+permalink: /pages/d6d331/
+categories: 
+  - 更多
+  - 心情杂货
+tags: 
+  - 心理
+  - 自律
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+# 反向拆解让人上瘾的套路，找回自律
+
+当你打开手机准备学习或者查个资料的时候，很有可能不知不觉的就脱离的正规... 某某app发来通知：xx明星官宣啦、xx手游重磅上线，一起开启修仙之旅吧！ xx结衣发布新番-4k画质&AR体验、99+未读信息、支付宝到账100万元.... 你心想，就看一会，就一会儿... 不知不觉两三个小时过去了，你开始焦躁、后悔、自责。第二天，你又掉进相同的坑里。你可能会纳闷，为什么我的自制力这么差？为什么对某件事欲罢不能？
+
+<!-- more -->
+      
+::: theorem 《欲罢不能》
+数字时代比人类历史上的任何时代都更容易上瘾...Facebook、Instagram、网络色情、网购在下钩... 问题不出在人缺乏意志力上，而在于“屏幕那边有数千人在努力工作，为的就是破坏你的自律”
+::: right
+来自《欲罢不能-刷屏时代如何摆脱行为上瘾》一书
+:::
+
+我们正在被一个算法和娱乐所包裹的电子'海洛因'中却不自知，想要摆脱这些上瘾行为，第一步就是反向拆解那些让我们上瘾的产品的套路。《欲罢不能》书中总结了六个让人上瘾的钩子：
+
+### 1.诱人的目标
+
+* 色情片
+* 游戏中成为"王者"、层出不穷的高颜值皮肤...
+*  ...
+
+### 2.无法抵挡无法预知的积极反馈
+
+* 社交中的点赞功能
+* 某音十几秒一条的视频，不需要你动脑就可以轻轻松松获得哈哈大笑的快感，有时候还有一种我学习到了的感觉，你永远猜不到下一条将会出现什么惊喜。你刷的越多算法就越精准，越知道你的情绪G点在哪里，你就越容易被俘获。
+* 直播中的打赏被主播表示的感谢和送上的'么么哒'
+* ...
+
+### 3.渐进式的进步和改善的感觉
+
+* 游戏中的升级策略
+
+* ...
+
+### 4.随着时间的推移越来越困难的任务
+
+* 游戏中的升级策略
+*  ...
+
+### 5.需要解决却又暂未解决的紧张感
+
+* 电影或电视剧结尾有意制造的一个悬念，给你一种未完成的紧张感，你迫切想知道后面会发生什么
+*  ...
+
+### 6.强大的社会联系
+
+* 与队友相约开黑
+
+* 游戏中能彰显地位、财富、能力等的装备（如：吃鸡游戏中的玛莎拉蒂皮肤）
+
+*  ...
+
+
+
+## 找回自律，收获积极而长久的快乐
+
+获得快乐的方式，你可以选择沉迷在你的手机里刷视频、打游戏、煲剧，毫不费力的收货大把的快乐。你还可以选择一条更难的路：**选择自律、选择延迟满足、选择会让你不那么舒服的努力和成长**。
+
+收获快乐的方式没有绝对的对与错，但是，如果快乐触手可及，这种廉价的快乐也就不值得珍惜，随时都可能抛弃。过后还可能让你浪费了大把时间，该做的正事没有完成，你感觉空虚、焦躁、自责... 既然如此，我们一起选择那条更难的路吧！
+
+
+
+::: tip 上瘾的案例收集
+
+想想你生活中让你上瘾的案例，对照上面让人上瘾的钩子，看看是哪个钩子吧~~欢迎留言哦~
+
+:::
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

docs/04.更多/10.实用技巧/01.2分钟规则.md

@@ -0,0 +1,35 @@
+---
+title: 2分钟规则
+date: 2020-11-09 11:05:29
+permalink: /pages/baaa02/
+categories: 
+  - 更多
+  - 实用技巧
+tags: 
+  - 实用技巧
+  - 文摘
+author: 
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+
+每当你发现很难开始执行某项任务时，可以试试将其缩减成2分钟的版本。
+
+- 看一本书 → 看一页书
+- 写一篇文章 → 写一句话
+- 跑10公里 → 穿上跑鞋
+- 做100次俯卧撑 → 做1次俯卧撑
+- 多吃蔬菜水果 → 吃一个水果
+- 编写一个程序 → 编写一个函数 → 编写一行代码
+
+<!-- more -->
+
+这样做的目的是使上手变得超级容易，让你先上手再说。一旦开始做了（这可能是最艰难的一步），你就会开始有动力，可能会继续做下去。
+
+- 阅读一页 → 阅读10页 → 读完第一章
+- 写一个句子 → 写文章的开头 → 写出正文
+- 穿上跑鞋 → 步行5分钟 → 跑步5分钟
+
+一旦开始，继续做下去就会容易得多。有时，你甚至会发现，自己在不知不觉间已经完成了任务。
+
+> 本文摘录自 <https://hoanhan.co/2-minute-rule>

docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md

@@ -0,0 +1,58 @@
+---
+title: 一行代码“黑”掉任意网站
+date: 2021-11-25 14:33:51
+permalink: /pages/dcebaf/
+titleTag: 原创
+sticky: 1
+categories:
+  - 更多
+  - 实用技巧
+tags:
+  - JavaScript
+  - css
+  - 实用技巧
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
+---
+# 一行代码“黑”掉任意网站
+
+实用技巧：只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。
+<p align="center"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/QQ20211125-163111.2tmjlvz28n80.png" width="500" style="cursor: zoom-in;"></p>
+
+<!-- more -->
+
+首先我们先做一个实验，在任意网站中，打开浏览器开发者工具(F12)，在`Console`控制台输入如下代码并回车：
+
+```js
+document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'
+```
+
+神奇的事情发生了，当前打开的网站变成了暗黑模式。
+
+::: details 原理解释
+1. `document.documentElement` 获取文档对象的根元素，即`<html>`元素
+2. 给`html`元素的`.style`样式添加`filter`滤镜样式为`invert(85%) hue-rotate(180deg)`
+3. `invert()` 反转图像。
+4. `hue-rotate()`色相旋转。
+
+更多滤镜知识：[`filter`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)。
+:::
+
+
+
+
+
+为了更方便实用，达到轻轻一点就可以对网页施加魔法🎉，
+
+我们对代码做了一点点🤏🏻改动。（修正了滤镜对图片等元素的影响）
+```js
+javascript: (function () {  const docStyle = document.documentElement.style;  if (!window.modeIndex) {    window.modeIndex = 0;  }  const styleList = [    '',    'invert(85%) hue-rotate(180deg)',   'invert(100%) hue-rotate(180deg)',  ];  modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1;  docStyle.filter = styleList[modeIndex];  document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '');})();
+```
+
+然后打开浏览器书签管理器，添加新书签，在网址栏粘贴这段代码并保存：
+<p align="center"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/QQ20211125-154655.1byvlo5a60xs.png" width="600" style="cursor: zoom-in;"></p>
+
+以后在任意网站，只需要轻轻一点`切换模式`书签就可以让它变成85%的暗黑，再点一次就是100%的暗黑，再点一次变回正常模式。
+
+<p align="center"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/QQ20211125-163111.2tmjlvz28n80.png" width="600" style="cursor: zoom-in;"></p>

docs/04.更多/99.友情链接.md

@@ -4,101 +4,196 @@ date: 2019-12-25 14:27:01
 permalink: /friends
 article: false
 sidebar: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
-<!-- 
+<!--
 普通卡片列表容器，可用于友情链接、项目推荐、古诗词展示等。
 cardList 后面可跟随一个数字表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
 -->
+
 ::: cardList
+
 ```yaml
 - name: 麋鹿鲁哟
   desc: 大道至简，知易行难
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
+  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
   link: https://www.cnblogs.com/miluluyo/ # 可选
-  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
-  textColor: '#6854A1' # 可选，默认var(--textColor)
+  bgColor: "#CBEAFA" # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
+  textColor: "#6854A1" # 可选，默认var(--textColor)
 - name: XAOXUU
-  desc: '#IOS #Volantis主题作者'
-  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
+  desc: "#IOS #Volantis主题作者"
+  avatar: https://jsd.cdn.zzko.cn/gh/xaoxuu/assets@master/avatar/avatar.png
   link: https://xaoxuu.com
-  bgColor: '#718971'
-  textColor: '#fff'
+  bgColor: "#B9D59C"
+  textColor: "#3B551F"
+- name: 平凡的你我
+  desc: 理想成为大牛的<br/>小陈同学
+  avatar: https://qiniu.reinness.com/avatar.png
+  link: https://reinness.com
+  bgColor: "#FFE5B4"
+  textColor: "#A05F2C"
 - name: znote
-  desc: 荷尽已无擎雨盖，菊残犹有傲霜枝
+  desc: 荷尽已无擎雨盖，<br/>菊残犹有傲霜枝。
   avatar: https://zpj80231.gitee.io/znote/vuepress/head-fish.jpg
   link: https://zpj80231.gitee.io/znote/
-  bgColor: '#FCE5BF'
-  textColor: '#7B2532'
-- name: 平凡的你我
-  desc: 理想成为大牛的小陈同学
-  avatar: https://reinness.com/avatar.png
-  link: https://reinness.com
-  bgColor: '#FCDBA0'
-  textColor: '#A05F2C'
+  bgColor: "#FCE5BF"
+  textColor: "#7B2532"
+- name: 全栈软件开发直通车
+  desc: 全栈软件开发技术博客，<br/>从小白到大神!
+  avatar: https://cdn.jsdelivr.net/gh/wangshibiaoFlytiger/blog_picBed1/images/shuaige.jpg
+  link: https://sofineday.com
+  bgColor: "#FBEBEC"
+  textColor: "#603420"
+- name: 易良同学的博客
+  desc: 正在努力！
+  avatar: https://yiliang.site/assets/images/avatar.jpg
+  link: https://yiliang.site
+  bgColor: "#FFEFE2"
+  textColor: "#A05F2C"
+- name: 永远的救赎者
+  desc: 知者减半，省者全无。
+  avatar: https://i.loli.net/2020/08/10/PkQMGL6pATW1vBg.jpg
+  link: http://www.yuanchengcheng.vip/
+- name: 辰旭博客
+  desc: 凤鸣初阳，百鸟朝凰
+  avatar: https://s1.ax1x.com/2020/08/09/aoLTDx.png
+  link: https://kareny.cn
+- name: JokerM's Palace
+  desc: Take your heart
+  avatar: https://jokerm.com/wp-content/uploads/2020/09/jmflogo.png
+  link: https://jokerm.com/
+- name: Saul.J.Wu
+  desc: 立身之本，不在高低。
+  avatar: https://sauljwu.github.io/img/logo.jpg
+  link: https://sauljwu.github.io/
+- name: Lake's blog
+  desc: 不积跬步，无以至千里；不积小流，无以成江海。
+  avatar: https://jsd.cdn.zzko.cn/gh/taixingyiji/image_store@main/blog/logo/img.png
+  link: https://taixingyiji.com/
+- name: Cubik的小站
+  desc: RECOMMENDED BY DR.CREATIVE
+  avatar: https://jsd.cdn.zzko.cn/gh/Cubik65536/cubik-favicons@main/CubikLogo.png
+  link: https://www.cubik65536.top/
+- name: x·π
+  desc: 为开发者量身制作的技术博客和知识库管理平台。
+  avatar: https://jsd.cdn.zzko.cn/gh/Ezuy-Lee/RainzeDrawingBed/media/logo.png
+  link: https://ezuy-lee.github.io/xpai/
+- name: 眼里有光
+  desc: 道阻且长，行则将至
+  avatar: https://icooloop.gitee.io/img/logo.jpg
+  link: https://icooloop.gitee.io/
+- name: Heo
+  desc: 爱折腾的设计师
+  link: https://blog.zhheo.com/
+  avatar: https://blog.zhheo.com/img/avatar.png
+- name: Chuyuxuan
+  desc: 临渊羡鱼，不如退而结网
+  link: https://blog.chuyuxuan.top/
+  avatar: http://blog.chuyuxuan.top/img/avatar1.jpg
+- name: 全栈杂货站
+  desc: 千里万里杂货站里，天青色等烟雨，而我在等你。
+  avatar: http://cdn.tea-culture.top/tech/images/avatar/3.jpg
+  link: http://tech.tea-culture.top/
+- name: 小鱼博客
+  desc: 总是半途而废的废柴
+  avatar: https://jsd.cdn.zzko.cn/gh/xiaoyu-666/image_store/blog/minion.png
+  link: https://xiaoyu-666.github.io/
+- name: 大胡子
+  desc: 记录你我，分享精彩。
+  avatar: https://photo.jakehu.cn/favicon.png
+  link: https://www.jakehu.cn
+- name: 嘟先生学WebGL
+  desc: 流水不争先，争的是滔滔不绝。
+  avatar: https://joy1412.cn/img/dudu.jpeg
+  link: https://joy1412.cn
+- name: "@小右_"
+  desc: 学而不厌 不耻下问
+  avatar: https://lordblog.cn/upload/2021/05/logo%20(4)-742f1f7e15db44a1b3140035104ea239.png
+  link: https://lordblog.cn/
+- name: 途中的树
+  desc: 走出自己的傲慢，承认自己的局限。
+  avatar: https://zkpeace.com/blog/img/avatar.jpg
+  link: https://zkpeace.com/
+- name: Haobo's Blog
+  link: https://discover304.top/
+  avatar: https://discover304.top/img/head.jpg
+  desc: 半只脚跨入炼丹师的大门的新人
+- name: 小胖墩er
+  desc: 迟到总比不到的好，所以好好加油吧。
+  avatar: https://jsd.cdn.zzko.cn/gh/Chubby-Duner/image-hosting@master/blog/logo.jpeg
+  link: https://chubbyduner.top
+- name: Joseph Z.
+  desc: Joseph Z.的小站
+  avatar: https://josephz.top/image/avatar.webp
+  link: https://josephz.top/
+- name: 二丫讲梵 # 昵称
+  desc: 💻学习📝记录🔗分享 # 介绍
+  avatar: https://wiki.eryajf.net/img/logo.png # 头像
+  link: https://wiki.eryajf.net/ # 链接
+- name: YoungKbt World # 昵称
+  desc: 故事由我书写，旅程由你见证，传奇由她聆听 # 介绍
+  avatar: https://jsd.cdn.zzko.cn/gh/Kele-Bingtang/static/user/avatar2.png # 头像
+  link: https://notes.youngkbt.cn/ # 链接
+# - name: XuHuaian,s Blog # 昵称
+#   desc: 记录自己的工作学习心得，争取当一条有梦想的咸鱼 # 介绍
+#   avatar: https://dbsecurity.com.cn/images/logo.jpg # 头像
+#   link: https://dbsecurity.com.cn/# 链接
+- name: xustudyxu
+  desc: 一起学习编程!
+  avatar: https://jsd.cdn.zzko.cn/gh/xustudyxu/image-hosting@master/20220423/01.3d9wrma6qlq0.webp
+  link: https://frxcat.fun/
+- name: Yiyang Sun
+  desc: Frontend enthusiast.
+  avatar: https://shaun-logo.oss-cn-beijing.aliyuncs.com/avatar.jpg
+  link: https://blog.syy11.cn
+- name: ColorPanda
+  desc: 中国語を日本語と英語で勉強。日中家庭の言語教育の悩みを解消したい。
+  avatar: https://colorpanda.aifan.jp/img/logo.png
+  link: https://colorpanda.aifan.jp/
+- name: 不器小窝
+  desc: 「但知行好事,莫要问前程」
+  avatar: https://avatars.githubusercontent.com/u/866409?v=4
+  link: https://xingcxb.com/
+# - name: 七鳄の学习格
+#   desc: 如果世界多了精彩，每一位都是创造者，大家都是你的观众
+#   avatar: https://blog.gmcj0816.top/img/SeriousWission_TouXiangPic.jpg
+#   link: https://blog.gmcj0816.top/
+- name: 从01开始
+  desc: 那就从零开始
+  avatar: https://image.peterjxl.com/blog/re0.jpg
+  link: https://www.peterjxl.com/
+- name: Gahing's blog # 昵称
+  desc: 生活之珍爱，余缀于技术之间。 # 介绍
+  avatar: https://www.gahing.top/img/avatar.jpeg # 头像
+  link: https://www.gahing.top/ # 链接
+- name: Howietron # 昵称
+  desc: Java全站技术博客，积跬步以至千里，致敬每个爱学习的你。 # 介绍
+  avatar: https://wiki.howie.top/img/logo.png # 头像
+  link: https://wiki.howie.top/ # 链接
+- name: 菜园前端 # 昵称
+  desc: 前端学习笔记分享、小白都能看懂的笔记 # 介绍
+  avatar: https://note.noxussj.top/logo.png # 头像
+  link: https://note.noxussj.top/?s=y3 # 链接
+- name: 坚持住 # 昵称
+  desc: 一个毕业于临床医学专业的挚爱IT技术的喜欢研究英语的人族选手 # 介绍
+  avatar: https://hanginthere.space/hanginthere_logo_update.png # 头像
+  link: Https://hanginthere.space # 链接
 ```
+
 :::
 
-
-<!-- ## 图文卡片列表 -->
-<!--
-图文卡片列表，可用于项目展示、产品展示等。
-cardImgList 后面可跟随一个数字表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
- -->
-<!-- ::: cardImgList
-```yaml
-- img: https://assets.awwwards.com/awards/media/cache/thumb_834_598/external/2020/05/5ebd082bb77bf137658772.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-- img: https://assets.awwwards.com/awards/images/2020/05/Somt_may-2020-powerhouse_thumbc.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-- img: https://assets.awwwards.com/awards/media/cache/thumb_834_598/external/2020/05/5ebd082bb77bf137658772.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-- img: https://assets.awwwards.com/awards/images/2020/05/Somt_may-2020-powerhouse_thumbc.jpg
-  link: https://www.spotify.com/int/why-not-available/
-  name: 图文标题
-  desc: 图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容图文描述内容 # 描述，可选
-  author: Evan Xu # 作者，可选
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
-
-```
-::: -->
-
-
-
 ### 友链申请
 
 与我[ 联系 ](/about/#联系)或者 在本页面评论区留言您的友链信息，格式：(点击代码块右上角一键复制)
 
-
 ```yaml
 - name: Evan's blog # 昵称
-  desc: 积跬步以至千里，喜欢学习喜欢你。 # 介绍
-  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像
-  link: https://xugaoyi.com/  # 链接
+  desc: Web前端技术博客，积跬步以至千里 # 介绍
+  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像
+  link: https://xugaoyi.com/ # 链接
 ```
 
-申请前记得先添加本站哦~ 
+申请前记得先添加本站哦~

docs/05.关于/01.关于.md

@@ -1,51 +1,84 @@
 ---
 title: 关于
 date: 2019-12-25 14:27:01
-permalink: /about
+permalink: /about/
 sidebar: false
 article: false
+author:
+  name: xugaoyi
+  link: https://github.com/xugaoyi
 ---
 
-### 📚Blog
+## 📚Blog
 这是一个兼具博客文章、知识管理、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/vuepress-theme-vdoing)点个Star，或者交换[友链](/friends/) ( •̀ ω •́ )✧
 
 :::tip
-文章内容仅是我个人的小总结，如有误还请指正。
+文章内容仅是我个人的小总结，资历尚浅，如有误还请指正。
 :::
 
-### 🎨Theme
-本站主题是 [`Vdoing`](https://github.com/xugaoyi/vuepress-theme-vdoing)，这是一款简洁高效的VuePress 知识管理&博客 主题。旨在轻松打造一个`结构化`与`碎片化`并存的个人在线知识库&博客，让你的知识海洋像一本本书一样清晰易读。配合多维索引，让每一个知识点都可以快速定位！ 更多[详情](https://github.com/xugaoyi/vuepress-theme-vdoing)。
-
-<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src='https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing' alt='GitHub stars' class="no-zoom"></a>
-<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src='https://img.shields.io/github/forks/xugaoyi/vuepress-theme-vdoing' alt='GitHub forks' class="no-zoom"></a>
-
-
-### 🐼Me
-从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
-
-<img src='https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg' alt='本人照片' style="width:106px;">
-
-
 [更新日志](https://github.com/xugaoyi/vuepress-theme-vdoing/commits/master)
 
+
+<!-- <div style="width: 300px;height: 300px;position: fixed;bottom: 0;left: 0;z-index: 1;">
+  <script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5e4x5w8cxxb&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33&amp;bv=80" async="async"></script>
+</div> -->
+
+<!-- 小熊猫 -->
+<img src="/img/panda-waving.png" class="panda no-zoom" style="width: 130px;height: 115px;opacity: 0.8;margin-bottom: -4px;padding-bottom:0;position: fixed;bottom: 0;left: 0.5rem;z-index: 1;">
+
+## 🎨Theme
+
+[<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing" alt="ReadMe Card" class="no-zoom">](https://github.com/xugaoyi/vuepress-theme-vdoing)
+[<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing-doc" alt="ReadMe Card" class="no-zoom">](https://doc.xugaoyi.com/)
+
+本站主题是 [`Vdoing`](https://github.com/xugaoyi/vuepress-theme-vdoing)，这是一款简洁高效的VuePress 知识管理&博客 主题。旨在轻松打造一个`结构化`与`碎片化`并存的个人在线知识库&博客，让你的知识海洋像一本本书一样清晰易读。配合多维索引，让每一个知识点都可以快速定位！ [Github地址](https://github.com/xugaoyi/vuepress-theme-vdoing) | [在线vscode预览源码](https://github1s.com/xugaoyi/vuepress-theme-vdoing)
+
+## 赞助商
+> 进入以下链接注册一下，赞助商会为博主赞助一笔小费，感谢~
+
+<p align="center">
+<a href="http://apifox.cn/a103xugaoyi" target="_blank"><img src="https://jsd.cdn.zzko.cn/gh/xugaoyi/blog-gitalk-comment@master/img/Apifox-860x320.ic7tz1417sw.png" alt="赞助商" style="width: 400px;border-radius: 2px;"></a>
+</p>
+
+## 🐼Me
+web前端小学生
+
+### 技能
+* 熟悉 JavaScript、HTML、CSS、Vue、React 的拼写
+* 了解 Linux、windows、macOS 的开关机方式
+* 精通 Git 的 pull 和 push，并注册了 GitHub 帐号刷了一些 star
+
+<!-- 本人↓↓↓
+
+<img src='https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg' alt='本人照片' style="width:106px;"> -->
+
+## 前端学习
+<br/>
+<img src="https://open.weixin.qq.com/qr/code?username=gh_0cf4b813918c"  style="width:100px;" />
+
+关注公众号，回复`前端资源`，即可获取这些 [前端学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study)。
+
 ## :email: 联系
 
-- **WeChat or QQ**: <a :href="qqUrl" class='qq'>894072666</a>
-- **Email**:  <a href="mailto:894072666@qq.com">894072666@qq.com</a>
-- **GitHub**: <https://github.com/xugaoyi>
+- WeChat or QQ: <a :href="qqUrl" class='qq'>{{ QQ }}</a>
+- Email:  <a href="mailto:894072666@qq.com">894072666@qq.com</a>
+- GitHub: <https://github.com/xugaoyi>
+- Vdoing主题文档：<https://doc.xugaoyi.com>
+- Vdoing交流QQ群：694387113
 
 <script>
   export default {
     data(){
       return {
-        qqUrl: 'tencent://message/?uin=894072666&Site=&Menu=yes' 
+        QQ: '894072666',
+        qqUrl: `tencent://message/?uin=${this.QQ}&Site=&Menu=yes`
       }
     },
     mounted(){
       const flag =  navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
       if(flag){
-        this.qqUrl = 'mqqwpa://im/chat?chat_type=wpa&uin=894072666&version=1&src_type=web&web_src=oicqzone.com'
+        this.qqUrl = `mqqwpa://im/chat?chat_type=wpa&uin=${this.QQ}&version=1&src_type=web&web_src=oicqzone.com`
       }
     }
   }
-</script>           
+</script>