一下如何从零搭建这里先放上的官网链接(new)[1]

来快速搭建个人博客网上教程千千万,但总归都是零零散散的,没人会给你讲解得清清楚楚,所以我这里就手把手来讲解一下如何从零搭建启动好以后会自动打开网页,我们可以看到这样的画面了,可以说这个主题的脚手架已经帮我们做了很多工作了,页面也非常的漂亮,其对应的就是比较简约化的文档样式了,当然了这些都是脚手架帮我们处理好了的个导航栏按钮,但实际呢?配置的话也比较简单,模仿默认的配置去做就可以了:

前言

我相信很多人都想拥有自己的个人博客。现有的个人博客搭建框架有很多,比如 hexo , , 等,这里我选择快速搭建个人博客

网上教程成千上万,但都是零散的,没有人会解释清楚的,所以我在这里解释一下如何从零开始搭建。

这里是官网链接:(new)[1]

1一、准备工作

首先我们需要下载我们需要的所有东西,比如:node、git、

节点下载链接(新)[2]

git 下载链接(新)[3]

2二、安装脚手架

这里应该安装,不过是文档类型的页面,比较简单。我们肯定是想让我们的博客看起来更好看,所以这里有一个大佬做的主题——reco,其页面效果大致是这样的:

easyui分页栏放在底部_seo底部导航栏怎么写_cad底部命令栏

找一个随机路径,在终端输入这个命令:

// npm
npm install @vuepress-reco/theme-cli -g

下载完成后,输入命令初始化项目:

theme-cli init blog

初始化的时候会要求你填写一些信息,比如:博客名称、博客标题、博客描述..

您只需要回车即可跳过所有这些,您可以自己填写以下信息

项目全部初始化后,文件目录如下:

├── blog 
     ├── .vuepress      
     │   ├── public   // 存放静态资源
     │   │     ├── avatar.png  // 头像图片 
     │   │     ├── favicon.ico   // 网站icon图标
     │   │     ├── hero.png    // 我也不知道有啥用,删了也可以
     │   │     └── logo.png    // 网站导航栏左上角的logo图片
     │   │   
     │   └── config.js      // 配置文件,非常重要!!!  
     ├── blogs  // 存放文章,即.md文件
     │   ├── ...
     │   ├── ...
     │   └── ... 
     ├── docs     // 存放一些后续需要配置的文件,暂时不需要了解
     ├── .gitignore       // 提交git仓库时需要忽略的文件
     ├── package.json      // 管理包文件
     └── README.md        // 自动生成的,我们可以先不管

了解了文件目录结构后,我们需要启动项目看看,因为新生成的项目很多依赖包还没有安装,当前路径不在项目中,所以需要执行依次执行以下说明,制作一个启动项目

// 第一步,进到项目根目录中
cd blog

// 第二步,安装依赖包(这个过程很慢,需要等待)
npm install

// 第三步,等依赖包下完了以后再执行该指令启动项目
npm run dev

网页启动后会自动打开。我们可以看到这张照片。可以说这个主题的脚手架为我们做了很多工作,页面也很漂亮

easyui分页栏放在底部_seo底部导航栏怎么写_cad底部命令栏

3三、详细配置信息

这个页面上的所有东西都可以通过我们的配置文件来控制,也就是./.js,我们来看看它的具体配置信息是什么意思(这个很重要,因为如果你以后要改的话就页面必须在这里改,所以你必须非常熟悉每个属性的作用)

module.exports = {
  "title""",   
  "description""",
  "dest""public",
  "head": [
    [
      "link",
      {
        "rel""icon",
        "href""/favicon.ico"
      }
    ],
    [
      "meta",
      {
        "name""viewport",
        "content""width=device-width,initial-scale=1,user-scalable=no"
      }
    ]
  ],
  "theme""reco",
  "themeConfig": {
    "nav": [
      {
        "text""Home",
        "link""/",
        "icon""reco-home"
      },
      {
        "text""TimeLine",
        "link""/timeline/",
        "icon""reco-date"
      },
      {
        "text""Docs",
        "icon""reco-message",
        "items": [
          {
            "text""vuepress-reco",
            "link""/docs/theme-reco/"
          }
        ]
      },
      {
        "text""Contact",
        "icon""reco-message",
        "items": [
          {
            "text""GitHub",
            "link""https://github.com/recoluan",
            "icon""reco-github"
          }
        ]
      }
    ],
    "sidebar": {
      "/docs/theme-reco/": [
        "",
        "theme",
        "plugin",
        "api"
      ]
    },
    "type""blog",
    "blogConfig": {
      "category": {
        "location"2,
        "text""Category"
      },
      "tag": {
        "location"3,
        "text""Tag"
      }
    },
    "friendLink": [
      {
        "title""午后南杂",
        "desc""Enjoy when you can, and endure when you must.",
        "email""1156743527@qq.com",
        "link""https://www.recoluan.com"
      },
      {
        "title""vuepress-theme-reco",
        "desc""A simple and beautiful vuepress Blog & Doc theme.",
        "avatar""https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
        "link""https://vuepress-theme-reco.recoluan.com"
      }
    ],
    "logo""/logo.png",
    "search"true,
    "searchMaxSuggestions"10,
    "lastUpdated""Last Updated",
    "author""",
    "authorAvatar""/avatar.png",
    "record""xxxx",
    "startYear""2017"
  },
  "markdown": {
    "lineNumbers"true
  }
}

接下来我会按顺序解释各个属性的作用

(1)

这个属性代表博客的标题

让我们将值更改为 ,看看有什么变化

seo底部导航栏怎么写_cad底部命令栏_easyui分页栏放在底部

(2)

该属性表示有关网站的一些描述性信息

我们改变了这个网站的值是用来记录前端知识总结看看有什么变化

easyui分页栏放在底部_seo底部导航栏怎么写_cad底部命令栏

easyui分页栏放在底部_cad底部命令栏_seo底部导航栏怎么写

(3)目标

该属性表示项目打包后生成文件的目录

比如我们把dest的值改为./dist,那么当我们执行npm run打包文件的时候,会在当前根目录下生成一个dist文件夹,打包的项目文件就在这个文件夹

(4)头

该属性表示html文档的head标签中需要插入的其他标签

默认生成为:

"head": [  // 在head标签中生成以下标签
    [
      "link",    // 生成link标签
      {
        "rel""icon",    // rel属性值为icon
        "href""/favicon.ico"   // href属性值为 /favicon.ico
      }
    ],
    [
      "meta",      //生成meta标签
      { 
        "name""viewport",   // name属性值为viewport
        "content""width=device-width,initial-scale=1,user-scalable=no"  // content属性值为width=device-width,initial-scale=1,user-scalable=no
      }
    ]
]

当然我们也可以继续添加其他标签,比如:

"head": [  // 在head标签中生成以下标签
    ["link", { "rel""icon""href""/favicon.ico" }],
    ["meta", { "name""viewport""content""width=device-width,initial-scale=1,user-scalable=no" }],
    ["meta", { "name""keywords""content""前端,js,css" }],
    ['meta', { name'author'content'零一' }],
]

(5)

该属性表示当前项目使用的主题

这里我们使用–reco主题的脚手架,所以默认是reco,我们不需要修改,当然以后可以使用其他主题,可以参考官网

(6)

该属性代表主题的配置信息

cad底部命令栏_seo底部导航栏怎么写_easyui分页栏放在底部

这里有很多东西,慢慢说吧

1.导航

该属性表示导航栏的配置信息

默认生成的nav值如下:

"nav": [
      {   // 第一个导航按钮
        "text""Home",   //  按钮名称为 Home
        "link""/",      //  对应的跳转链接为  /
        "icon""reco-home"  // 按钮的前置图标为 reco-home
      },
      {   // 第二个导航按钮
        "text""TimeLine",     //  按钮名称为 TimeLine
        "link""/timeline/",  //  对应的跳转链接为  /timeline/
        "icon""reco-date"   // 按钮的前置图标为 reco-date
      },
      {   // 第三个导航按钮
        "text""Docs",    //  按钮名称为 Docs
        "icon""reco-message",  // 按钮的前置图标为 reco-message
        "items": [   // 该按钮的子菜单
          {   // 子菜单中的第一个导航按钮
            "text""vuepress-reco",
            "link""/docs/theme-reco/"
          }
        ]
      },
      {  // 第四个导航按钮 
        "text""Contact",   //  按钮名称为 Contact
        "icon""reco-message",  // 按钮的前置图标为 reco-message
        "items": [  // 该按钮的子菜单
          {    // 子菜单中的第一个导航按钮
            "text""GitHub",
            "link""https://github.com/recoluan",
            "icon""reco-github"
          }
        ]
      }
]

我已经在上面写了所有详细的注释

2.

该属性表示侧边栏的导航信息

默认生成为:

"sidebar": {
      "/docs/theme-reco/": [
        "",    // 空字符串对应的是 README.md
        "theme",  // 对应 theme.md
        "plugin",  // 对应plugin.md
        "api"    // 对应api.md
      ]
},

这个配置信息的意思是当路径为/docs/-reco/时,侧边栏会自动找到路径./docs/-reco/下的.md、.md、.md、api.md文件进行处理识别并生成侧边栏,如图:

seo底部导航栏怎么写_cad底部命令栏_easyui分页栏放在底部

侧边栏中的文字其实是识别md文件中的,比如.md文件对应的名字就是的值

---
title: theme
date2020-05-27
---

This is theme.

这是一种写法,其实还有另一种更复杂的写法,我们来看看

"sidebar": {
 "/docs/theme-reco/": [
        {
            title'一些文件',    // 标题信息
            collapsabletrue,   // 是否可折叠
            children: [        // 该块内容对应的所有链接
                "",    
                "theme",  
                "plugin"
                "api"    
            ]
        }
    ]
}

这个实现的效果其实和刚才差不多。如果有差异,可以看下图对比:

seo底部导航栏怎么写_easyui分页栏放在底部_cad底部命令栏

3.类型

该属性表示当前项的类型

默认是blog,也就是我们现在看到的样式。其实还有其他的值可以设置,比如docs,对应一个比较简化的文档样式。当然,这些都是帮助我们的脚手架。完成

4.

该属性表示导航栏的配置信息,由reco主题设置

不知道大家有没有注意到,刚刚设置nav导航栏信息的时候,导航栏按钮一共是4个,但实际上是什么?

实际上有 6 个,那么额外的两个是从哪里来的?其实是设置在

"blogConfig": {
      "category": {
        "location"2,     // 在导航栏中的位置在第二个
        "text""Category"
      },
      "tag": {
        "location"3,   // 在导航栏中的位置在第三个
        "text""Tag"
      }
},

这两个是内置设置,所以就这样配置,不过我觉得没必要,大家可以自己选择

5.

该属性用于设置好友链

网站上的具体位置如下图:

easyui分页栏放在底部_seo底部导航栏怎么写_cad底部命令栏

配置比较简单,模仿默认配置即可:

"friendLink": [
      {
        "title""午后南杂",
        "desc""Enjoy when you can, and endure when you must.",
        "email""1156743527@qq.com",
        "link""https://www.recoluan.com"
      },
      {
        "title""vuepress-theme-reco",
        "desc""A simple and beautiful vuepress Blog & Doc theme.",
        "avatar""https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
        "link""https://vuepress-theme-reco.recoluan.com"
      }
],

6.徽标

该属性表示导航栏最左侧的logo图片,如下图所示

easyui分页栏放在底部_seo底部导航栏怎么写_cad底部命令栏

写入这个值时的根路径为 ,即/logo.png表示下的logo.png

7.

该属性表示是否有搜索功能

8.

这个属性的官网没有过多解释,所以不知道是什么,所以暂时不说了

9.

此属性表示每篇文章底部显示的“最后更新”副本

如下图:

easyui分页栏放在底部_cad底部命令栏_seo底部导航栏怎么写

10.

该属性代表作者姓名,将在每篇文章的作者署名中使用

11.

该属性代表作者头像,路径规则与logo相同。头像的显示位置如下图所示:

cad底部命令栏_seo底部导航栏怎么写_easyui分页栏放在底部

12. && && &&

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论