Hexo + GitHub搭建静态博客(二)

快速介绍

本文是 Hexo + GitHub 搭建静态博客(一) 内容上的延展,Hexo 环境的搭建、依赖的下载请根据上文自行配置。

本文主要介绍 Hexo 的 归档、标签、分类,以及依靠插件支持的 评论、站内搜索、字数统计 等功能。

归档、分类、标签

三者是众多博客模板的必要元素,而在很多文档中却没有详细的解释,一笔带过。笔者结合自己的理解,强行解释一波,通过对比将意思表达的更清楚。

归档(archives)是按照一定的周期对博客进行分类,大多数是按年,月等。

分类(categories)和 标签(tags)都是用来描述博客的内容,但却又不尽相同。分类定义博客的常规主题,而标签会深入反应内容。分类会构成博客的大纲,反应博客的基本结构,而标签会更具体一些。下面我希望通过一个小案例来解释“分类”和“标签”的区别。

假如我们运营着一个关于电子产品(3C)的博客,上面发布了众多的博文,可能会有以下的分类:

  • 笔记本
  • 手机
  • 存储设备
  • 数码相机

当有新的 iphone 上市的时候,我们可能会写一个新产品开箱的博客,它的分类肯定是”手机“,而标签会是”iphone“。

创建对应的页面也很简单,只需几行命令。

hexo new page "archives"
hexo new page "tags"
hexo new page "categories"

站内搜索

方式有以下三种:Insight、Swiftype、Baidu。

Insight:只需安装 hexo-generator-json-content 组件即可。
Swiftype:需要去其官网注册 key。
Baidu:搜索的话需要禁用其他两种。

三种都很简单,这里展示第一种的效果图。
在这里插入图片描述

扫描二维码关注公众号,回复: 4292922 查看本文章

评论

评论是博客必不可少的一项功能。而 Hexo 作为一个静态博客,没有 WordPress 那样的 Server 和数据库,评论的功能可想而知肯定是用的第三方的评论系统。大浪淘沙,对比各色的需求,我们来看一下:

  • 来必力 : 504 报错,跨域
  • Hypercomments: 付费
  • 畅言 : 畅言
  • Valine : sound good
  • 多说 : 关闭
  • 网易云跟帖 : 关闭
  • disqus : 科学上网
  • Gitalk : 需要 GitHub 账号
  • 搜狐畅言 : 备案

这个 topic 展开的话会很冗长,搜索引擎上也有很多这类的文章。我最后选择了 GitTalk,简单大方,技术类的文章 GitHub 不是门槛。

字数统计,阅读时间统计

这一部分比较简单,只需要安装 hexo-wordcount 插件,传入博客的内容即可计算得出。

如何在博客展示自己 GitHub 托管的项目

作为一个程序员,GitHub 开源项目是程序员展示编程技术和工作阅历、释放程序员个人魅力的宽广舞台。

所以,很有必要在博客的核心页面展示自己 GitHub 的 repository。Hexo 可以在主题内通过 ejs 或 swig 模板引擎来构建页面,GitHub 提供开源 api 支持获取 repo 列表。

所以我们可以通过调用引入 JavaScript 请求 api。展示效果如下:
在这里插入图片描述

问题出在 GitHub 的未授权状态的 api 每小时只可以请求 60 次,而超出次数就会 403。而授权的 api 每小时可以访问 50000 次。所以需要去https://developer.github.com/v3/auth/#basic-authentication 申请授权。

我们搭建的 Hexo 静态博客,没有 Server,所以 oauth2 的方式不可取,这里我用的 access_token 来对 api 授权,GitHub 出于安全的考虑,不允许我们把 access_token 上传到 GitHub 仓库,所以我们需要借助你擅长的加密方式,对 access_token 加密,运行时解密。伪代码如下:

var key = 'U2FsdGVkX1+VWdiIkoA3PCbz9KKGlKilMs6UztGd2VQuYuSAoZLyCi8fM2qxUbviYt35kf/tpFvEqNmtY3WppQ='
var access_token = CryptoJS.AES.decrypt(key, 'guguji5').toString(CryptoJS.enc.Utf8);
$.get("https://api.github.com/users/<%=theme.github.username%>/repos?access_token="+access_token, function(result) {
})

参考链接

https://developer.github.com/v3/auth/#basic-authentication

https://developer.github.com/v3/#rate-limiting

https://amylynnandrews.com/categories-vs-tags/

猜你喜欢

转载自blog.csdn.net/java060515/article/details/84545704
今日推荐