博客构建笔记(更新：增加排序功能)

发表于   |   更新于   |   分类于

前言

    记录总结学习过程的重要性不言自明。博客正好就是这一过程的体现平台，所以构建并完善这个平台就显得尤为重要了。由于周期性的懒癌发作，所以可惜的是构建此博客的前期并未记录下来，这两天因为开始写年终总结了，所以连续为博客增加了两项功能，至此我认为应该记录一下。

功能

订阅

    一直都知道很多博客有订阅 rss 的功能，但是从来没有使用过，所以前期构建的时候并没有将这个功能作为博客的核心功能。直到邮件订阅了一些网站之后，只要有更新就会自动推送邮件，并且在邮件中就能看到更新的内容。这才感受到这个功能的便捷性，然后决定我也要给我的博客增加这个功能。
    经过一番探索，经过以下步骤可以实现 rss 及邮件订阅的功能：

  1. 利用 npm 下载安装 hexo-generator-feed 插件，命令如下：
    $ npm install --save hexo-generator-feed

  2. 在主题配置文件 _config.yml 中增加以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #Feed configuration
    plugin:
    - hexo-generator-feed

    feed:
      type: atom      // Feed type. (atom/rss2)
      path: atom.xml  // Feed path. (Default: atom.xml/rss2.xml)
      limit: 20       // Maximum number of posts in the feed.
      hub:            // URL of the PubSubHubbub hubs (Leave it empty if you don't use it)
      content: true   // (optional) set to 'true' to include the contents of the entire post in the feed.

  3. 在主题配置文件 _config.yml 中设置 rss 项：
    rss: "/atom.xml"

  4. 至此，更新部署博客就能看到有 rss 订阅功能了，需要邮件订阅功能则需要从下面一步开始；
  5. 利用 feedbuner 来制作一个feed（如果没有账号可以注册一个或者用谷歌账号登录）：
    第一张图
  6. 在上图中填入你的博客订阅地址，如下所示：
    第二张图
  7. 之后直接点击 next 就成功制作了一个feed：
    第三张图
  8. 制作完之后在种子信息面板开启邮件订阅的功能：
    第四张图
  9. 至此，你已经得到了两种形式的代码了，根据自己的需要使用到自己的网站上，我使用的是超链接的形式。
  10. 时光荏苒，岁月如梭，一年的时间又飞快的离我们而去。与去年情况不同的是，在引入两个强而有力的产品同事后，今年的工作变得更加复杂和具有挑战性了。为了有条理的总结今年这一年的工作情况，下面就按时间顺序一一道来。

置顶

    这也是一个一直想要的功能，因为很有可能有些博客的重要性比其他的更高，但是由于默认按照时间来排序导致翻页之后才能看到这些文章。正好这两天在捣鼓博客，索性将这个功能也做出来。最开始的时候准备将博客的源码文件捋清楚后自己修改代码，但是打开hexo文件夹一看，打了个哆嗦就把文件夹关了：我是不是傻，为啥不先去搜索一番？
    果然，一搜就发现有很多人多有这个需求: 如何置顶post？。整个帖子看下来的结论是：各种尝试的结果都或多或少有bug，所以此暂时暂时搁置，日后再来开发。不过里面倒是有个链接指出了通用配置方法，这也是目前我所采用的方法。
    原文写的比较详细，我也就不再多费口舌了，总的来说就是更改排序规则，并将新的变量（top）增加到post的开头部分。经测试，效果不错。

加密

    对于某些涉及隐私，或者只希望分享给有限人群的博客，加密功能就非常实用了。之前一直没有将这个功能加上来，因为需求没这么迫切。最近准备开始投简历，里面会涉及一些个人信息，但是又希望公司能够通过博客的形式看到简历，这个功能就必不可少了。通过搜索，找到这个一个帖子，基本能满足需求：

    加密博客内容，使用密码访问

    仔细看了一下这篇博客及对应项目的 GitHub 文档，满足基本需求不成问题，但是有两点不足：第一，官方文档写的不是太好，有些地方不好理解；第二，对于基于 GitHub page 的博客基本无效。然后在 GitHub 上顺藤摸瓜，找出了下面这个项目：

    hexo-blog-encrypt

    文档清晰易懂，开发者响应迅速，最重要的是能够完整加密。如果非要提不足的地方，那就是解密后目录栏不会自动更新。和开发者沟通过，这个需要根据不同的 Hexo 主题进行对应的更改，经过一番尝试后测试失败。由于时间问题，暂时我就不去管它了。
    所以，如果你也需要为博客设置密码，推荐第二种方式。
    非常感谢两位开发者做出的探索。

迁移

换电脑后写博客没有以前那么方便了，加上懒癌晚期，一直拖着没有把以前电脑上的资源迁移过来，所以大半年都没有写博客了。昨天晚上不知道哪根筋搭错了，终于决定将很久都没有做的事情完成下。
看了几篇博客，有些挺难理解的，一步一步尝试做下来总会失败。可能是没有理解其中缘由，也可能是时过境迁，以前的方法不再适用。最终成功的方法来自知乎用户@[skycrown](https://www.zhihu.com/people/skycrown)：[使用hexo，如果换了电脑怎么更新博客？](https://www.zhihu.com/question/21193762)

不知道题主是不是换了新电脑，需要在新电脑上进行部署，如果是，可以参考下面的方法：
1、从官网Git**下载git，在新电脑上安装，因为https速度慢，而且每次都要输入口令，常用的是使用ssh。使用下面方法创建：
（1）打开git bash，在用户主目录下运行：ssh-keygen -t rsa -C “youremail@example.com“ 把其中的邮件地址换成自己的邮件地址，然后一路回车
（2）最后完成后，会在用户主目录下生成.ssh目录，里面有id_rsa和id_rsa.pub两个文件，这两个就是SSH key密钥对，id_rsa是私钥，千万不能泄露出去，id_rsa.pub是公钥，可以放心地告诉任何人。
（3）登陆GitHub，打开「Settings」->「SSH and GPG keys」，然后点击「new SSH key」，填上任意Title，在Key文本框里粘贴公钥id_rsa.pub文件的内容（千万不要粘贴成私钥了！），最后点击「Add SSH Key」，你就应该看到已经添加的Key。
注意：不要在git版本库中运行ssh，然后又将它提交，这样就把密码泄露出去了。
2、下载Node.js**，并安装
3、打开git bash客户端，输入 npm install hexo-cli -g，开始安装hexo
4、下面就将原来的文件拷贝到新电脑中，但是要注意哪些文件是必须的，哪些文件是可以删除的。
（1）讨论下哪些文件是必须拷贝的：首先是之前自己修改的文件，像站点配置_config.yml，theme文件夹里面的主题，以及source里面自己写的博客文件，这些肯定要拷贝的。除此之外，还有三个文件需要有，就是scaffolds文件夹（文章的模板）、package.json（说明使用哪些包）和.gitignore（限定在提交的时候哪些文件可以忽略）。其实，这三个文件不是我们修改的，所以即使丢失了，也没有关系，我们可以建立一个新的文件夹，然后在里面执行hexo init，就会生成这三个文件，我们只需要将它们拷贝过来使用即可。总结：_config.yml，theme/，source/，scaffolds/，package.json，.gitignore，是需要拷贝的。
（2）再讨论下哪些文件是不必拷贝的，或者说可以删除的：首先是.git文件，无论是在站点根目录下，还是主题目录下的.git文件，都可以删掉。然后是文件夹node_modules（在用npm install会重新生成），public（这个在用hexo g时会重新生成），.deploy_git文件夹（在使用hexo d时也会重新生成），db.json文件。其实上面这些文件也就是.gitignore文件里面记载的可以忽略的内容。总结：.git/，node_modules/，public/，.deploy_git/，db.json文件需要删除。
5、在git bash中切换目录到新拷贝的文件夹里，使用 npm install 命令，进行模块安装。很明显我们这里没用hexo init初始化，因为有的文件我们已经拷贝生成过来了，所以不必用hexo init去整体初始化，如果不慎在此时用了hexo init，则站点的配置文件_config.yml里面内容会被清空使用默认值，所以这一步一定要慎重，不要用hexo init。
6、安装其他的一些必要组件，如果在node_modules里面有的，就不要重复安装了：
（1）为了使用hexo d来部署到git上，需要安装
npm install hexo-deployer-git –save
（2）为了建立RSS订阅，需要安装
npm install hexo-generator-feed –save
（3）为了建立站点地图，需要安装
npm install hexo-generator-sitemap –save
插件安装后，有的需要对配置文件_config.yml进行配置，具体怎么配置，可以参考上面插件在github主页上的具体说明
7、使用hexo g，然后使用hexo d进行部署，如果都没有出错，就转移成功了！

排序

之前已经写过了置顶的功能，逻辑是如果 post 中有 top 字段，那么先比较 top 字段值的大小，然后根据发布时间来进行排序。但是有些文章是在不断修改的，所以我认为按照修改时间来排序是一种更好的策略。对于从来不修改的文章而言，发布时间和更新时间一致，所以都可以满足。
因为 Next 默认主题是不显示修改时间的，所以如果需要按照修改时间排序，首先得显示修改时间，这个需求可以在这个问题下找到答案：[如何将首页和归档页的博文按照更新时间排序？](https://github.com/iissnan/hexo-theme-next/issues/1895) 在将修改时间添加到配置文件之后，每篇博客开始的时候就需要将 updated 字段加进去，这块有个坑：**date 和 updated 的值不能一样，否则不会显示。**
修改的策略其实和置顶一致，只需要把 `node_modules/hexo-generator-index/lib/generator.js` 中以下部分的 date 改成 update 就行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

上述代码引用自： 解决Hexo置顶问题

打赏

略

版权

略

图床

最近又收到七牛云的邮件了，说是之前的测试域名马上就要到期了，到期后会收回。为了避免到时候所有的图片都看不到，开始准备把图片迁移，有两种方案，其一：绑定自己的域名；其二，找其他图床。本来想着绑定就绑定吧，也没啥影响，然后发现绑定之前必须要备案才行，也就是说你所有的实名信息都需要提交到工信部，这我就不开心了。虽说也不准备做什么违法乱纪的事情，但总是不想处于这种监管的状态的。所以开始找第二种方案。然后发现了 sm.ms 图床，有很好的 api 支持，找到一篇文章有相关记录，里面很详细的记录了整个配置的过程：SM.MS: 一名优秀的图床的艺术之旅。

赠人玫瑰，手有余香