打造Apache在线PHP版markdown阅读器 —— 侧边栏显示自动产生的书签
依上文处理，浏览器中打开markdown文件，仍然有小小的缺憾：要是像阅读PDF文件一样，侧边显示书签就好了。在html中，组合使用锚点和span标签可以做到这一点
<span id="tag-1-2-3-4-5">
<a class='close-sidebar' href='#xxxx">
下文说明怎么做到这样的功能。
思路
在浏览器中阅读markdown文件时，右侧显示一个侧边栏，侧边栏中显示自动产生的书签，最好是侧边栏是一个图标，点开图标显示侧边栏。侧边栏固定或浮动在网页上的某个固定位置，滚动时不消失。
在github.com中搜索了一阵sidebar相关的开源代码，发现simple-sidebar比较接近上述需求。
下载 simpler-sidebar
下载url: https://github.com/simple-sidebar/simpler-sidebar/releases
然后，将其demo和dist目录下的文件拷贝到htdocs目录
mkdir xxx/htdocs/md/asset/sidebar
cp -rf simpler-sidebar-master/demo/assets xxx/htdocs/md/asset/sidebar
cp -rf simpler-sidebar-master/demo/assets/css/amin.css xxx/htdocs/md/asset/sidebar/sidebar.css
cp simpler-sidebar-master/dist xxx/htdocs/md/asset
修改ParseDown.php文件
为H1、H2、H3添加span标签
步骤一: 添加变量span_index_n
class Parsedown
{
# ~
const version = '1.8.0-beta-5';
protected $blk_no = 0;
步骤二: 添加span标签
protected function blockHeader($Line)
{
$level = strspn($Line['text'], '#');
if ($level > 6)
{
return;
}
$text = trim($Line['text'], '#');
if ($this->strictMode and isset($text[0]) and $text[0] !== ' ')
{
return;
}
$text = trim($text, ' ');
// 如果已有span，则保留原来的span，否则，自动产生一个
$this->span_index_n++;
$temp = strstr($text, "<span") ? $text : ('<span id="wz-h-' . $this->span_index_n .'">' . $text);
$Block = array(
'element' => array(
'name' => 'h' . $level,
'handler' => array(
'function' => 'lineElements',
'argument' => $temp,
'destination' => 'elements',
)
),
);
return $Block;
}
修改输出的html流
参考simpler-sidebar的demo目录下的right.html，在function text($text)函数的末尾作如下修改。
添加sidebar
$htmlstyle= '<html><head>
<meta charset="utf-8">
<link rel="stylesheet" title="Default" href="http://192.168.1.3/md/demo/styles/default.css">
<link rel="alternate stylesheet" href="http://192.168.1.3/md/demo/styles/vs.css">
<link rel="alternate stylesheet" href="http://192.168.1.3/md/demo/styles/xcode.css">
<link rel="stylesheet" title="Default" href="http://192.168.1.3/md/asset/sidebar/sidebar.css">
</head><body>
<div class="navbar main" id="navbar-main">
<div class="load-this">
<div id="sidebar-main-trigger" class="icon float-right">
<img src="http://192.168.1.3/md/asset/sidebar/assets/imgs/icon-menu-24px-x2.png" width="24px" alt="Menu Icon" />
</div>
</div><!--a ajax helper-->
</div><!--.navbar.main-->
<div class="sidebar main right" id="sidebar-main" style="width: 500px ! important"><div class="wrapper">
<nav> <ul id="wz-contents-l">
</ul></nav>
</div></div>
<div class="common">';
添加javascript代码，自动产生书签
$htmltail = '</div>
<script src="http://192.168.1.3/md/asset/jquery-2.1.1.min.js"></script>
<script src="http://192.168.1.3/md/asset/hilight/highlight.pack.js"></script>
<script src="http://192.168.1.3/md/asset/sidebar/assets/js/vendors.js"></script>
<script src="http://192.168.1.3/md/asset/sidebar/assets/js/sidebar/main-sidebar-right.js"></script>
<script src="http://192.168.1.3/md/asset/jquery.simpler-sidebar.min.js"></script>
<script> hljs.initHighlightingOnLoad(); </script>
<script>
$(document).ready(function() {
$("pre code").each(function (t, i) {
var e = $(i);
var a = e.find("code");
if (!!a.hasClass("hljs")) {
hljs.highlightBlock(a.get(0)); }
e.show();
});
var wz = $("#wz-contents-l");
$(":header").each(function(){
var k = $(this).get(0);
if (k.nodeName == "H1" || k.nodeName == "H2" || k.nodeName == "H3") {
var a = $(this).find("span");
var b = a.get(0);
wz.append("<li><a class=\'close-sidebar\' href=\'#" + b.id + "\'>" + b.textContent + "</a></li>")
}
});
});
</script></body></html>';
//return $markup;
return $htmlstyle. $markup . $htmltail;
现在，打开浏览器阅读.md文件，页面顶部显示有固定高度的“导航栏”，点击导航栏中的图标，显示侧边栏。这样，已经可以工作了，下一步，让我们做得更完美一些。
修改CSS
编辑xxx/htdocs/md/asset/sidebar/sidebar.css这个文件，删除除了。navbar和.sidebar之外的无关配置，注释掉left等，如下：
.navbar.main {
position: fixed;
top: 15;
right: 5;
/*left: 0;*/
padding: 0 1px;
height: 24px;
width: 24px;
line-height: 24px;
background-color: #29b6f6;
-webkit-box-sizig: border-box
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 5;
-webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
}
.navbar.main::after {
content: "";
display: table;
clear: both;
}
.navbar.main * {
display: inline-block;
}
.navbar.main a {
text-decoration: none
}
.navbar.main .icon {
padding: 0 1px;
cursor: pointer;
}
.sidebar {
position: fixed;
top: 5px;
bottom: 0;
width: 380px;
background-color: #fafafa;
}
#sidebar-main {
top: 5px;
}
.sidebar.right {
/*right: -380px;*/
text-align: left;
}
.sidebar.left {
left: -380px;
}
.sidebar a {
text-decoration: none;
display: block;
}
.sidebar .wrapper {
position: relative;
height: 100%;
width: 100%;
padding: 1em;
padding-top: 1.5em;
overflow-y: auto;
-webkit-box-sizig: border-box
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar nav {
margin-bottom: 24px;
}
.sidebar nav ul {
list-style-type: none;
margin: 0;
padding: 0px;
}
.sidebar nav ul li {
padding: 2px 0;
margin: 2px 0;
}
.sidebar nav ul li.title {
font-weight: bold;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
测试
现在，再次打开浏览器阅读.md文件，页面顶部右侧显示的是导航栏图标
点击图标会显示侧边栏。
OK，这样完美地达到了起初需求的功能。