Hugo, Front Matter Variable, Type

Hugo V40.2

Hugo 的 Front Matter Variable 有一个是 Type,它的默认值是这篇 post 所在的 directory ,如果这篇 post (假设文件名为 aaa.md ) 所在的目录是 blog ,那它最终的 url 是 xxx.com/blog/aaa/ ,而 Type 可以修改其中的 blog 为其它字符。

我遇到的问题是我的 posts 都是从网站(基于 WordPress )上用插件导出来的,这样每个 post (markdown file) 里的 Front Matter 会有 Type: posts 的属性。有这个设置使得这些 posts (markdown file) 的 template 是基于 posts template ,但这些 posts (markdown file) 其实是放在 blog 目录下的,按照我原来的理解,放在 哪个目录下(例如 blog ),其 template 是基于哪个 template 的(放在 blog 下,就基于 blog template )。但其实这个是可以被 type 这个 Front Matter 给 override 的。

解决办法就是把 Type: posts 都删掉,或者修改这些 markdown file 所在目录的文件名。

Hugo pagination bootstrap4

Hugo V40.2 , Bootstrap 4.1.1

在做 pagination 时,Hugo 文档说可以用内置的跟 Bootstrap 兼容的一个 pagination ,但我在用的时候,出来的样式不对。我看 Jimmysong博客源码 ,他用的就是官方说的内置的 pagination ,但他用的是 Bootstrap3 。

搜了下,有人也发现了 Hugo 说的跟 Bootstrap 兼容的 pagination 只是跟 Bootstrap3 兼容,而不是跟 Bootstrap4 兼容,并给出了解决办法。

Hugo Pagination Partial for Bootstrap4

apache2 ssl configulation subdomain

Environment: Ubuntu 16.04, Apache 2.4.18,

主域名已经配置好了 ssl ,想给一个二级域名配置 ssl ,证书从 sslforfree.com 那配置下载后,上传到 /etc/apache2/ssl ,在 /etc/apache2/sites-available 里复制主域名已经配置好的 conf 进行修改,见下图。

我不太确定上面的三个 <Directory> 是否需要删除。

然后需要敲下面一个命令,它会在 /etc/apache2/sites-enabled 生成一个软链接(应该是软链接吧)

然后重启一下 apache

 

Force http to https

这个配置需要在另一个 conf 里配置,即对应二级域名的 80 的 conf 里配置,加多下面三行。

完事的 config 见下面

 

 

 

 

 

sslforfree wildcard Certificates https SSL

第一次用 sslforfree.com 的 wildcard 功能,成功。之前没倒腾成功。

在输入框内输入的是 *.linminquan.com linminquan.com ,要求验证的是两个 DNS TXT 记录。

之前一直不理解为什么是同样的一个 _acme-challenge.linminquan.com 要 DNS TXT 到两个不同的值,只好按它的要求操作,后来居然是可以的。

验证时,第一行有显示 TXT Record(s) Found. 就可以了。

chrome 中查看生效要过一会。

js解析url

解析 URL Params 为对象,例如 ‘http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled’

parseParam(url)

才注意到 js 里有个专门用来处理 url 的 object, URL

 

用js实现一个计数器

用javascript实现一个计数器,使它具有下面的效果:
Increment(); // Number of events: 1
Increment(); // Number of events: 2
Increment(); // Number of events: 3
每次执行 Increment() 都会输出 “Number of events: N”, 且N每次都会加上1.

解密JavaScript闭包
https://zhuanlan.zhihu.com/p/28213094
下面链接中的 “用闭包模拟私有方法”
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

一开始想的是用 static 来实现,但 js 中的 static 只有 static method 。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

js获取嵌套数组里所有元素

给定一个随机数组,数组可能包含数组(也就是说数组元素可能为数组)。需求用js实现一个函数,返回该数组中所有元素。例如:数组[2,3,[4,6,[1,8]],12,10],返回结果为:[2,3,4,6,1,8,12,10]。

这个用递归来实现比较容易。

 

javascript – don’t make functions within a loop

有一次提交project时,被提示 don’t make functions with a loop ,查了些资料后才明白。

上面的代码可以正常输入 1 到 10 。

但上面的代码就会输出10个11 。

当看到输出结果时,想想就明白原因了,因为等到 1 秒后再去输出时,i 的值已经变成 10 了。

就因为容易出现这样的问题,所以不能在 loop 里 make functions 。

参考链接:https://www.youtube.com/watch?v=Nqfs14iu_us

=======20180420更新========

MDN中讲闭包时也有提到这个问题:在循环中创建闭包:一个常见错误

链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

html中script的属性async defer

在用到google map时,其最简单的demo里用到了async和defer。script是html的element,async和defer是script的attributes。

google map demo
https://developers.google.com/maps/documentation/javascript/examples/map-simple

网上有蛮多async和defer分别的作用及对比,两者在fetch其js file时都是异步,这时不影响html加载。async是一fetch到js file就执行,defer是fetch到后等待html加载完了再执行。但如果这两个都放在 </body> 前面的地方,那就区别不大了。

另外,async适合这个js file没有依赖其它的file,它自己执行完了不妨碍其它js执行。

async vs defer attributes (这个链接图示了两者的区别,要看)
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Asynchronous vs Deferred JavaScript (这个链接的结果很重要,要看)
https://bitsofco.de/async-vs-defer/

但上面的文章没有提到这两个属性同时使用的情况,google map demo就是同时用的。

w3中关于这两个属性同时使用有说明。

https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

也就是说同时用是为了兼容旧浏览器,旧浏览器可以识别defer(async将被忽略),那么可以推断,在modern web browsers里,写了两个属性时,应该识别的是async。

https://stackoverflow.com/questions/13821151/can-you-use-both-the-async-and-defer-attributes-on-a-html-script-tag

上面的链接里有个comment,

1.both async defer exist, modern browsers run as async; 2.both async defer exist, old browsers run as defer instead of default behavior

我觉得这个comment是对的。

https://developers.google.com/maps/documentation/javascript/tutorial
The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads.

上面链接中说明了为啥google map中要用async。但感觉讲得有问题,这个js在execution时还是会影响website render,除非是把 script element放在 靠近</body>的前面。