DokuWiki Wrap Plugin の使い方

特定のコンテンツに対し、クラスを指定しつつ div タグや span タグでラップしてくれるプラグイン。

https://www.dokuwiki.org/plugin:wrap

<WRPA class-A class-B></WRAP> は <div class="wrap_class_A wrap_class_B"></div> へ
<wrap class-A class-B></wrap> は <span class="wrap_class_A wrap_class_B"></span> へ

それぞれ変換される.

上述の wrap_ というクラスのプレフィクスを削除したい場合は、管理画面のサイト設定から指定クラスの場合はプレフィクスを付けない設定が可能.

<WRAP row>
<WRAP col-sm-6>
Sample Text Left
</WRAP>
 
<WRAP col-sm-6>
Sample Text Right
</WRAP>
</WRAP>

Sample Text Left

Sample Text Right

<WRAP> のネストも可能な様だが、以下のケースの場合は上手く行かず.右に寄ってしまう.

<html>
<!– <style>
aside .nav ul, .dw__dropdown_page .nav ul {

padding-left: 0;
margin-left: -10px;

}
.nav-stacked > li {

margin-top: 7px;
margin-bottom: 7px;
margin-left: 0;

}
</style> –>
</html>

<html>
<script async src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=“adsbygoogle”

   style="display:block"
   data-ad-format="fluid"
   data-ad-layout-key="-fb+5w+4e-db+86"
   data-ad-client="ca-pub-1602643700049884"
   data-ad-slot="5544636808"></ins>

   (adsbygoogle = window.adsbygoogle || []).push({});

</script>
</html>

DOKUWIKI

Bootstrap3 Template

sidebar

<html>
<style>
aside .nav ul, .dw__dropdown_page .nav ul {

padding-left: 0;
margin-left: -10px;

}
.nav-stacked > li {

margin-top: 7px;
margin-bottom: 7px;
margin-left: 0;

}
</style>
</html>

<html>
<script async src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=“adsbygoogle”

   style="display:block"
   data-ad-format="fluid"
   data-ad-layout-key="-fb+5w+4e-db+86"
   data-ad-client="ca-pub-1602643700049884"
   data-ad-slot="5544636808"></ins>

   (adsbygoogle = window.adsbygoogle || []).push({});

</script>
</html>

Vue.js v2.x

Vue.js v3.x

Form Components

<html><style>
h2.page-header {

font-weight: 600;
font-size: 2.4rem;
position: relative;
padding: 10px 0 10px 16px;
margin-top: 3rem !important;
margin-bottom: 2rem !important;

}
h2:before {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #ccc;

}
div#disqus__thread {

width: 100% !important;

}
</style></html>

DokuWiki Wrap Plugin の使い方

コード

実装１

実装２

DOKUWIKI

Bootstrap3 Template

Vue.js v2.x

Vue.js v3.x

Form Components

Container Components

List Components

Other Components