DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


ja:template:bootstrap3

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

最新のリビジョン両方とも次のリビジョン
ja:template:bootstrap3 [2015-03-27 10:10] – 作成 sawachanja:template:bootstrap3 [2015-08-21 02:47] – 2015-08-20 22:44 版 sawachan
行 2: 行 2:
  
 ---- template ---- ---- template ----
-description   : Bootstrap を基にした DokuWiki 用テンプレート +description   : Bootstrap を基にした DokuWiki 用テンプレート
 author        : Giuseppe Di Terlizzi author        : Giuseppe Di Terlizzi
 email         : giuseppe.diterlizzi@gmail.com email         : giuseppe.diterlizzi@gmail.com
-lastupdate_dt : 2015-03-24 +lastupdate_dt : 2015-08-20 
-compatible    : Weatherwax,hrun+compatible    : Detritus"Ponder Stibbons", Hrun
 depends       : depends       :
 conflicts     : # prefix templates by template: conflicts     : # prefix templates by template:
 similar       : similar       :
-screenshot_img: http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template.png +screenshot_img: http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template.png?nocache 
-tags          : bootstrap navbar sidebar hooks bootswatch themes responsive+tags          : bootstrap html5 navbar sidebar hooks bootswatch themes responsive right-sidebar semantic cookielaw
  
 downloadurl   : http://github.com/LotarProject/dokuwiki-template-bootstrap3/zipball/master downloadurl   : http://github.com/LotarProject/dokuwiki-template-bootstrap3/zipball/master
行 19: 行 19:
 ---- ----
  
-Bootstrap を基にした DokuWiki 用テンプレート+カスタマイズの自由度が高い Bootstrap を基にした DokuWiki 用テンプレート
  
 このテンプレートはレスポンシブで全ての機器(携帯・タブレット・デスクトップなど)に対応して設計されています。 このテンプレートはレスポンシブで全ての機器(携帯・タブレット・デスクトップなど)に対応して設計されています。
 +
 +私の [[:ja:plugin:bootswrapper|Bootstrap ラッパープラグイン]]と[[:ja:plugin:icons|アイコンプラグイン]]を使用して映像・ユーザー体験は完成します。
  
 ===== 機能 ===== ===== 機能 =====
  
-  * [[#設定|設定管理]]を使ってカスタマイズ可能 +  * HTML5 
-  * 多くの[[#使用可能なフック|HTML フック]]+  * Bootstrap 3.x を基にしたテンプレート 
 +  * Glyphicons アイコン 
 +  * [[#設定|設定管理]]による自由度が高いカスタマイズ 
 +  * 多くの [[#使用可能なフック|html フック]]
   * レスポンシブ   * レスポンシブ
-  * サイドバーに対応+  * サイドバーに対応(**左側**又は**右側**) 
 +  * 右サイドバーに対応(下記の[[#右サイドバー|注]]を参照)
   * [[https://bootswatch.com|Bootswatch]] が作成した多くのテーマ   * [[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|拡張機能管理]]を使用してください。+このテンプレートのインストールには[[:ja:plugin:extension|拡張機能管理]]を使用してください。 
  
-DokuWiki でテンプレートをインストールして使用する方法は、[[ja:template|テンプレート]]を参照して下さい。+DokuWiki でテンプレートをインストールして使用する方法は、[[:ja:template|テンプレート]]を参照して下さい。 
  
 ===== 設定 ===== ===== 設定 =====
  
-^ オプション            ^ 説明                          ^ デフォルト値   ^ +==== テーマ ==== 
-^ ''inverseNavbar''     | navbar の色を反転する         | ''0''+ 
-^ ''fixedTopNavbar''    | navbar を上部に固定する       | ''0'' | +^ オプション              ^ 説明 ^ デフォルト値 ^ 
-^ ''bootstrapTheme''    | Bootstrap テーマ \\ (//default// Bootstrap テーマ・//default+optional// Bootstrap が作成したテーマ・//bootswatch// テーマ・//custom// テーマ)          | ''default''+^ ''bootstrapTheme''      | Bootstrap テーマ \\ (//default// Bootstrap テーマ・//default+optional// Bootstrap が作成したテーマ・//bootswatch// テーマ・//custom// テーマ) | ''default''
-^ ''bootswatchTheme''   | Bootswatch が作成したテーマ   | ''spacelab''+^ ''bootswatchTheme''     | Bootswatch が作成したテーマ | ''spacelab''
-^ ''customTheme''       | custom テーマの URL           | ''''+^ ''customTheme''         | custom テーマの URL | ''''
-^ ''showThemeSwitcher'' | navbar 内に Bootswatch テーマ用のテーマ切替を表示する    | ''0'' |+^ ''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:** 
 + 
 +<code javascript> 
 +  if (DokuCookie.getValue('cookieNoticeAccepted')) { 
 +    // Your JS code 
 +  } 
 +</code> 
 + 
 +**PHP Snippet:** 
 + 
 +<code php> 
 +  if ( ! (get_doku_pref('cookieNoticeAccepted', null) 
 +       || get_doku_pref('cookieNoticeAccepted', '')) ) { 
 +    // Your PHP code 
 +  } 
 +</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 のテーマは、現在のテーマを識別するための特別なクラスを ''<body/>'' に提供します。 
 + 
 +<code css>  
 +  /** 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; 
 +  } 
 +</code>
  
 ===== 使用可能なフック ===== ===== 使用可能なフック =====
  
-全てのファイルはテンプレートディレクトリ(例: ''lib/tpl/bootstrap3/'')に置く必要があります。+全てのファイルはテンプレートディレクトリ(例: ''lib/tpl/bootstrap3/'')に置く必要があります。 
  
-^ ファイル名      ^ HTML の挿入場所 ^ + 
-meta.html       | HTML <head> の内側。style や metaheader を追加するために使用する。 | +^ ファイル名            ^ HTML の挿入場所  
-topheader.html  | ページの最上部。<body> タグの直後。 +^ ''meta.html''       | HTML ''<head>'' の内側。style や metaheader を追加するために使用する。  
-header.html     | 上部の青いバーの上。ページ名と Wiki の題名の下。  +^ ''topheader.html''  | ページの最上部。''<body>'' タグの直後。 
-navbar.html     navbar の中。リンクを追加するには使用する。(例:<li><a href="/foo">Foo</a></li>)  +^ ''header.html''     | 上部の青いバーの上。ページ名と Wiki の題名の下。 | 
-pageheader.html | パンくずリストの下。実際のコンテンツの上。  +^ ''navbar.html''     | Navbar の中。リンクを追加するには使用する。(例:<li><a href=/foo>Foo</a></li>
-pagefooter.html | 下部の青いバーの上。最終更新日付の下。  +^ ''pageheader.html'' | パンくずリストの下。実際のコンテンツの上。 | 
-footer.html     | ページの最後。</body> タグの直前。  |+^ ''pagefooter.html'' | 下部の青いバーの上。最終更新日付の下。 | 
 +^ ''footer.html''     | ページの最後。''</body>'' タグの直前。 
 +^ ''sidebarheader.html'' | サイドバーの最上部 | 
 +^ ''sidebarfooter.html'' | サイドバーの最下部 | 
 +^ ''social.html''        | ''header.html'' の下。ソーシャルボタン(例:Google+、Twitter、LinkedIn 等)を追加します。 | 
 +^ ''rightsidebarheader.html'' | 右サイドバーの最上部 | 
 +^ ''rightsidebarfooter.html'' | 右サイドバーの最下部 |
  
 ===== このテンプレートの使用例 ===== ===== このテンプレートの使用例 =====
  
-  * http://lotar.altervista.org/dokuwiki ([[http://lotar.altervista.org/dokuwiki/wiki/syntax|syntax page]]を参照して下さい。+  * http://lotar.altervista.org/dokuwiki (メインサイト -- [[http://lotar.altervista.org/dokuwiki/wiki/syntax|構文ページ]]を参照) 
 +  * https://wiki.freedom-ip.com 
 +  * http://www.scenic-shop.com/structure 
 +  * http://garethwilliams.me.uk 
 +  * http://go.cokr.wo.tc/wiki 
 +  * http://chester.website 
 +  * http://www.wolfganglezius.de 
 +  * http://www.pernias.com 
 +  * http://support.4ef.de/dokuwiki 
 +  * http://www.furope.it 
 +  * http://wiki.cigolla.ch 
 + 
 +===== 映像巡回 ===== 
 + 
 +^ メインページ | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template.png?400&nocache}} | 
 +^ Navbar | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-navbar.png?400&nocache}} | 
 +^ Navbar(携帯) | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-navbar-mobile.png?nocache}} | 
 +^ 目次 | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-toc.png?nocache}} | 
 +^ 目次(折りたたみ) | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-toc-collapsed.png?nocache}} | 
 +^ ツールメニュー | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-tools.png?nocache}} | 
 +^ タグプラグイン | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-tags.png?nocache}} | 
 +^ 翻訳プラグイン | {{http://lotar.altervista.org/dokuwiki/_media/wiki/template/bootstrap3-template-translations.png?nocache}} |
  
 ===== 開発 ===== ===== 開発 =====
行 71: 行 245:
 {{rss>https://github.com/LotarProject/dokuwiki-template-bootstrap3/commits/master.atom 5 author date 1h }} {{rss>https://github.com/LotarProject/dokuwiki-template-bootstrap3/commits/master.atom 5 author date 1h }}
  
-=== バグ報告と機能要望 ===+=== バグ機能要望 ===
  
-バグ報告と機能要望は[[http://github.com/LotarProject/dokuwiki-template-bootstrap3/issues|バグ追跡システム]]にお願います +[[http://github.com/LotarProject/dokuwiki-template-bootstrap3/issues|バグ追跡システム]]でバグや機能要望を報告てください
-=== 既知のバグと問題点 ===+
  
-=== ToDo と要望一覧 ===+=== 既知のバグ問題 === 
 + 
 +=== ToDo・要望一覧 === 
 + 
 +  * <del>ヘッダー内のユーザーアイコンの表示・非表示</del> 
 +  * <del>テーマ切替内で bootswatch.com から全部ではなくいくつかのテーマを表示する選択肢がある。</del>
  
 ===== FAQ ===== ===== FAQ =====
 +
 +===== 議論 =====
 +
 +[[doku>template:bootstrap3#discussion1|Discussion]] を参照して下さい。
ja/template/bootstrap3.txt · 最終更新: 2017-05-03 20:18 by Klap-in

特に明示されていない限り、本Wikiの内容は次のライセンスに従います: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki