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

点击上方“技术漫谈”,选择“设为星标”来快速搭建个人博客网上教程千千万,但总归都是零零散散的,没人会给你讲解得清清楚楚,所以我这里就手把手来讲解一下如何从零搭建启动好以后会自动打开网页,我们可以看到这样的画面了,可以说这个主题的脚手架已经帮我们做了很多工作了,页面也非常的漂亮该属性表示的是侧边栏的导航信息个导航栏按钮,但实际呢?

点击上方的“Tech Talk”并选择“设为明星”

第一时间关注技术干货!

前言

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

网上教程成千上万,但总是零散的,没有人会向你解释清楚,所以在这里我将解释如何从头开始构建。

官网链接先放这里:(新)[1]

1一、准备

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

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

git 下载链接(新)[3]

2二、安装脚手架

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

安卓底部栏图标颜色_iphone底部栏怎么设置透明_seo底部导航栏怎么写

只需找到一个路径并在终端中输入此命令:

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

等待下载后,输入命令初始化项目:

theme-cli init

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

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

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

├── 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

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

iphone底部栏怎么设置透明_安卓底部栏图标颜色_seo底部导航栏怎么写

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底部导航栏怎么写_iphone底部栏怎么设置透明

(2)

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

我们把这个值改成这个网站记录前端知识总结看看有什么变化

安卓底部栏图标颜色_seo底部导航栏怎么写_iphone底部栏怎么设置透明

iphone底部栏怎么设置透明_安卓底部栏图标颜色_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)

iphone底部栏怎么设置透明_seo底部导航栏怎么写_安卓底部栏图标颜色

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

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

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文件进行识别生成侧边栏,如图:

安卓底部栏图标颜色_iphone底部栏怎么设置透明_seo底部导航栏怎么写

侧边栏中的文本实际上标识了 md 文件。例如,.md 文件对应的名称是

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

This is theme.

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

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

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

seo底部导航栏怎么写_iphone底部栏怎么设置透明_安卓底部栏图标颜色

3. 类型

该属性表示当前项的类型

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

4.

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

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

实际上有 6 个,那么另外两个是从哪里来的呢?事实上,它设置在

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

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

5.

该属性用于设置好友链

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

iphone底部栏怎么设置透明_安卓底部栏图标颜色_seo底部导航栏怎么写

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

"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图片,如下图所示

安卓底部栏图标颜色_seo底部导航栏怎么写_iphone底部栏怎么设置透明

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

7.

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

8.

这个楼盘官网没有过多解释,所以不知道是什么东西,暂且不说。

9.

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

如下所示:

安卓底部栏图标颜色_iphone底部栏怎么设置透明_seo底部导航栏怎么写

10.

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

11.

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

安卓底部栏图标颜色_iphone底部栏怎么设置透明_seo底部导航栏怎么写

12. && && &&

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

发表评论

登录后才能评论