Ivy SOHO.net

UIkitを既存Geeklogサイトに追加する方法を簡単に紹介します。

１．UIkitを以下のURLからダウンロードして、/layout/テーマ/vendor/uikit/ にアップロード。
http://getuikit.com/

[media:20141130205101935 src:disp]

２．テーマファイル（/layout以下のテーマ）のheader.thtmlの{rel_links}の前に以下のように追加。

<link rel="stylesheet" href="{layout_url}/vendor/uikit/css/uikit.css"{xhtml}>

３．テーマファイル（/layout以下のテーマ）のfooter.thtmlの{plg_footercode}の後に以下のように追加。

<script type="text/javascript" src="{layout_url}/vendor/uikit/js/uikit.js"></script>

※{plg_footercode}でjQuery本体が呼ばれています。そのためその後にこの行を追加する必要があります。

Add-onsを追加する方法

UIkit Accordion追加方法

1. テーマファイル（/layout以下のテーマ）のheader.thtmlの{rel_links}の前に以下のように追加。

   
   <link rel="stylesheet" href="{layout_url}/vendor/uikit/css/uikit.css"{xhtml}>
   <!-- accordion CSS -->
   <link rel="stylesheet" href="{layout_url}/vendor/uikit/css/components/accordion.almost-flat.css">
   

2. テーマファイル（/layout以下のテーマ）のfooter.thtmlの{plg_footercode}の後に以下のように追加。

   <script type="text/javascript" src="{layout_url}/vendor/uikit/js/uikit.js"></script>
   <!-- accordion Javascript -->
   <script  type="text/javascript" src="{layout_url}/vendor/uikit/js/components/accordion.js"></script>

/uikit/css/ /uikit/js/ に、種々ファイルが置かれていますが、どれかひとつ選んでリンクしてください。
.min が付いたものは圧縮したもの。uikit.almost-flat.cssはフラットデザイン。uikit.gradient.cssはグラデーションデザイン。

事例：　マウンテン　FAQ

デフォルトはアコーディオンを閉じた状態にしたいので、accordion.jsを編集して、showfirst　をfalseに変更しています。

defaults: {
showfirst : false,