Hugo 主题开发笔记

Dec 26, 2019

我的极简 Hugo 主题 Notepadium 已被收录到官方主题推荐列表。 记录一下开发过程中的一些心得。 开发过程中 避免生成多余空行 Hugo 处理源文件时，会把 go 标记 {{ }} 所在行替换为空行保留在生成后的页面里，要避免这种情况需要使用 {{- -}} 告诉编译器需要移除空白。 …

给 MathJax 加上 Github 风格语法高亮

Dec 25, 2019

先看效果图： 添加以下 CSS 代码即可： .markdown-body p > span.math { display: inline-block; font-size: 85%; padding: 2px 4px; border-radius: 3px; color: #24292e; background-color: #f6f8fa; } .markdown-body .math .mo { color: #d73a49; } .markdown-body .math .mn { color: #005cc5; }

使用 OpenSSL 计算脚本文件的 SHA384

Dec 25, 2019

比如要计算 CDN 中 MathJax 的 sha384，先把脚本下载回来： curl -O https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js openssl dgst -sha384 -binary MathJax.js | openssl base64 -A 输出结果： e/4/LvThKH1gwzXhdbY2AsjR3rm7LHWyhIG5C0jiRfn8AN2eTN5ILeztWw0H9jmN% 最后的 % 表示结束，不是 Hash 的一部分。 使用如下： <script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML" integrity="sha384-e/4/LvThKH1gwzXhdbY2AsjR3rm7LHWyhIG5C0jiRfn8AN2eTN5ILeztWw0H9jmN" crossorigin="anonymous"> </script>

使用 Hugo v0.62 的渲染钩子（Render hooks）

Dec 24, 2019

Hugo 发布了新版本 0.62.0，新增加了 Markdown 渲染钩子（Render Hooks）的功能。 渲染钩子是 Goldmark 引擎的新特性，利用渲染钩子可以替代 shortcode 来实现自定义风格。 …

iOS 格式化浮点数时去掉末尾的 0

Dec 16, 2019

有时候需要把浮点数格式化为字符串显示到界面上，需要去掉末尾多余的 0。 例如 108 * 0.95 希望界面上显示的结果为 102.6 而不是 102.600000 很简单，使用下面的方式进行格式化： …

运用 AutoLayout 的优先级例子

Dec 14, 2019

当约束条件发生冲突时，系统会使用用优先级高的约束。 还可以通过设置约束为 deactive 状态来使约束不生效。 利用好约束的优先级，可以使布局代码简洁、逻辑清晰。 系统原生的 AutoLayout 代码写起来太冗长了，使用 SnapKit 来演示如何运用约束优先级，方便理解逻辑。 …

导出全部 Chroma 主题 CSS 文件

Dec 11, 2019

Chroma 是 hugo 默认使用的开源语法高亮引擎，使用 Go 语言编写，渲染速度很快。 使用以下 shell 脚本可以把内置的主题都导出为 CSS 文件： #!/bin/zsh styles=( \ abap \ algol \ algol_nu \ api \ arduino \ autumn \ borland \ bw \ colorful \ dracula \ emacs \ friendly \ fruity \ github \ igor \ lovelace \ manni \ monokai \ monokailight \ murphy \ native \ paraiso-dark \ paraiso-light \ pastie \ perldoc \ pygments \ rainbow_dash \ rrt \ solarized-dark \ solarized-dark256 \ solarized-light \ swapoff \ tango \ trac \ vim \ vs \ xcode \ ) for var in ${styles[@]}; do echo $var hugo gen chromastyles --style=$var > $var.css done

给 Hugo 开启 Disqus 评论系统

Dec 10, 2019

Hugo 已经内置了 Disqus 的模版，开启 Disqus 相当简单。 参考官方文档： https://gohugo.io/content-management/comments/ 首先需要注册一个 Disqus 帐号，官网是 https://disqus.com/ 然后创建一个站点，站点名称可以随意，这个名字稍后要用到。 …

在 iOS 里使用 Flexbox 布局

Dec 08, 2019

iOS 目前只有手动布局和自动布局两种方式，flexbox 布局只能引入第三方库进行支持 这个布局的思想是来自 CSS 里的 flexbox，关于 CSS Flexbox 可以参考这篇文章 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ …

在 Hugo 的 Markdown 里直接使用 HTML

Dec 05, 2019

hugo 在处理 Markdown 文档的时候会忽略里面的 HTML 代码，如果想在 Markdown 里嵌入 HTML 代码，可以使用 hugo 的 shortcode 来实现。 在 layouts/shortcodes 里新建一个 raw.html 文件，如果路径不存在可以用命令 mkdir -p layouts/shortcodes 创建。 …