====== Bootstrap3 テンプレート ======
---- template ----
description : Bootstrap を基にした DokuWiki 用テンプレート
author : Giuseppe Di Terlizzi
email : giuseppe.diterlizzi@gmail.com
lastupdate : 2015-08-20
compatible : Detritus, "Ponder Stibbons", Hrun
depends :
conflicts : # prefix templates by template:
similar :
screenshot_img: http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template.png?nocache
tags : bootstrap html5 navbar sidebar hooks bootswatch themes responsive right-sidebar semantic cookielaw
downloadurl : http://github.com/LotarProject/dokuwiki-template-bootstrap3/zipball/master
bugtracker : http://github.com/LotarProject/dokuwiki-template-bootstrap3/issues
sourcerepo : http://github.com/LotarProject/dokuwiki-template-bootstrap3/
donationurl : https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9LJDLVSNGYSA2
----
カスタマイズの自由度が高い Bootstrap を基にした DokuWiki 用テンプレート。
このテンプレートはレスポンシブで全ての機器(携帯・タブレット・デスクトップなど)に対応して設計されています。
私の [[:ja:plugin:bootswrapper|Bootstrap ラッパープラグイン]]と[[:ja:plugin:icons|アイコンプラグイン]]を使用して映像・ユーザー体験は完成します。
===== 機能 =====
* HTML5
* Bootstrap 3.x を基にしたテンプレート
* Glyphicons アイコン
* [[#設定|設定管理]]による自由度が高いカスタマイズ
* 多くの [[#使用可能なフック|html フック]]
* レスポンシブ
* サイドバーに対応(**左側**又は**右側**)
* 右サイドバーに対応(下記の[[#右サイドバー|注]]を参照)
* [[https://bootswatch.com|Bootswatch]] が作成した多くのテーマ
* Bootswatch.com テーマのテーマ切替
* 左と右サイドバーの大きさ
* [[#Cookie Law Banner Notice]]
[[#映像巡回|映像巡回]]を参照して下さい。
==== プラグインの統合 ====
* [[:ja:plugin:translation|翻訳プラグイン]]
* [[:plugin:discussion|議論プラグイン]]
* [[:ja:plugin:tags|タグプラグイン]]
* [[:ja:plugin:tagging|Tagging プラグイン]]
* [[:ja:plugin:publish|公開プラグイン]]
* [[:plugin:explain|Explain プラグイン]]
* [[:ja:plugin:wrap|Wrap プラグイン - Tabs]]
* [[:ja:plugin:bootswrapper|Bootstrap ラッパープラグイン]]
==== 翻訳 ====
* English
* Italian
* German
* Japanese
* Spanish
* Russian
* Simplified Chinese
===== ダウンロードとインストール ======
このテンプレートのインストールには[[:ja:plugin:extension|拡張機能管理]]を使用してください。
DokuWiki でテンプレートをインストールして使用する方法は、[[:ja:template|テンプレート]]を参照して下さい。
===== 設定 =====
==== テーマ ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''bootstrapTheme'' | Bootstrap テーマ \\ (//default// Bootstrap テーマ・//default+optional// Bootstrap が作成したテーマ・//bootswatch// テーマ・//custom// テーマ) | ''default'' |
^ ''bootswatchTheme'' | Bootswatch が作成したテーマ | ''spacelab'' |
^ ''customTheme'' | custom テーマの URL | '''' |
^ ''showThemeSwitcher'' | navbar 内に Bootswatch テーマ用のテーマ切替を表示する | ''0'' |
^ ''hideInThemeSwitcher'' | テーマ切替内で隠すテーマ | |
==== サイドバー ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''sidebarPosition'' | サイドバーの配置(''left''・''right'') | ''left'' |
^ ''rightSidebar'' | 右サイドバーのページ名 | ''rightsidebar'' |
^ ''leftSidebarGrid'' | 左・右サイドバーの grid クラス\\ ''col-{xs,sm,md,lg}-x'' ([[http://getbootstrap.com/css/#grid|Bootstrap Grids]] マニュアルを参照)| ''col-sm-3 col-md-2'' |
^ ''rightSidebarGrid'' | ::: | ''col-sm-3 col-md-2'' |
=== 右サイドバー ===
デフォルトの DokuWiki [[doku>ja:config:sidebar|サイドバー]]サイドバーが有効で ''left'' に配置した場合(''tpl > bootstrap3 > sidebarPosition'' 設定を参照)のみ右サイドバーを表示します。
DokuWiki サイドバーを右側に配置したい場合、''tpl > bootstrap3 > sidebarPosition'' 設定を ''right'' にしてください。
==== Navbar ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''inverseNavbar'' | Navbar の色を反転する | ''0'' |
^ ''fixedTopNavbar'' | Navbar を上部に固定する | ''0'' |
^ ''showTools'' | Navbar 内にツールメニューを表示する | ''always'' |
^ ''showUserHomeLink'' | ユーザーのホームページリンクを表示する | ''1'' |
^ ''hideLoginLink'' | Navbar 上のログインボタンを非表示にする。「読取り専用」の DokuWiki サイト(例:ブログ・個人的な Web サイト)には便利です。 | ''0'' |
^ ''individualTools'' | Navbar 上のツールを個々のメニューに分割する | ''0'' |
^ ''showIndividualTool'' | Navbar 上の個々のツールを表示・非表示 | ''user,site,page'' |
^ ''showSearchForm'' | Navbar 上の検索フォームを表示する | ''always'' |
==== セマンティック ====
セマンティックデータへの基本的な対応のために Schema.org マークアップを追加します。
完全に対応するには [[:plugin:semantic|Semantic Plugin]] を利用して下さい。
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''semantic'' | semantic データを有効にする | ''0'' |
^ ''schemaOrgType'' | Schema.org の型(''Article'', ''NewsArticle'', ''TechArticle'', ''BlogPosting'')| ''Article'' |
==== 配置 ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''fluidContainer'' | Enable the fluid container (full-width of page) | ''0'' |
^ ''pageOnPanel'' | Enable the panel around the page | ''1'' |
^ ''tableFullWidth'' | 100% のテーブル幅を有効にする(Bootstrap のデフォルト) | ''1'' |
==== 議論 ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''showDiscussion'' | ツールメニュー内に議論リンクを表示する | ''0'' |
^ ''discussionPage'' | 議論ページ名(デフォルトは ''discussion:@ID@''。''@ID@'' は現在のページ名に置き換えるプレースホルダー)空の場合リンクは無効になる。 | ''discussion:@ID@'' |
==== Cookie Law Banner Notice ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''showCookieLawBanner'' | Enable the banner notice on footer | ''0'' |
^ ''cookieLawBannerPage'' | The name of DokuWiki page which contains a brief notice and two buttons for accept all cookies and read the full policy | ''cookie:banner'' |
^ ''cookieLawPolicy'' | The name of DokuWiki page which contains a full policy | ''cookie:policy'' |
The Cookie Law Banner Notice add a cookie called "cookieNoticeAccepted" to use in your JavaScript/PHP code (eg. to add Google Analytics only when the user accept the policy).
**JavaScript Snippet:**
if (DokuCookie.getValue('cookieNoticeAccepted')) {
// Your JS code
}
**PHP Snippet:**
if ( ! (get_doku_pref('cookieNoticeAccepted', null)
|| get_doku_pref('cookieNoticeAccepted', '')) ) {
// Your PHP code
}
==== その他 ====
^ オプション ^ 説明 ^ デフォルト値 ^
^ ''showPageInfo'' | Display the page info (author, etc...) | ''1'' |
^ ''showTranslation'' | [[:ja:plugin:translation|翻訳プラグイン]] ツールバーを表示する。 | ''0'' |
^ ''showBadges'' | Show badge buttons (DokuWiki, Donate, etc) | ''1'' |
^ ''showLoginOnFooter'' | Display a "little" login link on footer. This option is useful when ''hideLoginLink'' is on | ''0'' |
===== テーマのカスタマイズ =====
''conf/[[:ja:devel:css#ユーザスタイル|userstyle.css]]''(又は''userall.css'')を編集してテーマをカスタマイズします。
Bootstrap3 のテーマは、現在のテーマを識別するための特別なクラスを ''
'' に提供します。
/** Vanilla Bootstrap Theme */
body.default .page-header {
font-weight: 900;
}
/** Optional Bootstrap Theme */
body.optional .img-responsive {
display: inline-block;
}
/** Custom Bootstrap Theme */
body.custom .btn-success {
background-color: green;
}
/** Lumen - Bootswatch.com theme */
body.lumen .navbar-default {
background-color: red;
}
===== 使用可能なフック =====
全てのファイルはテンプレートディレクトリ(例: ''lib/tpl/bootstrap3/'')に置く必要があります。
^ ファイル名 ^ HTML の挿入場所 ^
^ ''meta.html'' | HTML ''
'' の内側。style や metaheader を追加するために使用する。 | ^ ''topheader.html'' | ページの最上部。''