Как создать вкладки jQuery из Markdown
-
03-07-2019 - |
Вопрос
В настоящее время я использую основанную на PHP систему управления контентом, которая генерирует свое HTML-содержимое с помощью Markdown Extra . Большая часть контента структурирована по заголовкам и подзаголовкам, что приводит к очень длинной странице. В начале каждой страницы я создаю оглавление с помощью списка и Markdown Extra's Атрибут идентификатора заголовка .
Чтобы сократить продолжительность просмотра страницы, я бы хотел использовать плагин вкладок
Проблема в том, что вывод Markdown Extra не совместим с тем, что jQuery плагин вкладок ожидает, потому что Markdown Extra не переносит содержимое раздела в отдельный тег div.
Есть ли способ заставить эти две библиотеки работать вместе?
ИЗМЕНИТЬ
Вот как выглядит вывод HTML:
<p>Some intro text...</p>
<h3>Table of content</h3>
<ul>
<li><a href="#sub1">Topic 1</a></li>
<li><a href="#sub2">Topic 2</a></li>
<li><a href="#sub3">Topic 3</a></li>
</ul>
<h3 id="sub1">Topic 1</h3>
<p>The content of this topic.</p>
<h3 id="sub2">Topic 2</h3>
<p>The content of this topic.</p>
<h3 id="sub3">Topic 3</h3>
<p>The content of this topic.</p>
.. и это соответствующий код уценки:
Some intro text...
###Table of content###
* [Topic 1](#sub1)
* [Topic 2](#sub2)
* [Topic 3](#sub3)
###Topic 1### {#sub1}
The content of this topic.
###Topic 2### {#sub2}
The content of this topic.
###Topic 3### {#sub3}
The content of this topic.
Решение
С небольшой помощью cobbal я сделал это утверждение jQuery, которое преобразует разметку Markdown в нечто, с чем будет работать плагин Tabs:
$("#tabs :header").each(function()
{
var id = $(this).attr("id");
if(id=="") return;
var div = $("<div>");
var tagName = this.tagName;
$(this).nextAll().each(function()
{
if(this.tagName==tagName) return false;
div.append(this);
});
$(this).removeAttr("id");
div.attr("id", id);
$(this).before(div);
div.prepend(this);
});
Но тот факт, что мне нужно преобразовать разметку, чтобы она соответствовала плагину Tabs, а не просто сказать плагину Tabs, что он должен выбирать свое содержимое другим способом, может сделать это решение не идеальным.
Решение
в вашем документе.
$("#sub1,#sub2,#sub3").each(function() {
var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
$(this).before(containerDiv);
containerDiv.append(this);
});
и измените уценку на
...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...
Другие советы
Мне кажется, что вы можете сами обернуть оглавление в div.
На полпути вниз по странице Markdown Extra, на которую вы ссылаетесь, показано, как вставить Markdown в элемент div, например:
PHP Markdown Extra дает вам возможность поместить текст в формате Markdown внутри любого тег уровня блока. Вы делаете это, добавляя атрибут markdown к тегу с значение 1 - # 8212; который дает уценку = "1" & # 8212; как это:
<div markdown="1">
This is *true* markdown text.
</div>
Уценка = " 1 " атрибут будет удален, и содержимое будет преобразовано из Markdown в HTML. Конечный результат будет выглядеть так:
<div>
<p>This is <em>true</em> markdown text.</p>
</div>