22 / 05 / 13

Hexo 搭建个人博客

主题 Aomori

安装 Hexo，部署访问

Hexo 中文文档 https://hexo.io/zh-cn/docs/index.html

git、nodejs 什么的自行安装不解释

# npm 安装 Hexo 脚手架
npm install hexo-cli -g

# 初始化 博客 默认模板
hexo init blog
cd blog

# 安装依赖
npm install

# 本地运行
hexo server

# 生成静态文件到public文件夹，可以用于部署到服务器上，比如我是windows服务器，在IIS下新建网站
hexo generate

以下两步通过ftp部署，暂未实验成功😂，deploy各种报错......，目前手动复制public内文件至服务器

# 由于我使用的是阿里云虚拟主机（windows版），自带ftp，所以我可以通过ftp发布，需要安装
npm install hexo-deployer-ftpsync --save

# 发布，需要按需要配置 _config.yml 下 deploy节点
hexo deploy

部署到 github pages

新建仓库，建议仓库名： [github用户名].github.io

// _config.yml 中配置发布
deploy:
  type: git
  repo: https://github.com/XXXXXX/XXXXXX.github.io.git
  branch: gh-pages // 分支随意

// 发布到github，遇到超时什么的错误，多试几次
hexo clean; hexo g; hexo d

发布成功后，就可以访问了：https://XXXXXX.github.io

自定义域名，注意点：需要在 source 文件夹下加上 CNAME

修改 aomori 主题代码

  • 移除文章内twitter、facebook分享

  • 网站底部增加备案号

  • 可配置 giscus 评论框位置

配置 giscus 评论插件

giscus文档 https://giscus.app/zh-CN 主题原作者的配置文档 https://aomori.linhong.me/v/chinese/features/comment

aomori 主题支持显示阅读量， 借助 leancloud

leancloud官网 https://leancloud.cn/

footer.ejs 中的代码，借鉴别人的代码，做了调整 源1：jekyll使用LeanCloud记录文章的访问次数 源2：晨曦添加阅读量统计 

<!-- 以下时访客统计 -->
<% if (config.leancloud.enable) { %>
  <!-- // 获取IP -->
  <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>

  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script src="https://unpkg.com/leancloud-storage@4.12.2/dist/av-min.js"></script>
  <script>
    // const AV = require('leancloud-storage');
    AV.init({
      appId: '<%= config.leancloud.app_id %>',
      appKey: '<%= config.leancloud.app_key %>',
      serverURL: '<%= config.leancloud.serverURL %>'
    });
   
//新增访问次数
function addCount(Counter) {
      // 页面（博客文章）中的信息：leancloud_visitors
      // id为page.url， data-flag-title为page.title
      var $visitors = $(".leancloud_visitors");
      // var url = $visitors.attr('id').trim();
      var url = window.location.pathname;
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      // 只根据文章的url查询LeanCloud服务器中的数据
      query.equalTo("post_url", url);
      query.find().then(function(results){
          if (results.length > 0) {//说明LeanCloud中已经记录了这篇文章
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("visited_times");// 将点击次数加1
            counter.save().then(function(counter){
                var newTimes = counter.get('visited_times');
                $('.leancloud-visitors-count').text(newTimes+"阅读");
              },
              function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            );
          } else {
            // 执行这里，说明LeanCloud中还没有记录此文章
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("post_title", title);// 把文章标题
            newcounter.set("post_url", url); // 文章url
            newcounter.set("visited_times", 1); // 初始点击次数：1次
            newcounter.save().then(function(newcounter){ // 上传到LeanCloud服务器中
                var newTimes = newcounter.get('visited_times');
                $('.leancloud-visitors-count').text(newTimes+"阅读");
              },
               function(newcounter, error) {
                console.log('Failed to create');
              }
            );
          }
        },
         function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      );
    }

    //仅根据url和title查出当前访问次数，不做+1操作
    function showCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      // var url = $visitors.attr('id').trim();
      var url = window.location.pathname;
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      // 只根据文章的url查询LeanCloud服务器中的数据
      query.equalTo("post_url", url);
      query.find().then(function(results){
          if (results.length > 0) {//说明LeanCloud中已经记录了这篇文章
            var counter = results[0];
            var newTimes = counter.get('visited_times');
            $('.leancloud-visitors-count').text(newTimes+"阅读");
          } else {
            //如果表里没查到记录，那就是异常情况了
            console.log('异常情况，不应该没记录的');
          }
        },
        function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      );
    }

    //判断访客是否已访问过该文章，及访问时间，符合条件则增加一次访问次数
    function judgeVisitor(ip) {
    // console.log("ip", ip)
      var Counter = AV.Object.extend("visited_times");
      var Visitor = AV.Object.extend("visitors_record");

      var $postInfo = $(".leancloud_visitors");
      // var post_url = $postInfo.attr('id').trim();
      var post_url = window.location.pathname;
      var query = new AV.Query(Visitor);

      query.equalTo("visitor_ip", ip);
      query.equalTo("post_url", post_url);
      query.find().then(function(results){
          if (results.length > 0) {
            // console.log('该IP已访问过该文章');

            var oldVisitor = results[0];

            var lastTime = oldVisitor.updatedAt;
            var curTime = new Date();

            var timePassed = curTime.getTime() - lastTime.getTime();

            if(timePassed > 1 * 60 * 1000) {
              // console.log('距离该IP上一次访问该文章已超过了1分钟，更新访问记录，并增加访问次数');

              addCount(Counter);

              oldVisitor.fetchWhenSave(true);
              oldVisitor.save(null, {
                success: function(oldVisitor) { },
                error: function(oldVisitor, error) {
                  console.log('Failed to save visitor record, with error message: ' + error.message);
                }
              });
            } else {
              // console.log('这是该IP 1分钟内重复访问该文章，不更新访问记录，不增加访问次数');
              showCount(Counter);
            }
          } else {
            // console.log('该IP第一次访问该文章，保存新的访问记录，并增加访问次数');

            addCount(Counter);

            var newVisitor = new Visitor();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newVisitor.setACL(acl);
            newVisitor.set("visitor_ip", ip);
            newVisitor.set("post_url", post_url);
            newVisitor.save(null, { // 上传到LeanCloud服务器中
              success: function(newVisitor) { },
              error: function(newVisitor, error) {
                console.log('Failed to create visitor record, with error message: ' + error.message);
              }
            });
          }
        },
         function(error) {
          console.log('Error:' + error.code + " " + error.message);
          addCount(Counter);
        }
      );
    }

    $(function() {
      if ($('.leancloud_visitors').length == 1) {
        // 文章页面，调用判断方法，对符合条件的访问增加访问次数
        judgeVisitor(returnCitySN.cip)
      } else if ($('.post-link').length > 1){
        // 首页 暂未使用
        // showHitCount(Counter);
      }
    });
  </script>
<% } %>
hexo
Aomori
Powered by Gridea