3

現在、 Markdown Extraを使用して HTML コンテンツを生成する PHP ベースの Content-Management-System を実行しています。ほとんどのコンテンツは見出しと小見出しで構成されているため、ページが非常に長くなります。各ページの最初に、リストとMarkdown Extra の Header Id Attributeを使用して目次を作成します。

ページ ビューの長さを短くするために、見出しの最初のレベルでjQuery のタブ プラグインを使用したいと考えています。

問題は、 Markdown Extraがセクションのコンテンツを別の div タグにラップしていないため、 Markdown Extraの出力が jQueryタブ プラグインが期待するものと互換性がないことです。

これら 2 つのライブラリを連携させる方法はありますか?

編集

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>

.. これは、対応する Markdown コードです。

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 を少し使って、Markdown マークアップを Tabs プラグインが動作するものに変換する次の jQuery ステートメントを作成しました。

  $("#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 プラグインに合わせてマークアップを変換する必要があるという事実により、このソリューションは理想的なものではない可能性があります。

4

2 に答える 2

2

あなたのdocument.readyに

$("#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)
...
于 2009-03-07T07:21:00.900 に答える
0

目次を自分でdivでラップできるように思えます。

リンクした Markdown Extra ページの半分下には、次のように、div 内に Markdown を挿入する方法が示されています。

PHP Markdown Extra を使用すると、Markdown 形式のテキストを任意のブロック レベルのタグ内に配置できます。これを行うには、次のように、値 1 の markdown 属性をタグに追加します — これにより、markdown="1" が与えられます:

<div markdown="1">
This is *true* markdown text.
</div>

markdown="1" 属性が削除され、 のコンテンツが Markdown から HTML に変換されます。最終結果は次のようになります。

<div>

<p>This is <em>true</em> markdown text.</p>

</div>
于 2009-03-06T15:41:16.090 に答える