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

2022-01-03 VuePress

0

哈喽,大家好 我是xy👨🏻‍💻。 从去年年中开始正式写公众号,到现在有半年之久了,其实写文章的过程也是不断的复盘过程,能够发现自己收获了哪些以及哪些地方的不足,于是在2022年,打算搭建一个博客,用来记录自己在未来一年的学习历程,同时也给自己立了几个Flag,希望自己在2022年更加努力一点。以下就手把手教大家搭建一个属于自己的博客系统吧 💪

# 技术选型

在搭建博客之前,了解到市面上搭建博客的技术方案有很多,比如 WordPressheoxdumivuepressvitepress...

经过对比,最终选择了 vuepress,那么我们来看下 vuepress 有哪些优势:

  • 简洁至上:以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
  • Vue 驱动:享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。
  • 高性能:VuePress 会为每个页面预渲染生成静态的 HTML,同时,每个页面被加载的时候,将作为 SPA 运行。
  • 生态:强大的生态,基于 vuepress 的各种插件以及主题配置,可以丰富你的博客系统

# 博客初始化

  1. 新建一个文件夹 blogcd 进入文件夹下,使用你喜欢的包管理器进行初始化
# yarn
yarn init
# npm
npm init
  1. 安装 vuepress
# yarn
yarn add -D vuepress
# npm
npm install -D vuepress
  1. blog 下创建文件夹 docsVuePress 会以 docs 为文档根目录,docs 下创建文件 README.md将会默认为博客的主页

  1. package.json 中添加一些 scripts,用于启动和打包:
"scripts": {
    "dev": "vuepress dev docs .",
    "build": "vuepress build docs ."
  },
  1. 在本地启动服务器
yarn dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

# 基础配置

增加配置文件标题配置等

  1. docs 文件夹下增加 .vuepress 文件夹

  1. .vuepress 文件夹下添加 config.js,配置网站的标题描述

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

# 主题配置

主题选用比较流行的 vuepress-theme-reco

  1. 安装
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
  1. 使用
// .vuepress/config.js
module.exports = {
  title: '前端开发爱好者',
  description: '专注分享前端相关技术文章、设计模式、数据结构、算法等'
  theme: 'reco'
}
  1. 重新启动查看效果

发现启动页面增加的吃豆人的loading效果以及主页面导航栏增加了主题切换功能

# 添加导航栏和侧边栏

# 导航栏配置

config.js中增加配置 themeConfig=> nav,具体配置如下:

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",
      },
    ],
  }
}

icon 直接使用的 vuepress-theme-reco 自带的一些配置,具体配置可以查看官方:https://vuepress-theme-reco.recoluan.com/views/1.x/configJs.html

效果如下展示:

到这一步导航栏基本配置完成,但是点击链接会发现 404,这个时候直接去新建对应的文件就行了,link 对应的其实就是 docs 文件所在的目录

image

把我之前准备好的 markdown 文件直接拷贝过来:

重新启动项目,点击 学习路线

image

# 侧边栏配置

config.js中增加配置 themeConfig=> sidebarsidebarnav平级,具体配置如下:

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

注意目录要一一对应,想在哪个导航下增加子菜单sidebar中的key就配置哪一个

image

重新启动,点击导航中的 设计模式 :

image

# 首页配置

  1. 直接修改 docs 下的 README.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>

注意背景图片logo 图片,我是直接放在项目中的;在 .vuepress 下新建一个 public 文件夹,用来存放静态文件:

image

  1. 修改 config.js 文件,在themeConfig增加一些自定义信息配置
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",
  }
  1. 重新启动查看首页效果

到这里一个博客基本上配置完成了,但是细心的同学应该会发现,部分地方展示的是英文,修改 config.js 文件增加配置:

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

# 插件配置

vuepress 强大的生态,有着各种丰富的插件可以选择,丰富你的博客,这里给大家推荐几款花里胡哨的插件,当然了,官方也给大家推荐了很多插件,具体自行查看官方文档

  1. vuepress 樱花插件
yarn add vuepress-plugin-sakura
// 只要把这个放进 config的plugins中就可以了 有木有很简单
 ["sakura", {
        num: 20,  // 默认数量
        show: true, //  是否显示
        zIndex: -1,   // 层级
        img: {
          replace: false,  // false 默认图 true 换图 需要填写httpUrl地址
          httpUrl: '...'     // 绝对路径
        }
    }]
  1. vuepress 看板娘插件
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",
        },
      },
    ],
  1. vuepress 留言板插件
yarn add @vuepress-reco/comments
 [
      "@vuepress-reco/comments",
      {
        solution: "valine",
        options: {
          appId: "",
          appKey: "",
        },
      },
    ],

appIdappKey的获取直接到leancloud中申请获取:https://console.leancloud.cn/login?from=%2Fapps

  1. vuepress 动态标题
yarn add vuepress-plugin-dynamic-title
 [
      "dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "(/≧▽≦/)咦!又好了!",
        hideIcon: "/failure.ico",
        hideText: "(●—●)喔哟,崩溃啦!",
        recoverTime: 2000
      }
    ]

还有很多插件:

官方插件:https://vuepress-theme-reco.recoluan.com/views/plugins/

插件广场:https://vuepress-theme-reco.recoluan.com/views/other/recommend.html

# 几个问题

# 1.关于图片

虽然图片可以直接放在public文件夹下,但是这样文章多了,打包的资源肯定就会很大,于是我的博客里使用了开源的图床sm.sm. 一开始使用的 gitee 搭建的图床,浏览器端展示没问题,但是在ios微信内置浏览器打开图片无法展示,所以就直接使用 sm.sm

# 2.首页文章列表和文中的不一样

这里是自己修改了主题的源码文件,然后通过使用patch-package对源码进行补丁处理,使得每次重新安装依赖不用再次修改源码

当然了,具体如何修改,可以加我文末的微信,我肯定不会吝啬的分享给你的

# 3.部署的问题

部署我是直接使用的 giteePages ,方便快捷,也省去了购买服务器的钱,当然了,部署的方式有很多,这个根据自己的实际情况选择。

config.js 增加以下配置:

module.exports = {
    // base 设置的是你的仓库名称
    base:'/blog/',
}

# Flag

在博客的导航栏上,比较重要的就是 设计模式,数据结构,算法;这也是我搭建这个博客的初衷,希望自己在2022年能够多去研究下这些,同时也给自己设定一个小目标,在2022年结尾,希望在每个类的下面增加20篇文章,也就是一共60篇。当然了,想要和我一起学习的小伙伴,可以加我文末的微信,2022,我们一起冲💪💪💪

最后给大家奉上我的博客地址吧

地址:https://xushanpei.gitee.io/blog/

# 写在最后

公众号前端开发爱好者 专注分享 web 前端相关技术文章视频教程资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友,我会第一时间和你分享前端行业趋势面试资源学习途径等等。

user

关注公众号后,在首页:

  • 回复面试题,获取最新大厂面试资料。
  • 回复简历,获取 3200 套 简历模板。
  • 回复React实战,获取 React 最新实战教程。
  • 回复Vue实战,获取 Vue 最新实战教程。
  • 回复ts,获取 TypeAcript 精讲课程。
  • 回复vite,获取 精讲课程。
  • 回复uniapp,获取 uniapp 精讲课程。
  • 回复js书籍,获取 js 进阶 必看书籍。
  • 回复Node,获取 Nodejs+koa2 实战教程。
  • 回复数据结构算法,获取 数据结构算法 教程。
  • 回复架构师,获取 架构师学习资源教程。
  • 更多教程资源应用尽有,欢迎关注获取
Last Updated: 2022/1/11 上午11:46:13