A concise hexo theme
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9ed85fd Oct 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
languages init program Apr 15, 2018
layout opt Oct 21, 2018
source 增加来必力livere评论系统接入 Oct 21, 2018
.gitignore modify ignore Oct 14, 2018
LICENSE Create LICENSE Apr 25, 2018
_config.yml init program Apr 15, 2018
readme-en.md 集成 disqus && 文章目录自适应滚动 Oct 2, 2018
readme.md Merge pull request #23 from shallotsh/add-livere-comment Oct 21, 2018

readme.md

本博客提供给腾讯课堂官方课程一线大厂 React 实践宝典做项目参考,作者即课程讲师之一。

Hexo-Theme-AirCloud: 一个简洁轻量的 hexo 博客主题

English Document | 预览地址

功能简介

Hexo-Theme-AirCloud 是一个简洁轻量的 hexo 博客主题,旨在将中心放在博文本身,因此:

  • 默认没有大范围的主题色块、图片铺排等,也不要求每片博文配图,一方面这并不是我们记录知识的重点,另外一方面可能程序员群体并没有足够的素材,容易造成主题纠纷。
  • 建议通过不冗余的内容进行传达,比如默认没有博文摘要,因为不少开发者写博客的时候没有写博文摘要,如果从博客前一部分截取往往不能表达完整思想。

另外,该主题主要实现的功能有:

  • 全局搜索功能,并对搜索内容进行高亮。
  • 博客评论功能,目前接入 gitment,之后考虑接入多种可选。
  • 文章详情页文章目录功能
  • 访问量统计(总体UV、PV,单页PV)
  • 语言切换能力,目前支持中文和英文

起步

我在"常见问题"中总结了该项目之前被提及的一些问题,如果你在使用过程中遇到了问题,可以在"常见问题"中寻找答案,如果没能解决,欢迎提issue,我会保证回复。

注意,如果你不按照"功能适配"部分的内容进行操作,可能会导致相关提及的功能无法正常使用。

基本使用

建议:参考 DEMO 进行配置,尤其是 _config.yml 部分,否则可能会造成功能缺失

同其他博客主题使用方式相同,直接 clone 或者下载本项目,复制粘贴到 themes 文件夹下即可。

具体的 _config.yml 自定义配置,请参考DEMO

功能适配

搜索功能

为了使用搜索功能,首先需要安装下列插件:

npm i hexo-generator-search --save

然后在 _config.yml 中进行配置,可以参考如下配置:

search:
  path: search.json
  field: post

标签页面 & 关于页面

如果是新项目,默认是没有标签页面和关于页面的,需要在source文件夹下建立tags文件夹和about文件夹。

其中tags文件夹中新建index.md并写入:

    ---
    layout: "tags"
    title: "Tags"
    ---

about文件夹下index.md为一篇支持 markdown 格式的文件,需要在开头添加:

    ---
    layout: "about"
    title: "About"
    date: 2016-04-21 04:48:33
    comments: true
    ---

评论功能

目前,本博客支持以下评论功能:

  • gitment(gitment 经常会出现限频或者 404 等错误,其作者已关闭github认证转发服务)
  • disqus
  • LiveRe

gitment

建议先在gitment进行了解,然后参考DEMO进行配置,其中一些相关项目如下:

comment:
  type: gitment
  id: your-id-created-by-https://github.com/settings/applications/new
  secret: your-secret-created-by-https://github.com/settings/applications/new
  owner: aircloud
  repo: hexo-aircloud-blog

disqus

disqus 是一个使用比较广泛的评论系统,我们需要先在官方网站注册一个账号。

登录后,点击首页的 GET STARTED 按钮,之后选择 I want to install Disqus on my site 选项,填写相关内容,值得注意的是,Website Name 需要全网唯一,而且,一般情况,假设你的 Website Name 填写的是 example,那么下文 script 字段就可以写 'https://example.disqus.com/embed.js'

当然,你也可以在下一步 -> 选择 basic 免费套餐 -> 选择最后的 "I don't see my platform listed, installed manually with universal code" -> 找到代码中的 s.src = 'https://xxxx.disqus.com/embed.js'; , 从而找到 script 地址。(无需插入 disqus 给出的脚本,只需按照这里的说明配置即可)

之后,你需要在 _config.yml 中配置如下内容:

comment:
   type: disqus
   script: 'https://example.disqus.com/embed.js'

当然,你也可以配置urlidentifier, 但是这个就属于高级内容了,对于我们一般的 hexo 博客网站来说必要性不大,如果你需要配置这些内容,可能你已经是一个高级玩家了,可以在 themes/aircloud/layout/layout.ejs 的相关代码的基础上进行改动。

注意: 目前,直接嵌入 disqus 的代码可能会加载失败,你也可以考虑将相关代码放在自己的博客下引入:在 public 文件夹下新建文件放入代码,跟随发布即可(放入 source 文件夹下可能会由于 hexo 的处理变得有错误),并同时更改 _config.yml 中的配置。

LiveRe

LiveRe 是一款来自韩国的支持中文且没有被墙LiveRe评论插件,重点是使用无需翻墙。

该插件分为city和premium两个版本,其中city版是适合所有人使用的免费版本,有更高需求的可以考虑premium版本。

注册之后,选择 安装 -> 选 city版本,按提示操作进入到管理页面,系统会给出一段嵌入代码,找到其中的data-id和data-uid。

之后,你需要在_config.yml中配置如下内容

comment:
   type: livere
   livere_id: 'city'
   livere_uid: 

livere_idlivere_uid就是注册后获得的 data-id和data-uid。

favicon 的配置

项目的 favicon 默认在你的博客根目录的 /source/img 下面,在 /source/img 下面添加 favicon.ico 即可,不要添加在主题文件夹内。

底部自定义

大家如果访问提供的预览链接,会发现我们的博客底部是提供一些内容的:一些社交平台的个人主页链接、友情链接、PV、UV 与 本模版链接。

一般情况下,大家无需改动底部的代码,直接在 _config.yml 中配置即可。

配置社交平台主页的样例代码:

# SNS settings
# 一些社交平台地址,支持以下几种:
weibo_username:     3286578617
zhihu_username:     ai-er-lan-xue-da
github_username:    AirCloud
twitter_username:   iconie_alloy
facebook_username:  xiaotao.nie.5
linkedin_username:  小涛-聂-80964aba

如果不想包括某些社交平台,直接注释或删除相关代码即可(目前暂不支持在不改动模版代码的前提下新增社交平台)。

配置友情链接的样例代码:

# Friends
# 友情链接
friends: [
    {
        title: "10000H",
        href: "https://www.10000h.top"
    },{
        title: "Xiaotao's Page",
        href: "https://niexiaotao.com"
    },{
        title: "It helps SEO",
        href: "#"
    }
]

最底部的 PV、UV 和模版地址,无需配置。

高级自定义

首行缩进

目前可以配置是否在博客页面带有首行缩进两个汉字的效果,默认是有首行缩进的效果的,但是也可以通过下面的配置代码进行关闭:

post_style:
    indent: 0

常见问题

如何取消赞赏功能?

目前网站的赞赏功能做的比较鸡肋,缺乏一定的丰富度,如果你想取消这个功能,只需取消注释或者删除掉赞赏部分的相关配置即可:

donate:
  img: img/donate.jpg
  content: 感谢鼓励

另外,如果你对赞赏部分有用户体验较好并且通用型比较好的设计,也可以提 issue,我会考虑实现。

一些注意事项

由于一些hexo的历史遗留问题等,为了避免给用户在使用过程中带来太多麻烦(比如需要改动主题代码甚至hexo源码),建议用户使用过程中遵循一些规范:

  • 文章不要有跳级目录,比如一个###三级目录下是一个#####五级目录,然后又有一个###三级目录,这样有可能导致 hexo 解析出错,从而影响文章目录部分的展示。
  • 文章的段落(p)都有默认的两个字符的首行缩进,虽然能识别 markdown 段落中的换行,但是无法对换行后的内容进行缩进,所以这里需要注意样式问题(如果需要多行缩进,建议使用多个段落或者做成列表)。