hexo主题-pure

优秀Hexo博客与主题推荐

浏览和学习优秀的博客是获取灵感、提升自己网站设计的最佳途径。Hexo 的生态非常繁荣，有很多设计精美、功能强大的博客。

下面精选了几个不同风格的、在国内非常知名且广受好评的Hexo博客案例，并列出了它们所使用的主题。这些主题都非常成熟，拥有详细的文档和庞大的用户社区。

---

精选Hexo博客与主题案例

1. Butterfly 主题案例

Butterfly 是目前国内最热门、功能最强大的Hexo主题之一，以其美观的卡片式设计、丰富的自定义选项和强大的“魔改”潜力而闻名。

• 博客名称: Akilar’s blog

• 博客链接: https://akilar.top/

• 使用主题: Butterfly (查看主题GitHub)

• 点评/特色:
  这是 Butterfly 主题的深度使用者和贡献者之一的博客，几乎展示了该主题所有功能的上限。网站设计华丽，动效流畅，集成了大量第三方服务，是探索 Butterfly 主题魔改潜力的绝佳范例。

• 博客名称: 张洪HEO的博客

• 博客链接: https://blog.zhheo.com/

• 使用主题: Butterfly (深度魔改)

• 点评/特色:
  同样是 Butterfly 主题的极致使用者。作者的设计风格非常现代和清新，对UI/UX的打磨非常到位。他的博客在设计圈和开发者社区都很有名，很多 Butterfly 用户都会参考他的美化方案。

2. NexT 主题案例

NexT 是Hexo最经典、用户量最大的主题之一，以其简约、优雅的设计和强大的配置功能而著称。它非常注重阅读体验，适合内容创作者。

• 博客名称: Ray
• 博客链接: https://izray.me/
• 使用主题: NexT (查看主题GitHub)
• 点评/特色:
  这是一个非常经典的 NexT 主题应用案例。页面布局清晰，字体和排版都为阅读做了优化，没有任何多余的干扰元素。它完美地体现了 NexT 主题“简约而不简单”的核心理念，非常适合技术写作和内容沉淀。

3. Matery 主题案例

Matery 是一款遵循谷歌 Material Design 设计风格的Hexo主题，特点是响应式设计出色，卡片、阴影和动效都充满了“材料质感”。

• 博客名称: blinkfox
• 博客链接: https://blinkfox.github.io/
• 使用主题: Matery (查看主题GitHub)
• 点评/特色:
  这是 Matery 主题作者自己的博客，自然是该主题的最佳展示。如果你喜欢 Material Design 的现代化风格、丰富的色彩和流畅的交互，这个主题和博客会给你带来很多灵感。

4. Icarus 主题案例

Icarus 是一款设计简洁、专业且高度可定制的主题。它的默认风格非常适合用于作品集、文档或专业博客。

• 博客名称: Ruipeng Zhang’s Blog
• 博客链接: https://blog.zhangruipeng.me/
• 使用主题: Icarus (查看主题GitHub)
• 点评/特色:
  主题作者的官方博客。设计非常专业、干净，左侧的个人信息栏和右侧的内容区域划分清晰，给人一种很强的信赖感。这个主题非常适合想要打造专业个人品牌形象的开发者或设计师。

---

如何寻找更多优秀博客和主题？

1. Hexo官方主题站: https://hexo.io/themes/
   这里列出了数百个已提交到官方的Hexo主题，是你寻找和发现新主题的最佳起点。

2. GitHub搜索:
   直接在GitHub上搜索 hexo-theme，然后按“Most stars”（最多星标）排序，排在前面的通常都是最受欢迎、维护得最好的主题。

3. 查看主题的Showcase:
   很多热门主题（如Butterfly, NexT）的文档或GitHub页面，都会有一个“案例展示”或“用户列表”的页面，你可以在那里看到大量使用该主题的优秀博客。

---

以下是我使用的主题及文档

预览地址: https://blog.cofess.com
项目地址: https://github.com/cofess/hexo-theme-pure
中文使用文档: https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md
原文链接：https://blog.plcent.com/2019/11/05/hexo-theme-pure/

使用前请操作

使用该主题前, 请先复制 theme/pure/_source/ 目录下的所有内容到source/目录下,原因在于该目录下有建好的菜单 categories(分类)、tags(标签)、repository(项目)、books(书单)、links(友链)、about(关于)页面当你使用自动生成分类、标签，展示github项目时

文章目录索引

在文章详情页, 展示一个文章目录

1.主题配置文件中开启配置:

config
  toc: true # 是否开启文章章节目录导航

2.在文章顶部将该文章开启索引, 如:

---
title: Hexo主题pure使用指南
date: 2019-11-05 14:34:15
tags: 
- hexo主题

categories:
- hexo

toc: true # 是否启用内容索引
sidebar: none # 是否启用sidebar侧边栏，none：不启用
---

侧边栏

主题配置项中, 侧边栏可以如下配置:

# 侧边栏
sidebar: right
# 侧边栏启用哪些模块
widgets:
  - board # 公告
  - category # 分类
  - tag # 标签
  - tagcloud # 标签云
  - archive # 归档
  - recent_posts # 最近文章

# 归档列表的展示方式
archive_type: 'monthly' # 归档方式:  yearly | monthly
show_count: true # 显示每个归档的文章总数

图集

在文章详情页中, 涉及的图片可以使用图集功能, 在点击一张图片时, 放大图片.
主题的图册公告是使用fancybox实现, 可以参照github

# Fancybox
# 图集功能
fancybox: true

展示github项目

在左侧菜单项目中, 点击展示自己的github项目

1.在主题配置文件中 _config.yml 修改, 请配置自己github用户名

github: 
  username: caoruiy  # github用户名

2.新建repository页面:

> hexo new repository

你也可以直接复制 theme/pure/_source/ 目录下 repository文件夹 到 博客根目录/source/ 目录下

3.将文件内容修改为:

---
title: Repositories
layout: repository
comments: false
sidebar: none
---

关键内容为 layout: repository,包含该属性才可以展示github项目

评论功能

主题集成了disqus、友言、来必力、gitment、gitalk评论系统，选择其中一种即可
你可以在主题配置文件中修改评论工具

comment:
  type: valine  # 启用哪种评论系统

Valine

一个无后端的评论框工具, 其依赖于 Leancloud 开发, 所以使用前需要先注册 Leancloud 账号

如何开始? 你可以从 Valine-快速开始 教程开始, 教程包含了一步一步的指引教程.

Valine配置项

主题valine评论框提供了以下配置项

valine: # Valine官方地址: https://valine.js.org
  appid:  # 你的 leancloud 应用 appid
  appkey:  # 你的 leancloud 应用 appkey
  notify: true # 是否开始评论邮件提醒, 教程: https://github.com/xCss/Valine/wiki
  verify: false # 是否开始验证码功能, 开始邮件提醒会自动开启验证码功能
  placeholder: 说点什么... # 输入框默认内容
  avatar: mm # 头像展示方式, 具体设置项教程: https://valine.js.org/configuration.html#avatar
  meta: nick,mail,link # 自定义评论信息
  pageSize: 10 # 评论列表分页
  lang: zh-cn, # 多语言支持 zh-cn | en
  visitor: true # 文章阅读量统计:  https://valine.js.org/visitor.html
  highlight: true # 代码高亮
  recordIP: true # 记录评论者的IP

关于邮件提醒: 只有在回复评论时, 并且填写了邮箱的评论才会收到回复提醒
关于文章阅读量统计: 开启阅读量统计, 会在详情页标题下展示阅读量数据

搜索功能

主题提供内置的搜索功能和百度搜索, 百度搜索就是使用百度的SEO搜索, 个人觉得不是很实用, 不建议开启.

在主题配置文件 _config.yml 中配置:

# Search
search:
  insight: true # 在使用搜索功能前, 你需要安装 `hexo-generator-json-content`
  baidu: false # 使用百度搜索前, 你必须禁用其他所有的搜索功能

内置搜索

使用搜索功能前需要先安装:

npm i -S hexo-generator-json-content

项目地址: https://github.com/alexbruno/hexo-generator-json-content

hexo-wordcount

在你运行 hexo g 或者 hexo s 时生效，在 hexo g 生成站点时, 会在根目录下生成content.json该文件内容即为搜索内容。

你可以对搜索内容进行自定义的配置， 只要在 _config.yml 中配置 jsonContent即可:

# 示例: 隐藏分类和标签的搜索
jsonContent:
  dateFormat: DD/MM/YYYY
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: false
    author: false

文章阅读数量统计

主题提供 不蒜子 和 基于 leancloud 的统计

但是经过验证, 发现基于leancloud的统计不生效, 不知原因, 实现等效的方法就是:

评论框使用valine评论框(主题已经内置), 同时开启 visitor: true 配置项项即可

字数统计&阅读时长

主题内置了该功能, 使用前需要先安装插件:

npm i -S hexo-wordcount

主题配置文件中, 开启设置即可:

# wordcount
postCount:
  enable: true
  wordcount: true  # 文章字数统计
  min2read: true  # 阅读时长预计

友情链接

复制 theme/pure/_source/ 目录下 links文件夹到 /source/ 目录下在 hexo 目录下的 source 文件夹内创建一个名为_data（禁止改名）的文件夹。

然后在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。

单个友情链接的格式为：

Name:
    link: http://example.com
    avatar: http://example.com/avatar.png
    desc: "这是一个描述"

添加多个友情链接，我们只需要根据上面的格式重复填写即可。

• 将 Name 改为友情链接的名字，例如 Cofess。

• http://example.com 为友情链接的地址。

• http://example.com/avatar.png 为友情链接的头像。

• 这是一个描述 为友情链接描述。