Infinite Games

Less is More.

自定义 Hugo 左右分栏源码阅读样式

个人比较喜欢看分析源码的文章,在很多这样的文章中都粘贴了大量的源码,逐行进行分析,也不是不能用,总感觉这样的做法有两个体验上的小问题:

  1. 源码占据字符数远远大于源码解析的字符数(8:2?),撑开了文章的长度,显得文章特别长;
  2. 不能兼顾看源码和源码解析,需要在上下翻滚文章,我希望能在看解析时同时看源码,解析和源码处于一屏;

个人认为比较理想的结构是:左边源码,右边解析,在网上没有找到现成的,自己简单实现一个好了。

效果如下:

export function useReducer<S, A>(
  reducer: (S, A) => S,
  initialState: S,
  initialAction: A | void | null,
): [S, Dispatch<A>] {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();
  let queue: UpdateQueue<A> | null = (workInProgressHook.queue: any);
  if (queue !== null) {

最开始的两句代码是每个Hooks都会做的统一代码:

currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
workInProgressHook = createWorkInProgressHook();

技术实现

实现原理:使用 hugo 的 short code 模板,在 markdown 内容里标记源码和解析,最终生成文章时套上特定的 html 标签和 css 样式,调整 css 样式实现左右布局。

我们应该有个接收两个参数的 short code,分别是源码内容和解析内容,本质上 short code 就是一个函数,我们假设有一个这样的函数 func shortCode(sourceCode, sourceContent string),转换成 short code 语法就是:

source
source

接下来定义好模板:

<!-- layout/shortcodes/source.html -->
<div class="source">
    {{ .Inner }}
</div>

<!-- layout/shortcodes/source_code.html -->
<div class="source_code">
    {{ .Inner | markdownify }}
</div>

<!-- layout/shortcodes/source_content.html -->
<div class="source_content">
    {{ .Inner | markdownify }}
</div>

最后用 css 布局:

.source {
  display: flex;
  padding: 12px 0;
}

.source .source_content {
  flex: 1;
  padding: 12px;
}

.source .source_code {
  flex: 1;
  border-right: 1px solid #e1e4e8;
  padding: 12px;
}