Monday, November 29 2021 @ 10:52 PM JST

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

  • Sunday, November 30 2014 @ 08:14 PM JST
  • 投稿者:
  • 表示回数 11,538
Geeklog

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

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

[media:20141130205101935 src:disp]

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,