Typecho丨Handsome主题下在EditorMD与前台解析冲突的情况下使用其样式

December 29, 2017

2008 views

3008 words

由于 handsome 4.0 主题的 PJAX 与 EditorMD 前台 Markdown 解析接管没有很好的契合，会导致 PJAX 加载后文章内容不解析的情况，此时适用这一解决方案。
如果其他主题也有类似情况，那么可以尝试。

解决方案

注：EditorMD 的 css 样式实际上是大多是来源于
https://github.com/sindresorhus/github-markdown-css

解决方案步骤

主要步骤

1.使用 Parsedown 插件接管前台 Markdown 解析
经过测试这个插件可解析的 Markdown 语法多于 Typecho 的自带解析，而且不会有 PJAX 问题。如果你使用其他的前台 Markdown 解析，不保证以下脚本的完全有效，可能需要根据实际情况自行魔改。
2.下载这个js脚本，上传到站点中任意位置，并在网页模板中引用（推荐在 body 尾部）
如果是 handsome 主题的话，footer.php 位于 (Typecho根目录)/usr/themes/handsome/component/footer.php，在之前找个合适的位置插入即可。

<!-- In footer.php -->
<script type="text/javascript" src="(这个脚本的路径)"></script>

3.下载这个css样式，上传到站点中任意位置，并在网页模板头部引用
如果是 handsome 主题的话，header.php位于 (Typecho根目录)/usr/themes/handsome/component/header.php

<!-- In header.php -->
<head>
    ...
    <link href="(这个css的路径)" rel="stylesheet">
    ...
</head>

4.如果 Typecho 主题设置中有 自定义js 以及 自定义PAJX回调函数 的话
比如 handsome 主题，则将以下 JavaScript 内容加入到这两个设置项中；若没有则需要自行在网页模板中引用并添加含有同样内容的 PJAX 回调函数

$(document).ready(editormdSupport);

5.完成
以上 js 与 css 均已压缩、混淆。

可选步骤

如果觉得在刷新网页的时候会有一瞬间的文章样式改变而觉得很不舒服，可以在主题的文章输出模板中手动给文章所在的最近一级的 div 加入 editormd-html-preview 这个 class 即可。

handsome 主题例子：
编辑文件 (Typecho根目录)/usr/themes/handsome/post.php
找到

<div class="entry-content l-h-2x">

改为

<div class="entry-content l-h-2x editormd-html-preview">

即可

F&Q

非 handsome 主题使用注意事项
由于 css 优先级关系等复杂问题：

文章最外层一定要有一个 id 为 post-content 的 div
文章次外层一定要有一个 class 包含 entry-content 的 div

并且不能保证与本站样式毫无偏差，具体还请根据需要魔改下方的源码来使用。

限制代码块最大高度
当代码块宽度太大需要左右滚动，而高度同时也超过屏幕高度时就会产生不方便横向滚动的尴尬情况，可以通过 css 解决这个问题。

#postpage pre{
    max-height: calc(100vh - 100px);
}

这句代码会将 pre代码块的最大高度限制为比屏幕高度低 100px

效果

本站目前使用的就是这个解决方案。

另外，本文提供的这个 css 也可以用来修正 EditorMD 接管前台 MarkDown 解析之后样式不正确的问题。

JS源码（未压缩混淆）

//editormdSupport.js
function editormdSupport() {
    //使 EditorMD 的样式能应用于文章
    $('#post-content .entry-content').addClass('editormd-html-preview');
    //为每一行添加 li 标签以应用行标和奇偶行异色效果
    $('pre code').each(function() {
        var codeClass = $(this).attr('class');
        var codeTxt = $(this).html().split("\n");
        var finalHtml = '<ol class="linenums">';
        var lCnt = 0;
        for (var i = 0; i < codeTxt.length; i++) {
            finalHtml += '<li class="L' + lCnt + '"><code class="' + codeClass + '">' + codeTxt[i] + '</code></li>';
            if (++lCnt >= 10) lCnt = 0;
        }
        finalHtml += '</ol>';
        var pre = $(this).parent('pre');
        pre.addClass('prettyprint linenums prettyprinted');
        pre.html(finalHtml);
    });
    //调整 ol 宽度，解决每行底色覆盖不全问题
    $('pre ol.linenums').each(function() {
        var codes = $(this).find('code');
        var maxWidth = 0;
        $(codes).each(function() {
            var width = $(this).width();
            if (width > maxWidth) maxWidth = width;
        });
        $(this).width(maxWidth);
    });
}

css 文件不放源码，实际上就是从 EditorMD 中扒出来并自己修改过的而已。