zblogphp安装了markdown编辑器插件后,点击锚点不跳转的解决方法

by pxz


发布于: 2018-05-13 所属分类: php 标签: zblog 锚点 不跳转 markdown  1000


<p>最近在zblog翻译privoxy中文手册过程中, 发现了一个问题, markdown的[TOC]可以正常生成目录,但是点击目录不会跳转。 </p> <p>怀疑是markdown的TOC目录生成有问题, 通过查看源码, 锚点链接 代码是 <code><a class="toc-level-3" href="#2.软件安装" level="3">2.软件安装</a></code> 正常, 锚点位置代码是 <code><a name="2.软件安装" class="reference-link"></a></code> 完全正常.</p> <p>进一步试验, 文章里面, 我直接加html代码 <code><a name="ttt">ttt</a></code>, 然后文章页链接加上#ttt访问,还是一样不会跳转到锚点所在位置</p> <p>为什么不跳转呢,百思不得解, 于是网上使用各种关键词搜索, 都没找到答案,看来还是得自己解决。</p> <p>后来, 我又做了个尝试, 也是直接加html代码 <code><a name="ttt">ttt</a></code>, 但是加的方式不一样,不是在网站后台编辑时加, 而是用谷歌浏览器的devtools上, 直接编辑文章内容加上 , 然后发现, 这样加上的居然可以跳转。 于是,我推断,有可能是markdown的编辑器插件在前台文章内页初始化渲染的问题。 </p> <p>最后查看了markdown在文章内页的初始化脚本, 终于发现了问题所在. 这是markdown的初始化脚本</p> <pre><code>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, }); }); </code></pre><p>从上面脚本中可以看到, 它首先执行<code>$("#html_content").hide();</code> 把id为html_content的元素隐藏, 然后通过<code>editormd.markdownToHTML("md_content", ...</code> 把markdown内容渲染到id为md_content的元素, 这样就造成一个问题,md_content和html_content都存在一份文章内容, 两份内容, 也就有两个 <code><a name="ttt">ttt</a></code> 这样的锚点标记,两个锚点的名称相同, 点击链接跳转时, 无法知道要跳转到哪一个锚点, 所以无法跳转。</p> <p>知道了原因, 解决的方法就简单了, 只需修改一行代码, 把初始化脚本代码的 <code>$("#html_content").hide();</code> 改成 <code>$("#html_content").remove();</code> 即可.</p>

发表评论

暂无评论

搜索
用户登陆