next-theme博客园主题

e x T

1 特性

A 高度还原next-theme^[1]
A 论文规范排版,正文字体、代码高亮、表格样式
A 文章页显示摘要、关键词
A 导航区归档、相册、搜索
A 作者信息、联系、订阅
A 响应式设计
A 自动生成目录、滚动贴顶
A 阅读进度、一键至顶、顶部进度条
U 优化评论区显示
U 优化上下文切换

2 预览

2.1 截图

图2-1 文章预览
图2-2 响应式预览

2.2 样例

博客园 <=> hexo

3 选型

3.1 为什么选择博客园

经常使用搜索引擎查找某些问题会发现博客园有着良好的SEO,相比自主建站或者其他静态站点方式，省去了SEO优化和推送，便于更好的呈现和分享。
博客园用户大多是早期开发者，内容可信度高。由于没有其他平台类似的激励计划(比如X币)，写文章出发点很纯粹，也就不会存在用一两句话凑一篇文章、凑一篇原创（比如CSDN）,即便存在也往往就是标准答案。
搜索结果比较真实，不像CSDN，通过在大量相干不相干的广告和文章链接中夹带着文章，导致可能搜索概要中含关键词但是打开文章却毫无干系，迫使在其环境下跳来跳去增加点击率和广告曝光率，却永远找不到答案。
免备案,免服务器,https,自动二级域名(xxx.cnblogs.com)
支持标准markdown，渲染准确，可完美迁移。图片不会像其他平台一样强制转内链，但还往往转不成功需要找原图再上传。
重要:支持高度自定义，jquery于网页的意义就好比ssh的22端口于服务器的意义。不像~~CSDN~~，只能换头图和底图，还得开会员.

3.2 为什么选择next-theme(Pisces)

真正大道至简。很多主题标榜极简、专注阅读，但往往花样繁多。
可配置、可自定义、可扩展。

4 使用

4.1 基本步骤

下载源码:https://github.com/MakerGYT/cnblogs-theme-next/releases/tag/v0.1.0

打开后台

选择博客皮肤为custom,勾选禁用模板css,申请js权限
将三个文件内容分别复制入相应区域(页首、页尾、定制css)
在选项中勾选首页仅列出标题与摘要,控件显示勾选公告
通过随笔写文章，填写摘要和标签后发布。
(可选),由于无法在首页获取头像，如需正常显示，手动在foot.html头部配置avatar(可在头像设置上传后右键头像获取链接)

4.2 配置

4.2.1 信息配置

github: 右上角跳转github用户名,默认为本仓库链接
author: 作者，默认取后台设置
siteTitle: 网站标题默认取后台设置
gallery: 要展示的相册ID(新建相册后在url中获取ID，如1796566)

4.2.2 主题色配置

下列色值参考了Ant Design^[2]

/*custom.css*/
:root {
  --primary-color:#027AFF;/* 全局主色*/
  --body-bg-color: #f5f7f9; /*页面背景色*/
  --content-bg-color: #fff; /*页面内容背景色*/
  --heading-color: rgba(0, 0, 0, 0.85); /* 标题色 */
  --text-color: #353535; /*主文本色*/
  --text-color-secondary:rgba(0, 0, 0, 0.45);/*次文本色*/
  --text-color-grey:rgba(0, 0, 0, 0.25); /*失效色，无需关注色*/
  --link-color: #555; /*链接色*/
  --code-bg-color:#f0f0f0; /*代码块背景色*/
}

可通过devtools调试来选择预览
图4-1 通过devtools调试来选择

4.2.3 建议

对编辑器类型没有要求，但建议使用markdown编辑器，语法可参考github^[3]，实际编辑规范可参考另一篇文章^[4]

5 开发

5.1 原则

能通过脚本获取的信息，如用户已经在管理后台设置的信息，就无需再次配置
不应该完全自定义而脱离博客园设置，比如个人信息应该以默认设置为主,尽可能作为补充而不冲突
专注于阅读体验而非花里胡哨
不必苛求完全与next原主题一致，毕竟该主题也一般需要改动，适合、可用即可。

5.2 Todo

优化配置方式
显示代码行和复制
修复可能存在的时序问题
修复订阅(非导航区id="blog_nav_rss"无法绑定事件)

License

stevenjoezhang.Next-theme documentation[EB/OL].https://theme-next.js.org/ .2020 ↩︎
Ant design.定制主题[EB/OL].https://ant.design/docs/react/customize-theme-cn .2020 ↩︎
Github.Mastering Markdown[EB/OL].https://guides.github.com/features/mastering-markdown/ .2014 ↩︎
MakerGYT.排版规约[EB/OL].https://www.cnblogs.com/makergyt/p/12673064.html .2020 ↩︎