zoukankan      html  css  js  c++  java
  • 使用VuePress快速搭建个人博客


    theme: channing-cyan

    前言

    看见大部分前端人都有自己博客,骤然发现自己还没有自己的博客,这可不行!别人有的 我也要有! ps:我有自己的域名和服务器。本文详细说了自己如何快速使用VuePress快速搭建个人博客,看完不会打我(开玩笑的,大家不用看也是会的,但是可以帮我指出不足)。

    技术选用VuePress
    ,进入VuePress官网,快速上手。

    image.png

    上手VuePress

    1.创建并进入一个新目录

    2.使用你喜欢的包管理器进行初始化

    image.png

    3.将 VuePress 安装为本地依赖

    yarn add -D vuepress

    image.png

    4.创建你的第一篇文档

    image.png

    5.在package.json增加运行和打包命令

    image.png

    6.本地热编译

    yarn docs:dev

    image.png

    到此你已经上手了VuePress,然后开始看一些配置

    image.png

    配置问题

    发现神三元博客源码和预览地址,感觉他的博客模板做为我的第一版很合适,那就直接套用,然后修改里面的配置和删掉他的博文放上直接的博文。

    先附上我修改后的源码地址:

    项目讲解

    image.png

    • .vuepress(博客的配置,这是重点)
    • blogs(放博文的地方)
    • node_modules(依赖包)
    • public(执行打包后才会有的部署包)

    那很明显重点说.vuepress配置,说这之前一笔盖过blogs文件夹,里面的文件放一些你自己的博文,至于怎么分层按你自己喜好,比如我分为算法、css、js、html等等

    image.png

    值得注意一点,md头文件配置,categories分类、tags标签,sidebar这个设置和等等讲的路由配置有关,没有的话路由配置需要指明,这里写着auto,那路由配置就可以偷懒了,这里的date和时间线插件挂钩不能配错,有格式要求

    ---
    title: github的pull request操作
    date: 2020-08-22
    categories:
     - git
    tags:
     - git
    sidebar: 'auto'
    ---
    

    .vuepress配置

    .vuepress配置感觉比较重要,拿出来单独讲。

    config.js(基本配置)

    基本配置详情见官网,我这只说一些我用上的配置属性。想了解更多请看官网
    image.png

    • title:网站的标题,它将会被用作所有页面标题的前缀,同时,默认主题下,它将显示在导航栏(navbar)上。
    • description:网站的描述,它将会以 标签渲染到当前页面的 HTML 中。
    • dest:打包输出目录
    • head:比如我这配置了meta和标题logo

    image.png

    • plugins 插件
    • markdown的lineNumbers:是否显示行号
    • themeConfig:这个又是超多配置,包含各种主题菜单等配置

    image.png

    我这里选用了reco主题,等等再进行说明

    • 头像配置在这

    image.png

    siderbar.js(路由配置)

    可以看见siderbar.js这里是在config中引用了
    image.png

    路由配置

    其实这里代码很简单 大家都能看懂,和vue的router很像。
    image.png
    我这里采用整个模块声明配置md中的头部声明sidebar: 'auto',如果你不想使用懒人办法,那可以如下具体去配置 但是路径要对应

    image.png
    配置就说这 详情看官网更详情的配置插件详情

    reco

    image.png

    详细介绍在这里vuepress-theme-reco,我也是基于这个主题快速搭建上手,别人造好的轮子能用就用(嘻嘻!感谢开源!)

    上面还有很多案例,都很棒,有的主题胡里花哨(真的美!),比如山海以南摸鱼人这些真的美,值得鉴赏和借鉴(copy)!!!

    image.png

    自己搭好的博客介绍一下

    上面说了那么多怎么搭,那我该介绍一下自己博客网站了,看看成果

    • 加载页

    image.png

    • 首页

    image.png

    • 搜索和目录

    image.png

    • 时间线

    image.png

    展望

    打包部署那些很简单,我这就不说了,如果有要问我的也是欢迎留言。

    昨天说留言板今天安排,源码已更新。

    跳转链接留言板实现

    个人从0到部署也花了两小时时间,很多官方文档都是基于VuePress,但是这仅仅是开始,接下来要做的就是美化博客界面和增加一些功能,比如留言板(这肯定要加的)...

    扩展点内容

    读者留言需要博客模板去搞定自己的博客,那我提供一个简易模板,很高兴能帮到你。
    ↓↓↓需要模板模板的话,那看这里

    这个模板clone下来,完全是开箱即用,作者名字和图片的logo换成自己喜欢的,然后就是往里增加你的博客。

    结束语

    看完这篇,快速上手搭建博客绝对轻轻松松。从12点到现在12.40分写这博文,午饭还没吃,
    就到这了,后面有补充再编辑。求点赞!求点赞!求点赞!

    如果你觉得不错求点赞!求点赞!求点赞!

    如果你觉得不错求点赞!求点赞!求点赞!

    如果你觉得不错求点赞!求点赞!求点赞!

  • 相关阅读:
    codevs2574 波兰表达式
    绿书模拟day10 单词前缀
    codevs2171 棋盘覆盖
    noip2008 双栈排序
    图论总结复习
    noip2010 关押罪犯
    flask使用geventwebsocket完成小型聊天系统
    MongoDB
    flask基础内容总览
    flask蓝图,cbv,python中的redis操作
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/14763564.html
Copyright © 2011-2022 走看看