当前位置:   article > 正文

Hexo 好看且实用的主题推荐_hexo主题

hexo主题

       昨天在腾讯云开发CloudBase,搭建了一个属于自己的Hexo静态博客,然后还绑定了自己的已ICP备案的个人域名,但是了博客主题还是默认的,是时候要换一个博客主题了。今天在网上搜索Hexo博客主题时,还真有一款主题,我一眼就看中了,就是那种“一见钟情”的感觉。

一、主题简介

Fluid 是基于 Hexo 的一款 Material Design 风格的主题,由 Fluid-dev 负责开发与维护。

主题 GitHub: https://github.com/fluid-dev/hexo-theme-fluid(opens new window)

预览网站:Fluid's blogzkqiang's blog

该主题相较于其他主题的优势:

  1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作;
  2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式;
  3. 响应式页面,适配手机、平板等设备,包括极端的分辨率都能轻松应对;
  4. 主题中少有的整合了 LaTeX 和 mermaid 的支持

 二、安装Fluid主题

1、搭建Hexo博客

如果你还没有 Hexo 博客,请按照Hexo官方文档进行安装、建站。或者看我发布的当Hexo遇到云开发CloudBase,搭建静态博客,如此简单一文,自行搭建。

2、获取最新版本

Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令:

npm install --save hexo-theme-fluid

 然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制过去,然后保存文件,用电脑上的记事本也可以操作,但我建议用Notepad++这个软件来操作。

3、指定主题

如下修改 Hexo 博客目录中的 _config.yml:#后面的文字提示,不用写进去。

  1. theme: fluid # 指定主题
  2. language: zh-CN # 指定语言,会影响主题显示的语言,按需修改

设置好后,需要使用hexo clean,hexo g -d ,进行重新编译和发布,那么这时,就会报一个错误 提示,如下图所示:

解决的方法就是在 “language”后面加一个“s”,如下图

 然后就可以正常地进行编译和发布了,如下图:所示

 

 4、创建关于页

首次使用主题的「关于页」需要手动创建

hexo new page about

创建成功后修改 /source/about/index.md,添加 layout 属性,用Notepad++ 编辑输入以下内容

  1. ---
  2. title: 标题
  3. layout: about
  4. ---
  5. 这里写关于页的正文,支持 Markdown, HTML

当然也可以用Markdown语法,书写自己的“关于页”,页面内容。

三、总结

按照上面的步骤来操作,我们就可以为自己的Hexo博客安装上Fluid主题了,因为我的Hexo博客是架设地腾讯云开发上面,最后还需要使用“CloudBase CLI工具”将本地hexo新编译好的文件,上传上去,这样才能更新网站的内容。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/394344?site
推荐阅读
相关标签
  

闽ICP备14008679号