2022年的Flag从搭建博客开始，设计模式,数据结构,算法汇总【手摸手系列】

# yarn
yarn init
# npm
npm init

# yarn
yarn add -D vuepress
# npm
npm install -D vuepress

"scripts": {
    "dev": "vuepress dev docs .",
    "build": "vuepress build docs ."
  },

yarn dev

module.exports = {
  title: '前端开发爱好者',
  description: '专注分享前端相关技术文章、设计模式、数据结构、算法等'
}

npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco

// .vuepress/config.js
module.exports = {
  title: '前端开发爱好者',
  description: '专注分享前端相关技术文章、设计模式、数据结构、算法等'
  theme: 'reco'
}

module.exports = {
  title: '前端开发爱好者',
  description: '专注分享前端相关技术文章、设计模式、数据结构、算法等',
  theme: 'reco',
  themeConfig: {
    nav: [{
        text: "首页",
        link: "/",
        icon: "reco-home",
      },
      {
        text: "设计模式",
        link: "/DesignPattern/index.md",
        icon: "reco-other",
      },
      {
        text: "数据结构",
        link: "/DataStructure/index.md",
        icon: "reco-document",
      },
      {
        text: "算法",
        link: "/Algorithm/index.md",
        icon: "reco-coding",
      },
      {
        text: "学习路线",
        link: "/Studly/index",
        icon: "reco-lock",
      },
      {
        text: "掘金",
        link: "https://juejin.cn/user/1116759545088190/posts",
        icon: "reco-juejin",
      },
      {
        text: "CSDN",
        link: "https://blog.csdn.net/qq_39398332",
        icon: "reco-csdn",
      },
      {
        text: "关于我",
        link: "/AboutMe/index.md",
        icon: "reco-account",
      },
    ],
  }
}

sidebar: {
      "/DesignPattern": [{
        title: "设计模式",
        collapsable: true,
        children: [{
          title: "工厂模式",
          path: "/DesignPattern/factory.md"
        }],
      }, ],
    },

---
home: true
heroText: 前端开发爱好者
tagline: '专注分享前端相关技术文章、设计模式、数据结构、算法等'
heroTextStyle: {
  color: 'red'
}
heroImage: /images/logo.jpg
bgImage: /images/homeBg.jpg
bgImageStyle: {
  height: calc(100vh - 57px),
  # width: '100vw'
}
heroImageStyle: {
  maxHeight: '180px',
  display: block,
  margin: '2rem auto 1.5rem',
  borderRadius: '50%',
  boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
isShowTitleInHome: false
---
<style>
.anchor-down {
  display: block;
  margin: 12rem auto 0;
  bottom: 45px;
  width: 20px;
  height: 20px;
  font-size: 34px;
  text-align: center;
  animation: bounce-in 2s 2s infinite;
  position: absolute;
  left: 50%;
  bottom: 20%;
  margin-left: -10px;
  cursor: pointer;
}
@-webkit-keyframes bounce-in{
  0%{transform:translateY(0)}
  20%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
  80%{transform:translateY(0)}
  to{transform:translateY(0)}
}
.anchor-down::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  bottom: 10px;
}
.anchor-down::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
}
.hero{
  z-index: 0;
  color: #FFF
}
</style>
<script>
export default {
  mounted () {
    const ifJanchor = document.getElementById("pointDown");
    ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
    let a = document.createElement('a');
    a.id = 'pointDown';
    a.className = 'anchor-down';
    document.getElementsByClassName('hero')[0].append(a);
    let targetA = document.getElementById("pointDown");
    targetA.addEventListener('click', e => { // 添加点击事件
      this.scrollFn();
    })
  },
  methods: {
    scrollFn() {
      const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
      console.log(windowH)
      document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
    }
  }
}
</script>

themeConfig: {
    logo: "/images/logo.jpg",
    type: "blog",
    authorAvatar: "/images/logo.jpg",
    author: 'xy',
    search: true,
    searchMaxSuggestions: 10,
    lastUpdated: "Last Updated",
    record: "苏ICP备88888888号-8",
    startYear: "2021",
  }

locales: {
    "/": {
      lang: "zh-CN",
    },
  },

yarn add vuepress-plugin-sakura

// 只要把这个放进 config的plugins中就可以了 有木有很简单
 ["sakura", {
        num: 20,  // 默认数量
        show: true, //  是否显示
        zIndex: -1,   // 层级
        img: {
          replace: false,  // false 默认图 true 换图 需要填写httpUrl地址
          httpUrl: '...'     // 绝对路径
        }
    }]

yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang

[
      "@vuepress-reco/vuepress-plugin-kan-ban-niang",
      {
        theme: ["blackCat"],
        clean: true,
        modelStyle: {
          position: "fixed",
          right: "65px",
          bottom: "0px",
          zIndex: 99999,
          pointerEvents: "none",
        },
      },
    ],

yarn add @vuepress-reco/comments

[
      "@vuepress-reco/comments",
      {
        solution: "valine",
        options: {
          appId: "",
          appKey: "",
        },
      },
    ],

yarn add vuepress-plugin-dynamic-title

[
      "dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "(/≧▽≦/)咦！又好了！",
        hideIcon: "/failure.ico",
        hideText: "(●—●)喔哟，崩溃啦！",
        recoverTime: 2000
      }
    ]