• 百 度
  • 京 东
  • 淘 宝
  • 知 乎
  • Bing
  • Google
  • Yandex
  • Quora
  • GitHub
  • StackOverflow
  • SegmentFault
  • 医 疗

3-hexo使用说明主题设计

这是 3-hexo 说明文件,转载自 叶落阁:https://yelog.org/2017/03/07/3-hexo/

前言

阮一峰曾言:喜欢写blog的人,会经历三个阶段

第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

有对搭建个人 blog 有兴趣的朋友,可以翻看我往期文章。
笔者从去年开始通过 hexo 写 blog ,使用了 yilia 主题,
但是随着文章数量的上升,检索等操作就显得特别笨重。

在遍寻无果的情况下,就写下了 3-hexo 主题。Demo:http://yelog.org

多图预警 ↓↓↓

设计思路

整体设计

三段式设计:

三段式设计

通过分类过滤

分类过滤文章

通过标题关键字搜索

文章标题关键字搜索

通过作者搜索

若开启了多作者模式,则可以通过输入 @ ,进行作者搜索,如下所示
通过作者搜索

通过标签搜索

输入 # ,就会出现标签提示
通过标签搜索

评论功能

测试一下评论

打赏功能

打赏功能

文章置顶

文章置顶

返回头部

返回头部

使用

1.安装

$ git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo

2.配置

1). 修改 hexo 根目录的 _config.yml 的两处,如下

theme: 3-hexo
highlight:
  enable: false #关闭hexo渲染高亮,使用主题代码块高亮

2). 在 hexo 根目录 source 下添加 avatar.jpg 文件,作为头像

3) . 安装字数统计( 由于主题使用这个插件,必须安装,否则会报错 )

$ npm i --save hexo-wordcount

注意: 如果没有安装会在 hexo g 的时候报错

3.更新

$ cd themes/3-hexo
$ git pull


转载请注明来源。

文章标题:3-hexo使用说明主题设计

本文作者:bas369.com

发布时间:2020-07-06, 16:07:00

最后更新:2020-07-06, 16:25:18

原始链接:https://www.bas369.com/more/learning_notes/2020/07/06/3-hexo%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E%E4%B8%BB%E9%A2%98%E8%AE%BE%E8%AE%A1/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


  • 关于我们
  • 苏公网安备 32132302010228号
  • 联系我们
目录