【hexo】使用其他主题例子(含有标签与分类)

1. 编写目的

介绍一个例子,使用前辈们的主题,编写自己的博客网站。
总体过程是非常简单的,但是安装hexo过程请自行百度。

2. 新建项目

  • 在D盘新建myblog文件夹,打开Node.js控制台,跳转到目标地址,新建hexo项目。
     d:
     cd myblog
     hexo init test
    
    需要下载一段时间,下载完了就可以作为自己的博客。
  • 查看官网的主题
      cd test
      hexo s
    
    效果如下:
    在这里插入图片描述
    浏览器打开localhost:4000网址,可以看到效果如下:
    在这里插入图片描述
    表示自己博客已经搭建成功,现在我们给它换个主题,更加好看一些。

3. 下载主题

可以去官网查看下载其他主题:https://hexo.io/themes/
以这位前辈作品为例子,查看效果:https://www.haomwei.com/
这个主题对应的github下载地址:https://github.com/tufu9441/maupassant-hexo
安装步骤和上面github介绍步骤一样。
也可以直接用浏览器在github地址上下载zip压缩包,推荐使用git命令下载。

 git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
 npm install hexo-renderer-pug --save
 npm install hexo-renderer-sass --save

后面两行命令是安装依赖,需要一些时间才能安装完成。如果安装不了,查资料发现可能需要使用cnpm 来安装(当然事先安装一下cnpm)。

4. 配置主题

这个时候查看test文件夹中的theme文件夹,可以发现自己下载了maupassant文件夹,现在需要配置项目,使用这个maupassant主题。
打开test/_config.yml,找到最后几行的“theme”,把默认的landscape改成maupassant。
在这里插入图片描述

5. 编写文章

为了让效果更加明显,修改默认的hello world文章,主要是添加分类和标签。
编辑test/source/_posts下的hello-world.md,在title下面添加分类和标签。
如下:(标签与分类名称自己取,不一定是hello world)

tags:
  - Hello World
categories:
  - Hello World

添加后效果如下:
在这里插入图片描述

6. 效果展示

保存后,启动hexo。

 hexo s

然后打开浏览器查看效果:
在这里插入图片描述
当然,如果不喜欢这个英文的,可以修改test/_config.yml,修改为简体中文。
在这里插入图片描述
注意如果是其他主题,可能使用中文不是‘zh-CN’,要根据主题的languge文件夹中的yml文件名而定。
效果如下:
在这里插入图片描述

大功告成!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

smile-yan

感谢您的支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值