マークダウンリーダーのApacheオンラインPHPバージョンを作成します-サイドバーに自動生成されたブックマークが表示されます
上記の処理によると、ブラウザでマークダウンファイルを開く場合、まだ小さな欠点があります。PDFファイルを読み取るような場合は、ブックマークを横に表示しても問題ありません。htmlでは、アンカータグとスパンタグの組み合わせでこれを行うことができます
<span id="tag-1-2-3-4-5">
<a class='close-sidebar' href='#xxxx">
以下に、そのような機能を実現する方法を説明します。
アイデア
ブラウザーでマークダウンファイルを読み取る場合、右側にサイドバーが表示され、サイドバーに自動生成されたブックマークが表示されます。サイドバーがアイコンの場合に最適です。アイコンをクリックしてサイドバーを表示します。サイドバーは、Webページの固定位置に固定またはフローティングされており、スクロールしても消えません。
github.comでサイドバー関連のオープンソースコードをしばらく検索したところ、シンプルサイドバーが上記の要件に近いことがわかりました。
よりシンプルなサイドバーをダウンロード
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のスパンタグを追加します
ステップ1：変数span_index_nを追加します
class Parsedown
{
# ~
const version = '1.8.0-beta-5';
protected $blk_no = 0;
ステップ2：スパンタグを追加する
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のデモディレクトリにあるright.htmlを参照し、関数text（$ text）関数の最後で次の変更を行います。
サイドバーを追加
$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以外の無関係な構成については、次のように左にコメントアウトするなどしてください。
.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、これは本来必要な機能を完全に達成します。