这篇文章用于记录使用 typecho 过程中遇到的令我个人不舒服和感觉可以改进的地方、以及一些想法，改造过程也会记录在这篇文章中。

目录（虽然没有跳转的链接）

  • 概览

    • 优点
    • 缺点
    • 想法
  • 改造方法探究
  • MathJax 数学公式支持
  • highlight.js 语法高亮支持
  • 其他 style 微调

概览

大体来说体验还行吧，毕竟傻瓜式安装（逃
暂时也还没有找一些其他主题来用，用的默认主题（还行比较简洁），不过即使换了主题很多功能上的东西应该也都差别不大，下面我简单列一下我个人感觉使用上的优缺点。

优点

  1. 默认支持 markdown

    • 不支持 markdown 的文字书写工具不是好工具（暴言
  2. 安装方便（可能是最大的优点之一）
  3. 给文章打标签很方便
  4. 因为是 web 端撰写所以用各种设备写都还算方便

缺点

  1. markdown 不支持 latex，插数学公式不方便 已改造完毕

    • 看什么时候无聊加一个 mathjax 拓展一下（

  2. 插入图片不方便

    • 居然不支持粘贴插入图片，都 9102 年了还非要上传先...

  3. 无法在撰写文章页面直接对分类进行管理

    • 哪怕不能删除分类（因为所属的文章要处理），增加和修改名称还是能做的吧...
  4. 代码块没有高亮（不好看 已改造完毕

  5. 输入框没有捕获 Tab 键输入

    • 一按 Tab 焦点就飞了
  6. 文章似乎只记录了发布时间，并没有记录最新更新时间&版本信息（同下面的想法第一点

想法

  1. 能不能跟 git 联动？博文的修改需求应该还是不小的...

    • 但是没有个版本管理，旧的内容删了就删了多可惜，都是心血啊（

  2. 能不能绑定什么远端 git 仓库并且设钩子？

    • 反正都是 markdown，绑个远端仓库设个钩子，push 自动发布，书写体验不是也挺好
    • 相当于增强版(～～傻瓜版～～）的 hexo，毕竟这玩意可是自带后端的（
  3. 我想在 web 端的编辑器上加一个自动目录生成器（
  4. 预览窗格改为并列同步预览（或者可切换）

改造方法探究

本着想尽量优雅的原则，发现 typecho 是支持插件的，而且好像不少地方也都有给插件埋点，而且插件可以很方便的启用和关闭（
然后花了大概 10 min 看文档和相关资料，发现相关资料和文档真 ** 是少得可怜，要写一个好插件感觉甚至还要去读插件管理相关的源码，所以干脆抛弃了优雅，改为以速度优先的准则来改造。

在 typecho 的 /usr/theme 文件夹下是主题的文件夹，主题似乎对网站拥有几乎完全的操纵能力...，我把默认主题的文件夹复制了一份然后修改一下元数据便于在后台区分，之后所有的变动都在这个新的主题下做修改。

typecho 居然是直接把主题文件夹下的所有文件暴露给后台然后暴力写代码的...

MathJax 数学公式支持

找到 MathJax 的官网，按文档说明，把 js 文件在模板的 header.php 中引入并加载。

由于 MathJax 默认的行内公式没有使用美元符号做标记，而在 markdown 里面输出转义符其实要打两次，所以引入 js 文件前先设置使得行内公式同时响应美元符号标记。

<!-- Mathjax -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
    elements: ['main']
});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

块级公式显示效果是这样：

$$ \lim_{n\to\infty}(\frac{1}{n+1}+...+\frac{1}{2n}) = ln2 $$

行内公式是 $\sqrt{n}$ 这样。

highlight.js 语法高亮支持

弄的时候顺便用 highlight.js 把语法高亮也给弄了。
效果如下：

#include <iostream>
int main()
{
  std::cout << "F**k";
  return 0;
}

做法也是在 header.php 里边引入相关 js 文件即可，直接看官网文档就行了。
但关于超宽的水平代码块，有那么几个值得注意的点：

  1. 由于 iOS 上 webkit 内核的特殊性，默认的只用 overflow-x: auto 没法使得超宽的代码块水平滚动（其他设备和系统就没问题）。

    • 所以我把样式文件放到了服务器上并做了修改（加上 white-space: nowrap; 后 webkit 的水平滚动问题解决）。

  2. 由于上述所添加的 white-space: nowrap;，导致 pre 标签内的所有空白符都不显示也不折行了，所以也需要再处理一下。

    • 所以在 DOMContentLoaded 时间内，初始化高亮之前，先用 js 把 pre code 标签内的代码的所有空格替换成 &nbsp;，把换行符替换成 <br>。因为 html 实体不会受 white-space: nowrap; 的影响。

至此，代码高亮已经设置完毕，在 iOS 设备上也可以实现超宽的代码块水平滚动查看的功能了。

<!-- highlight.js -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('hljs.monokai.css?ver=20190408'); ?>">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  hljs.configure({useBR: true}); // fucking nouse
  document.querySelectorAll('pre code').forEach(function (e) {
      e.innerHTML = e.innerHTML.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
  });
  hljs.initHighlighting();
});
</script>

其他 style 微调

  1. 因为原本的代码块有 padding，在语法高亮下不好看，所以改为了 0。
  2. 段落没有缩进... 也需要调整一下

  3. 默认主题引入的浏览器标准化 normalize.css 加载失败了

    • 改为引入 https://necolas.github.io/normalize.css/8.0.1/normalize.css
code { padding: 0; }
.post-content>p { text-indent: 2em; }

标签: none

仅有一条评论

  1. forseason forseason

    很有参考价值。

    回复

添加新评论