玩遍博客网站,我整理了 Hexo 及其流行的风格主题

搭建博客网站是个人进入互联网世界的最常见方式之一。伴随着网站技术的发展,如何搭建博客网站已经变得非常容易了。当然,你可以选择诸如 新浪博客、CSDN、博客园 之类的大型网站,快速创建依赖于大平台的个人博客,不过这种方式的不足是言论受限太多、无法触及网站底层技术。所以,对于想要自由发挥创意、又期望对网站拥有更多主动权的话,最好还是选择自己去亲手搭建一个网站。

本文来源:魚立说。本文链接:https://www.yulisay.com/d/kdhmp.html,支持微信浏览器打开。

更多精彩文章,请移步 魚立说个人网站 翻看。欢迎欣赏,吐槽不足之处。


本主题将围绕博客网站的搭建流程、不同的博客搭建技术及其流行的风格主题展开,整个系列由以下三个文章部分组成:

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。其官网是:https://hexo.io

安装 Hexo

安装 Hexo 相当简单,但是需要先安装下列应用程序即可:

Node.js >=12.0
Git

安装 Node.js 和 Git 之后,全局安装 Hexo 的命令:npm install hexo-cli -g。

初始化一个名字为 hexo-blog 的项目:hexo init hexo-blog,此时将生成如下 Hexo 项目目录:

.
├── _config.yml    # 网站的配置信息
├── package.json   # 应用程序的信息
├── public         # 公共文件夹,用于存放生成的站点文件
├── scaffolds      # 模版文件夹
├── source         # 资源文件夹,用来存放内容
└── themes         # 主题文件夹

快速操作 Hexo

查看版本:hexo version 或者 hexo v

启动服务:hexo server 或者 hexo s

新建一篇文章,比如:hexo new “Hello Hexo”

生成静态文件:hexo generate 或者 hexo g

部署网站:hexo deploy 或者 hexo d

清除缓存文件 (db.json) 和已生成的静态文件 (public):hexo clean

正常启动服务后,在浏览器打开 http://localhost:4000/,将看到一个默认的主题网站,如图:

图:启动 Hexo 服务

流行的 Hexo 主题

使用 Hexo 博客时,我们最希望的是找到适合自己的一款主题,下面将图文结合介绍一些流行的 Hexo 主题。此外,关于写作的方法和 Hexo 主题修改,可以查阅本文参考中的 Hexo 官方文档,这里不再赘述。

找到、安装和配置 Hexo 主题

最好的搜索方式是在 https://github.com/ 中,搜索关键词:hexo theme。或者使用搜索引擎,搜索:hexo theme site:github.com

图:在 Github 上搜索 Hexo 主题

然后进入到项目目录中,下载安装我们需要的主题(theme-demo 只是一个示例资源,请注意替代为实际的资源):

git clone https://github.com/theme-demo.git themes/theme-demo
cp -r themes/theme-demo/_source/* source

希望使用下载的主题,还需要在 _config.yml 中进行配置:

theme: theme-demo

接着,使用 hexo clean 清除缓存,执行 hexo s 便可以看到下面这些 Hexo 风格主题的效果了。

Hexo 流行主题之 1:Maupassant

Maupassant 最初是由 Cho 大神为 Typecho 平台设计开发的一套响应式模板,体积只有 20KB,在各种尺寸的设备上表现出色。由于其简洁大气的风格受到许多用户喜爱,目前也已经被移植到了多个平台上。Github 地址:https://github.com/tufu9441/maupassant-hexo

图:Maupassant 风格主题

Hexo 流行主题之 2:Matery

一个采用 Material Design 和响应式设计的 Hexo 博客主题。Github 地址:https://github.com/blinkfox/hexo-theme-matery

图:Matery 风格主题

Hexo 流行主题之 3:pure

特点是支持多语言;第三方评论框;可展示个人豆瓣书单;可设置支付宝、微信打赏等。Github 地址:https://github.com/cofess/hexo-theme-pure

图:pure 风格主题

Hexo 流行主题之 4:ils

界面设计十分简洁、清爽,但功能齐全、不失优雅,记录生活、展示文字。Github 地址:https://github.com/XPoet/hexo-theme-ils

图:ils 风格主题

Hexo 流行主题之 5:Cafe

Cafe 主题旨在追求简约、操作简单、阅读舒适度。Github 地址:https://github.com/giscafer/hexo-theme-cafe

图:Cafe 风格主题

Hexo 流行主题之 6:BlueLake

一个简洁轻量化的响应式 Hexo 博客主题,看起来很像新浪博客。Github 地址:https://github.com/chaooo/hexo-theme-BlueLake

图:BlueLake 风格主题

Hexo 流行主题之 7:shana

shana 是以 Hexo 3.2 为基础制作的主题,为庆贺夏娜酱 2016 年加冕萌王而诞生的,由于比较多的 animation,低配手机在移动端访问的时候可能会出现卡顿。Github 地址:https://github.com/ShanaMaid/hexo-theme-shana

图:shana 风格主题

除了以上几种,还有更多不错的 Hexo 风格主题供你选用,比如 EvenNextYiliaHacker 等。如果你有好的想法和设计,也可以创建并发布自己制作的 Hexo 主题,到时候欢迎给我的网站 魚立说 留言。

参考链接

Hexo 官方文档

Hexo 主题教程

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Hexo是一个静态博客生成器,它提供了一些默认的主题,但是用户也可以自己开发或使用第三方主题。其中,Next是一款非常受欢迎的Hexo主题之一,它提供了丰富的功能和灵活的配置。 在使用Next主题时,我们可以通过override来修改主题的默认配置和样式。具体来说,override是指将主题的默认配置或样式文件复制到博客根目录下的/source/_data/或/source/css/override/目录下,然后进行修改。这样,在重新生成博客时,Hexo会优先使用override中的配置或样式文件,从而实现自定义主题的效果。 下面是具体的使用方法: 1. 复制配置文件到/source/_data/override/目录下 首先,我们可以通过命令`hexo config`查看当前主题的默认配置,然后将需要修改的配置项复制到/source/_data/override/目录下的同名文件中,并进行修改。例如,如果我们想修改Next主题的默认语言为英文,可以执行以下命令: ``` hexo config | grep language > source/_data/override/next.yml ``` 然后,打开source/_data/override/next.yml文件,将`language`的值修改为`en`,保存文件即可。 2. 复制样式文件到/source/css/override/目录下 如果我们需要修改主题的样式,可以将主题的默认样式文件复制到/source/css/override/目录下,并进行修改。例如,如果我们想修改Next主题的默认字体为微软雅黑,可以执行以下命令: ``` cp -r themes/next/source/css/fonts source/css/override/ ``` 然后,在source/css/override/fonts目录下,将所有字体文件中的字体名称修改为“Microsoft YaHei”,保存文件即可。 需要注意的是,override文件的命名和存放路径需要与主题默认文件一致,否则可能会导致修改无效或出现异常。同时,使用override也可能会导致主题升级时出现冲突,因此在使用时需要注意备份原始文件和谨慎修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值