UIkitを既存Geeklogサイトに追加する方法

Geeklog
投稿者: 表示回数4,908

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

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

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

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

3.テーマファイル(/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,