个人博客搭建过程

最新推荐文章于 2022-10-07 13:49:52 发布

kjs--

最新推荐文章于 2022-10-07 13:49:52 发布

阅读量263

点赞数 1

分类专栏：前端博客文章标签： vue

本文链接：https://blog.csdn.net/qq_43157612/article/details/116111710

版权

前端同时被 2 个专栏收录

147 篇文章 3 订阅

订阅专栏

博客

2 篇文章 0 订阅

订阅专栏

个人博客搭建过程

概述

本文主要简单记录一下本人使用vuepress搭建个人博客的过程
一个 VuePress 网站是一个由Vue、Vue Router和 webpack驱动的单页应用。

项目从零搭建

新建一个文件夹打开命令行输入指令构建项目
使用的是vuepress-theme-reco主题

npx @vuepress-reco/theme-cli init my-blog

根据交互完成博客标题描述作者名称的填写
等待项目搭建完毕
cd进入所在项目使用指令npm iinstall下载项目所需依赖

在这里插入图片描述

博客配置简介

这里主要对个人搭建博客过程中所遇到的配置作个简单的记录
引用官方文档里的一句话VuePress 遵循 “约定优于配置” 的原则

README.md文件

配置名称	描述
home	boolean 是否显示首页
heroText	标题
tagline	副标题
bgImage	首页背景图(使用绝对路径)

本次开发个人博客过程中所用到的配置项主要为以上几项
示例:

---
home: true
heroText: 趁年轻，努力吧，别让自己太后悔。
tagline:  Try your best when you are young.Never regret
# heroImage: /hero.png
# heroImageStyle: {
#   maxWidth: '600px',
#   width: '100%',
#   display: block,
#   margin: '9rem auto 2rem',
#   background: '#ccc',
#   borderRadius: '1rem',
# }
bgImage: /bg.jpg
# bgImageStyle: {
#   height: '450px'
# }
isShowTitleInHome: false
actionText: Guide
actionLink: /views/other/guide
features:
- title: Yesterday
  details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
  details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
  details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---

config文件

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象
一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、侧边栏（sidebar）和首页（homepage）等，

配置名称	描述
title	网站的标题
description	网站的描述
dest	指定 vuepress build 的输出目录
head	注入到当前页面的 HTML`<head>` 中的标签
locales	提供多语言支持的语言配置(配成中文)
theme	主题
themeConfig	为当前的主题提供一些配置
plugins	插件配置
markdown	markdown配置

themeConfig 主题配置中的一些配置项	描述
nav	导航栏
subSidebar	在所有页面中启用自动生成子侧边栏
mode	dark 暗色模式，light 亮色模式
modePicker	false 不显示模式调节按钮
sidebar	侧边栏
logo	reco主题首页左上角logo
search	搜索功能
author	reco主题右侧作者名称
authorAvatar	reco主题右侧作者头像
startYear	reco主题博客首页底部开始创作时间

补充

以下内容主要对config文件的一些补充

1.locales配置首页语言为中文

  // 控制首页  语言 中文
  "locales": {
    "/": {
      "lang": 'zh-CN'
    }
  },

2.plugins配置插件

在本次vuepress构建个人博客中使用到的插件有如下几个

动态网站标题插件

npm i vuepress-plugin-dynamic-title -D

Vuepress 中添加美丽的丝带插件

npm install vuepress-plugin-ribbon-animation -D

复制代码插件

npm install vuepress-plugin-code-copy

配置前需要在项目中安装相关插件
配置如下

    // 动态网站标题
    ["dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "欢迎光临(/≧▽≦/)",
        hideIcon: "/cry.ico",
        hideText: "呜呜别走(●—●)",
        recoverTime: 2000
      }],
    // Vuepress 中添加美丽的丝带！
    ["ribbon-animation", {
      size: 90,   // 默认数据
      opacity: 0.3,  //  透明度
      zIndex: -1,   //  层级
      opt: {
        // 色带HSL饱和度
        colorSaturation: "80%",
        // 色带HSL亮度量
        colorBrightness: "60%",
        // 带状颜色不透明度
        colorAlpha: 0.65,
        // 在HSL颜色空间中循环显示颜色的速度有多快
        colorCycleSpeed: 6,
        // 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
        verticalPosition: "center",
        // 到达屏幕另一侧的速度有多快
        horizontalSpeed: 180,
        // 在任何给定时间，屏幕上会保留多少条带
        ribbonCount: 5,
        // 添加笔划以及色带填充颜色
        strokeSize: 0,
        // 通过页面滚动上的因子垂直移动色带
        parallaxAmount: -0.5,
        // 随着时间的推移，为每个功能区添加动画效果
        animateSections: true
      },
      ribbonShow: true, //  点击彩带  true显示  false为不显示
      ribbonAnimationShow: true  // 滑动彩带
    }],
    //复制代码 先安装在配置 
    ['vuepress-plugin-code-copy', true],

kjs--

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
个人博客搭建过程

个人博客搭建过程概述本文主要简单介绍一下本人使用vuepress搭建个人博客的过程一个 VuePress 网站是一个由Vue、Vue Router和 webpack驱动的单页应用。项目从零搭建新建一个文件夹打开命令行输入指令构建项目使用的是vuepress-theme-reco主题npx @vuepress-reco/theme-cli init my-blog根据交互完成博客标题描述作者名称的填写等待项目搭建完毕cd进入所在项目使用指令npm iinstall下载项目
复制链接

扫一扫