UIkit のModalを初期表示する方法
modalの記述のあとに以下のcodeを追加。
<script type="text/javascript">
$(function(){
$(document).ready(function(){
$.UIkit.modal('#modal').show();
});
});
</script>
Geeklog にSocial buttonを追加する方法はこちら。
header.thtml:
<meta name="twitter:image:height" content="400"{xhtml}>
<meta name="twitter:image:width" content="500"{xhtml}>
<meta name="twitter:url" content="<?php echo htmlspecialchars(htmlspecialchars(COM_getCurrentURL(), ENT_QUOTES, 'UTF-8'), ENT_QUOTES, 'utf-8'); ?>"{xhtml}>
footer:
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<ul class="uk-subnav uk-flex-right uk-margin-remove">
<li><g:plusone href="{site_url}/article.php/{story_id}"></g:plusone></li>
<li><a class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" href="https://twitter.com/intent/tweet?text={story_title}" data-lang="ja">Tweet</a></li>
<li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F{!!autotag domain: !!}%2Farticle.php%2F{story_id}&width=150&height=20&colorscheme=light&layout=button_count&action=like&show_faces=true&send=true&appId={!!autotag conf:facebook_consumer_key !!}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;" allowTransparency="true"></iframe></li>
</ul>
see more:
https://github.com/ivywe/Default/commit/81f6c0e8e95782d916f3f2f3cfd9098d7ce55b8f
https://github.com/ivywe/Default/commit/144634e42e9c42aff1cb5bcf83f08144c73bc268
Geeklog 2.1.1 Default theme download:
https://github.com/ivywe/Default
Twitter:
Autotags plugin: name domain: content example.com
CSSやJavaScriptは、サイトごとに個別に開発するのではなく、フレームワークを開発してそれをすべてのWEBに最初から提供する方式が一般的になりました。WEB開発を高速化、効率化させる力強い味方になるためです。
Bootstrap, Foundation, UIkitはそれぞれ以下のように特徴をアピールしています。
CSSフロントエンドフレームワークは、MITなどオープンソースライセンスにて公開、開発が進んでいます。
最も有名なCSSフロントエンドフレームワークは、当初Twitterの開発者が開発したBootstrapです。
Foundationは、レスポンシブウェブデザインの機能を強化するなど、高機能さを売りにしたCSSフロントエンドフレームワークです。
対してUIkitは、軽量かつ高機能。名前空間(Namespace)の設計が秀逸で、すべての機能をバランスよく網羅して、配布サイトのドキュメントがわかりやすいのもポイントです。
UIkitでは、すべてのclass名、Javascript関数名の前置子として、UIkitを表す"uk-"が付いています。
Bootstrapなどフレームワークを追加すると起きがちなコンフリクトの心配をゼロにできることは、開発者の負担を大幅に軽減できます。
覚えやすいネーミングも、開発者のストレスを軽減できます。 styleの属性を覚えている開発者なら、UIkitのネーミングはすぐに覚えられるのではないでしょうか。
自動タグプラグイン(Autotags plugin)をインストールしたら、よくつかう自動タグを最初から用意しておくと便利です。そうすることにより、記事をテキストモードで記述しながらリッチなコンテンツを作成できます。
<div class="uk-text-bold uk-text-center">#0</div><div class="uk-text-center">#0</div>www.example.com<a href="#1" class="ext-link" target="_blank">#2</a>return CUSTOM_centerblock_forum ($p1);<h2 class="uk-h2">#0</h2><h3 class="uk-h3">#0</h3><h4 class="uk-h4">#0</h4>
<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>
<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>
<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>
<!-- PDF { -->
<script type="text/javascript" src="{layout_url}/vendor/jquery-gdocsviewer/jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('a.embed-large').gdocsViewer({width: 600, height: 600});
$('a.embed-medium').gdocsViewer({width: 500, height: 500});
$('a.embed-small').gdocsViewer({width: 300, height: 300});
$('a.embed-large2').gdocsViewer({width: 600, height: 600});
});
/*]]>*/
</script>
<div class="uk-text-right">#0</div>