不会前端，怎么快速打造属于自己的个人博客？

注意： .vuepress 目录是项目运行后自动产生的，而图片这种静态资源默认是从.vuepress/public下获取的，所以我们需要在.vuepress目录下新建一个public文件夹，这里为了方便管理，我在public下又新建了一个images文件夹专门用来放图片，所以可以看到我的图片路径是/images/*****

顶部配置

需要在.vuepress目录下新增一个config.ts文件，内容如下：

import { defineUserConfig,defaultTheme } from 'vuepress'
// 顶部导航栏的搜索框 需要install这个依赖  npm i -D @vuepress/plugin-search@next
import { searchPlugin } from '@vuepress/plugin-search'
export default defineUserConfig({
    // 插件配置  这里配置了那个搜索框
    plugins:[
        searchPlugin({
            locales: {
                '/': {
                    placeholder: 'Search',
                },
                '/zh/': {
                    placeholder: '搜索',
                },
            },
            // 排除首页
            isSearchable: (page) => page.path !== '/',
        }),
    ],
    // 打包后html内部资源访问路径
    base:'./',
    // 打包后的文件放哪
    dest:"dist/",
    lang: 'zh-CN',
    // 标题
    title: 'ReturnAC',
    description: '回归实践,才是最好的提升',
    // 头部配置
    head: [['link', { rel: 'icon', href: '/images/logo.png' }],
    ],
    //新增导航条的配置
    theme: defaultTheme({
        // tab栏的图标; 图片 / 会自动去public文件夹里找图片
        logo: '/images/logo.png',
        // 顶部导航条
        navbar: [
            {
                text: '首页',
                link: '/',
            },{
                text: '全局导航',
                link: '/'
            },
            {
                text: 'JAVA',
                link: '/'
            },
            {
                text: '算法',
                link: '/',
            },
            {
                text: '框架|中间件',
                link: '/'
            },
        ],
    }),
})

这时候，你重启一下项目，就可以看到效果如下：

顶部导航栏路由配置

为了与首页区别，也为了让目录结构更有层次感，我们就在docs下新建一个pages文件夹，用来放其他md文件，如Test1.md、Test2.md、Test3.md

上面的顶部导航需要点击跳转，就需要配置link 路径，也就是md文件的相对路径：

此时我们在页面上点击"全局导航"就能跳转到Test1页面了：

如果需要配置下拉，就需要在配置文件中配置children属性：

就可以看到导航下面出来了子路由了

注意：这个link 如果配成"/" 就会默认找docs下的index.md，如果配成"/pages/" 就会默认找/docs/pages/下的index.md

侧边导航栏配置

默认情况下，打开一个md文件页面，左边是默认展开的，可以设置成不展开

# config.ts 里面的theme: defaultTheme 下面加上
theme: defaultTheme({
  sidebar: false
})

展开的情况下，左边默认就是md里面的一二级目录

这里情况很多，我这里只列举最常见的一种，就是顶部导航和侧边栏联动，等于说顶部是一个大归类的标题，而侧边栏则是对应的小标题归类，小标题内则是你的文章，这种需要怎么配置呢？如下：

sidebar:{
    '/pages/': [
        {
            text:"小标题1",
            collapsible:true,
            // 当然标题也可以配置链接，看你需要
            // link:'',
            children:[
                '/pages/Test1.md',
                '/pages/Test2.md',
                {
                    text: '小标题1内嵌',
                    children: [
                        '/pages/Test2.md',
                        '/pages/Test3.md',
                    ],
                },
            ]
        },
        {
            text:"小标题2",
            collapsible:true,
            children:[
                '/pages/Test1.md',
                '/pages/Test2.md'
            ]
        },
    ]
}

整体结构(需要注意顶部导航的跳转)：

页面效果如下（点击"全局导航"）：

三、打包部署

照着咱们的配置，运行build后，应该会在项目目录下生成一个dist文件夹，这个就是纯静态页面的文件夹了，我们只需要把这个文件夹丢到nginx的html目录下，然后配置一下nginx的conf文件就可以了

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html/dist;
            index  index.html index.htm;
        }
    
        location /dist {
            root   html/dist;
            index  index.html index.htm;
        }
    }
}

这时候启动nginx访问就可以看到我们的网站啦

四、数据统计

做一个博客肯定需要统计一下页面访问量啦是不是？网上基本都是需要用第三方如：百度统计、谷歌统计啥的属于静态网页文件的是，难道不能自己统计吗？打开页面访问个后端接口有多难？

对于一个不怎么懂前端的来说还真挺麻烦的，而且用的还是vuepress这种高度内聚的生成类框架，想加点自己的逻辑处理真蛋疼属于静态网页文件的是，主要用的还是vuepress2.0版本，网上资料也不多；不过这能放弃吗？虽然用百度统计这类的确实简单也香，但我还是有自己的原则，于是又看了一遍文档，发现有个组件插槽替换的拓展点，这时候我就想我没能力改写你默认主题，难道我就不能替换个插槽然后加入自己的逻辑吗？开搞！！

插槽自定义

在.vuepress下新建一个layouts文件夹，新建一个Layout.vue文件，内容如下：

插槽配置

.vuepress下新建一个client.ts文件，内容如下：

import { defineClientConfig } from '@vuepress/client'
import Layout from './layouts/Layout.vue'
export default defineClientConfig({
    layouts: {
        Layout,
    },
})

整体结构

页面效果

url我注释了，自己搞个后端服务，用自己的url就好了

好啦到这就结束啦，以后改动了，自动部署啥的，就不用我教了吧，自己研究一下吧，后续我可能会搞成动静结合的效果，毕竟纯静态页面局限性太大了

项目地址

本项目demo地址：

已上线的个人博客：