react-static html头部meta问题

事情起因

react-static 生成的项目默认有一个默认的 html 模板,目录: tmp/dev-server

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en" data-reactroot="">

<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" />
</head>

<body>
<div id="root"></div>
</body>

</html>

然而,改这个文件然后 yarn run build 之后会发现,毫无变化。
找到官方文档,有这么一段说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// An optional custom React component that renders the base
// Document for every page, including the dev server. If used, it must utilize the
// `Html` , `Head` , `Body` and `children` for react-static to work. The optional
// `siteProps` prop will contain any data returned by `getSiteProps` in your config
// and `renderMeta` prop refers to any data you potentially assigned to it during
// the custom `renderToHtml` hook.
Document: ({ Html, Head, Body, children, siteProps, renderMeta }) => (
<Html lang="en-US">
<Head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>{children}</Body>
</Html>
),

ok,开搞。

然而,事情并没有这么简单,加了这个配置后,问题又来了:

1
2
Exporting HTML across 4 threads...
ReferenceError: React is not defined

???
什么鬼?React-static里面没有引入React?开什么玩笑?
去网上找了找,并没有找到解决方案,倒是发现不少 react-static 的广告文。。。
得,只能自己动手。

解决方案

既然报了 React is not defined 错误,那我就个干脆手动引入吧。

1
import React from "react"

问题解决。

总结

react-static 不自动引入 React ,也是醉了。

nodejs递归遍历md文件

我的新版博客打算使用 react-static + markdown ,所以写了个递归遍历 md 文件的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var id = 0;

function readFileList(dir, filesList = []) {
// 列出所有文件或目录
const files = fs.readdirSync(dir);
// 遍历
files.forEach((item, index) => {
// 计算绝对路径
var fullPath = path.join(dir, item);
// 获取状态
const stat = fs.statSync(fullPath);
// 如果是目录
if (stat.isDirectory()) {
// 递归
readFileList(path.join(dir, item), filesList);
} else {
// 否则是文件 判断文件后缀名
if (item.slice(-3).toLowerCase() == ".md") {
// 文件分隔符
fullPath = fullPath.replace(/\\/g, "/");
// 分割
var path_sp = fullPath.split("/");
// 添加到列表
filesList.push({
id: id++,
userId: 1,
title: item.slice(0, -3),
year: path_sp[path_sp.length - 3],
month: path_sp[path_sp.length - 2],
path: fullPath,
body: fs.readFileSync(fullPath).toString(),
});
}
}
});
return filesList;
}
// 实参
var blog_md_list = [];
// 递归遍历md文件
readFileList(path.join(__dirname, "public", "md"), blog_md_list);

响应式布局

只需要在 css 文件中加入 @media 指令:

1
2
3
4
5
@media (min-width: 600px) and (max-width: 900px) {
.body {
background-color: #aaa;
}
}

然后在 @media 中设置样式。