博客 on 月盾的博客

gitpage Hugo统计每一篇文章浏览量

Fri, 18 Jun 2021 20:03:41 +0800

接上篇《博客迁移至hugo gitpage》后，因为缺失了每一篇文章的浏览量，而hugo又不具备这样的功能，原因还是gitpage不具备数据存储能力，自然就没办法统计每一篇文章的浏览量了。原本想使用自己服务器提供一个接口来记录，但发现https协议不支持调用http协议的接口，会出现block:mixed-content错误。

错误：https页面去发送http请求报错(浏览器阻止https发送http请求)

问题是明确了，但是我也没办法提供https的接口，免费的证书也用在了www.yuedun.wang上了。

后来想到了leancloud，直接在前端调用api，将数据存储在云端。

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.11.1/dist/av-min.js"></script>
<script>
  // https://leancloud.cn/docs/sdk_setup-js.html#hash14962003 
  // https://leancloud.cn/docs/leanstorage_guide-js.html#hash813593086
  const appId = "xxx";
  const appKey = "xxx";
  const serverURL = "xxx";
  AV.init({ appId, appKey, serverURL });
  function updateCollect() {
    const collect = new AV.Query('Collect');
    const url = location.pathname;
    collect.select(['url', 'pv'])
    collect.equalTo('url', url);
    collect.first().then((col) => {
      if (!col) {
        // 声明 class
        const Collect = AV.Object.extend('Collect');
        // 构建对象
        const collect = new Collect();
        // 为属性赋值
        collect.set('url', url);
        collect.set('pv', 1);
        collect.save()
      } else {
        col.increment('pv', 1)
        col.save();

        // 元素不存在的情况
        try {
          const context = document.querySelector('.post__meta.meta');
          const pv = document.createElement('div');
          pv.setAttribute('class', 'meta__item-author meta__item');
          const span = document.createElement('span');
          span.setAttribute('class', 'meta__text');
          span.innerText = "浏览（" + col.get('pv') + "）";
          pv.appendChild(span)
          context.appendChild(pv)
        } catch (error) {
          console.error(error);
        }
      }
    });
  }

  updateCollect()
</script>

因为hugo-dpsg主题没有浏览量字段，所以通过js在对应的位置插入浏览量字段即可。

博客迁移至hugo gitpage

Thu, 17 Jun 2021 19:38:31 +0800

为什么迁移？

6月初的时候，3年前买的阿里云服务器到期了，又买了其他服务器，但是只有1年期，于是进行了一番数据，应用迁移，这么一顿操作下来还是挺累的，尤其是在linux上安装mysql，mongodb，安装后又是连接不上，用了好几天时间才搞定，挺烦的。
再想到一年后又是一顿操作，不由得一个激灵。

经过一番的思量后，决定将自建博客迁移至gitpage上。

自建和gitpage优劣对比

首先列出自己博客具备的功能：

首页包含最近10篇文章的标题和部分内容，最近发表的5篇，分类，标签，友链
目录所有文章时间线
留言自维护留言系统
微博新浪微博，最近出问题不显示了
速记简单记录
关于自我介绍

整体比较简单，没什么复杂功能。而很多静态博客也具备这些功能，而且做的更好，所以基本不会有主要功能的缺失。所以迁移到gitpage上也不会有什么问题。

劣势

静态博客在一些细节功能上面确实会有缺失，比如：

评论功能，数据原来是存在自己服务器上的，gitpage不具备数据存储能力，所以需要对接第三方评论或留言功能。
目录缺失，这点主要由博客主题决定，有些主题是没有目录功能的。
PV/UV统计，同样是由于数据存储的缺失，所以gitpage也没有这样的统计功能，但是可以添加谷歌，百度统计之类的。
自定义功能较弱，只能使用主题提供的页面模式，除非不使用静态博客工具，完全自己开发。
不能在线编辑。

优势

免费，没有服务器费用。
可以自定义域名，只需要一丁点儿的域名费用。
seo良好。
规范的书写格式，使文章内容更统一美观。
更强大的编辑器，可以选择自己喜欢的markdown编辑器。
便于本地检索。
数据更保险，不易丢失。
安全，静态博客可以避免一些网络攻击。

整体来说，除了数据存储功能缺失外，其他都是可以实现的。

迁移过程

将mongodb数据中的博客导出为本地markdown文件。

// mongodb数据转markdown
function genMd() {
	return Blog.find({ status: 1 }, null, { sort: { '_id': -1 } })
		.then(data => {
			data.forEach((b) => {
				debug(b)
				let tags = b.tags.split(",")
				let blog = `---
title: "${b.title}"
description: "${b.content.replace(/<[^<>]+>/g, "").replace(/\r\n/g, "").replace(/\n/g, "").substr(0, 80)}"
date: ${b.updatedAt.toISOString()}
draft: false
authorbox: false

categories:
  - "${b.category}"
tags:
  - "${tags[0]}"
  - "${tags[1]}"
  - "${tags[2]}"
  - "${tags[3]}"

---
${b.content}
                    `
				fs.writeFileSync(`f:/workspace/yuedun\.wang/content/blogdetail/${b.id}.md`, blog, { flag: 'a+' })
				// debug(b.createdAt.toISOString())
			})
			return "data";
		});
}

ok！完成。

关于写博客的一些奇怪事情

Sun, 20 Sep 2015 03:15:19 +0000

我是做技术的，平时也有喜欢写写博客，但是由于自己作文水平有限，又比较懒，所以很少写大篇幅的内容，也很少为了写一篇文章而到处收集资料，毕竟不是专业写手，就是为了记录一下工作遇到的问题，虽然写的时候本着一颗能帮助他人的心，希望自己写的东西有助于其他人参考，但是通过平时查找资料的观察发现，有时在看别人文章的容总是很难读懂，或者写的不够详细，然后又找了很多资料后终于搞懂了。事后一想，还是自己写一篇更易懂的博客吧！

听说优秀的博客都要有配图
然后花了点时间把自己理解的整理出来，很有成就感的发表出去，可谁又能想到其实自己也可能重蹈覆辙，走了前人的路，在别人看来同样晦涩难懂。造成这种情况的原因其实与作者有关与读者也有关，作者不能全方位的表达出思想，读者又不能百分之百的理解作者的意图，然后就形成了后浪推前浪的补充风波，或许知识就是这样不断翻新传播的

考虑学习前端开发

Thu, 30 Oct 2014 15:33:10 +0000

从开始学习nodejs就关注了前端方面的技术，主要就是HTML，css，现在还真有想法深入学习一下。以前一直从事着后端开发，到现在已有三年，但是感觉自己遇到了一下瓶颈，虽然在工作中没什么难倒的技术问题，但是做着重复的工作实在是没有提升。之前的公司没有值的学习的东西，现在的公司有东西可以学习，但是作为外包可能不会待太长时间，就现在来说，也没有做过核心的东西，所以感觉自己这样下去没有什么竞争力，于是决定从宽度上拓展，下决心学习了nodejs,当初为了学习不知不觉就建立了这个博客，由于没有前端功底，就照搬了一个模板，想要修改点样式却发现很吃力，再看看nodejs,就像是给前端开发的服务端语言，而我却不懂前端，就算学习了好像也派不上用场，好尴尬的存在啊，没办法，还是该学习一下前端知识，至少要能够轻松的修改一个已有的页面吧，要纯粹的搞设计估计还要重新来过，又要花个三五年时间，还是划不来，不过应该主攻后端，兼顾前端，前后通吃。那么我想就从HTML5，CSS3开始吧。