hexo博客框架+next主题的初步使用

在这里插入图片描述

前言

本教程是在博主完成配置并正确运行后才进行编写的,所以并没有配置以及运行过程的截图,本教程的执行环境是linux的centos版本

了解hexo博客框架

字面意思,博客框架就是给了你一个博客的架子,然后你自己在根据你自己的情况或者喜好进行修改定制(注意,这里的架子并不是指给你一个静态页面然后你自己往里面写代码扣数据加数据),hexo提供了一整套标准的博客网站应该具备的所有功能,具体可通过修改配置文件或者输入相应的指令进行更改,当然,具体的可以去看官方文档(手动滑稽)

安装hexo需要的环境

安装该框架非常简单,但需要先安装node.js和git。

安装node.js(v12.13.1)

首先百度nodejs的官网,然后找到下载页面
在这里插入图片描述
下载得到的文件后缀为tar.xz,注意别下错了,得到文件后进行解压,注意这里解压的是xz文件,所以不能使用tar -zxvf

tar -xvf node-v12.13.1-linux-x64.tar.xz

然后删除压缩包,当然,你删不删都无所谓
因为采用的是非安装包安装的形式,所以需要手动配置环境变量

首先找到linux里的profile文件,然后在文件里随便一个位置加入一下配置

export NODE_HOME=/你nodejs解压的根目录
export PATH=$PATH:$NODE_HOME/bin 
export NODE_PATH=$NODE_HOME/lib/node_modules

完成后记得执行以下语句进行提交

source 你进行修改后的profile文件

最后检查你是否安装成功

node -v
npm -v

如果出现版本号则表示安装成功(注意上面两个指令都要执行)
至此nodejs的安装结束,当然,你也可以选择安装包的形式进行安装

安装git

安装git主要是为了能够将你的hexo博客提交到GitHub上,如果你了解git pages,那么你会非常happy
安装git首先执行以下指令

sudo yum install git-core

然后就没有然后了,恭喜你,完成了git的安装

开始安装hexo

执行

npm install -g hexo-cli

安装完毕

启动hexo

安装成功后,你需要创建一个用来存储你的博客网站的文件夹,然后进到这个文件夹里执行以下指令

hexo init
npm install

执行完成后,文件夹内的结构如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

至此,博客框架安装完成,你可以输入以下指令来启动hexo

hexo clean

这是清除hexo在linux上的缓存

hexo s

启动hexo服务
ok,大功告成
你可以输入127.0.0.1:4000来测试网站,正常情况下你会得到以下画面:

在这里插入图片描述

配置hexo

如果上述流程都没有问题,那么你已经成功获得了一个属于你自己的博客网站模板了,接下来就是对这个模板进行修改或者说定制了,是不是有点小兴奋?好的,就让我们开始吧

站点配置文件和主题配置文件

hexo框架有两个配置文件,下面进行操作的都是hexo的站点配置文件,网站的配置文件顾名思义,就是对网站的某些数值或者功能进行配置,以达到个性化定制的结果(当然,这个定制化程度并不是太深,更多的是对标题,所属,字体等一些必要的地方进行填充)
首先,你需要进入hexo的根目录,进入_config.yml文件中

vim _config.yml

yml文件的格式为值键对,并且字段与值之间需要用空格隔开(yml文件使用空格,空行来表现层次关系),所以你可以看到诸如title,subtitle,description,keywords,author,timezone等字段,你也看到了,数量很多,所以这里就不一一举例,详细的可以去阅读官方文档,修改完成后记得保存

esc
:wq

更换主题

在启动hexo后,你一定会想如何更换背景或者主题,确实,如果大家都一样未免太过无趣,所以在hexo官方网站内提供了许多主题,值得一提的是这些主题都是许多大佬编写的。(高手在民间)

在这里插入图片描述

而更换主题的方式也非常简单
首先进到hexo下的themes文件

cd /hexo/themes

将你从官网下载下来的主题包(从github上下载)解压后放入其中,然后记住文件夹的名字,进入hexo的_config.yml文件中修改theme字段,将后面的默认值改为主题文件夹的名字,保存退出。
执行以下语句重启hexo服务

hexo clean
hexo s

再次访问127.0.0.1:4000来测试

主题的配置文件

上面就说过hexo的配置文件有两种,现在就是第二种:主题配置文件
具体的位置在你下载的主题文件根目录下(这里博主使用的是next主题,不同的主题配置方式会有差异)

cd /hexo/themes/next/
vim _config.yml

auto_excerpt

其中有`auto_excerpt·字段,具体效果为每一篇文章只显示预览,不显示全文。
通过true或者false进行控制

统计字段

请登录腾讯分析(百度,谷歌的都可以,随你便),登录获取id,然后在tencent_analytics字段添加id。

具体的操作流程其实与配置站点配置文件一样,但不同的主题可配置的字段和效果都不一样,所以这里就不再多举例,具体的请参考你所下载的主题包的相关说明

使用hexo创建第一篇文章

说了这么多,终于开始使用你的博客网站了,既然是博客,那么文章,分类,标签,评论,站内搜索等一系列功能都不能少,确实,hexo也提供了这些功能

创建一篇文章
首先进入你hexo的根目录下

hexo new 你的文章标题

ok,控制台是不是显示建立了一个后缀为md的文件?那就是你的文章,hexo支持markdown格式,这也是程序员公认记笔记最便捷的格式,具体的学习请参考百度上的某鸟网站的markdown语法
打开你的文章文件后

vim xxx.md

你会看到如下内容

在这里插入图片描述

字段内容
title你文章的标题,会在页面中显示
date创建这篇文章的时间,会在页面中显示,并且在历史记录中作为排序的参数
tags这篇文章包含的标签,会在标签页面中显示,作为找到这篇文章的一个索引
categories这篇文章的分类,会在分类页面中显示,作为找到这篇文章的一个索引

请根据你的具体情况修改

添加新页面

在打开博客网站后,你会发现分类页面,标签页面等一系列页面是空白页,这是因为hexo框架需要使用者自行配置创建一个分类页面,执行以下语句创建:

hexo new page 你创建的新页面名称(这里使用“分类”)

控制台会显示创建了一个文件夹,位于hexo根目录下的source文件夹中,hexo中的新页面是以文件夹的形式存在的,进入其中:

cd /hexo/source/categories

你会看到index.md文件,不要犹豫,进去

vim index.md

文件内容和文章初始内容其实一样,你只需要在其中加入以下内容表明这个页面的类型
和被赋予的功能就行:

type: categories

这表明这个新的页面是一个分类页面,能够将博客网站中的所有文章中的所有类型字段的值显示出来,并作为跳转的索引。(索引字段怎么写写在哪,具体上一节有)

其他的标签页面,存档页面或者是你自定义的页面也大同小异

结语

那么,到这,hexo博客框架+next主题的初步使用教程就结束了,当然,本文所写的只是博主实际进行配置和运行的流程,还有许多的配置以及使用方法没有一一说明,毕竟,这真的只是一个初步教程(手动滑稽),能让你快速搭建一个你自己的博客网站,如果想深入了解,就得靠你自己的挖掘了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值