zblogphp安装了markdown编辑器插件后,点击锚点不跳转的解决方法
发布于: 2018-05-13 所属分类:
标签:
773
最近在zblog翻译privoxy中文手册过程中, 发现了一个问题, markdown的[TOC]可以正常生成目录,但是点击目录不会跳转。
怀疑是markdown的TOC目录生成有问题, 通过查看源码, 锚点链接 代码是 2.软件安装
正常, 锚点位置代码是 完全正常.
进一步试验, 文章里面, 我直接加html代码 ttt
, 然后文章页链接加上#ttt访问,还是一样不会跳转到锚点所在位置
为什么不跳转呢,百思不得解, 于是网上使用各种关键词搜索, 都没找到答案,看来还是得自己解决。
后来, 我又做了个尝试, 也是直接加html代码 ttt
, 但是加的方式不一样,不是在网站后台编辑时加, 而是用谷歌浏览器的devtools上, 直接编辑文章内容加上 , 然后发现, 这样加上的居然可以跳转。 于是,我推断,有可能是markdown的编辑器插件在前台文章内页初始化渲染的问题。
最后查看了markdown在文章内页的初始化脚本, 终于发现了问题所在. 这是markdown的初始化脚本
editormd.emoji = {path : "http://www.sgzhang.com/plugin/Editormd/images/github-emojis/",ext : ".png"};$(function(){
$("#html_content").hide();
var EditormdView;
EditormdView = editormd.markdownToHTML("md_content", {
emoji : false,
toc : true,
tocm : true,
taskList : false,
tex : false,
flowChart : false,
sequenceDiagram : true,
htmlDecode: true,
});
});
从上面脚本中可以看到, 它首先执行$("#html_content").hide();
把id为html_content的元素隐藏, 然后通过editormd.markdownToHTML("md_content", ...
把markdown内容渲染到id为md_content的元素, 这样就造成一个问题,md_content和html_content都存在一份文章内容, 两份内容, 也就有两个 ttt
这样的锚点标记,两个锚点的名称相同, 点击链接跳转时, 无法知道要跳转到哪一个锚点, 所以无法跳转。
知道了原因, 解决的方法就简单了, 只需修改一行代码, 把初始化脚本代码的 $("#html_content").hide();
改成 $("#html_content").remove();
即可.
发表评论
发表评论
暂无评论