a-blog cmsの続きを読むをAjax対応にする方法

検索部分のAjax対応について company3で試すjs-post_inculde機能 | kazumich.log で書きましたが、今回は続きを読むのリンクについてカスタマイズしてみようと思います。カスタマイズのベースとなるテーマとしては、1.3.0bより同梱されるようになった company3 です。

初期状態の続きを読む部分

まずは、今回のカスタマイズをする部分を見てみましょう。 一覧用のテンプレートになりますので、index.html というファイルになります。company3 には

  • /themes/company3/index.html(標準的に利用される日付がない一覧)
  • /themes/company3/news/index.html(日付がある一覧)
  • /themes/company3/search.html(検索結果一覧)
  • /themes/company3/search.html(タグ検索結果一覧)

の4つの一覧表示のテンプレートがあるようです。まずは、お知らせ(/news/)のテンプレートを修正していきましょう。

<!-- BEGIN continueLink:veil -->
<p class="continueLink clear"><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

「a-blog cmsの続きを読むをAjax対応にする方法」の続きを読む

company3で試すjs-post_inculde機能

a-blog cms 1.3.0b では、JavaScriptが分からない人でもAjax機能を実装する事が簡単に出来る機能が用意されております。その方法を簡単に書いておきますので、よろしければ以下の手順のようにお試し下さい。

サイト内検索した時にリロード無しにメインのコンテンツエリアを書き換える

修正するファイルは、/themes/company3/include/subInfo.html のみで、最初は以下のような感じになっております。

<!-- エントリー検索 開始▼▼ -->
<div id="freewordSearch" class="menuListBox">
	<h2>検索</h2>
	<form action="" method="post" name="searchForm" id="searchForm">
		<input type="text" name="keyword" value="%{KEYWORD}" size="15" />
		<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
		<input type="submit" name="ACMS_POST_2GET" value="検索" />
		<input type="hidden" name="tpl" value="/search.html" />
		<input type="hidden" name="bid" value="%{BID}" />
	</form>
</div>
<!-- エントリー検索 終了▲▲ -->

「company3で試すjs-post_inculde機能」の続きを読む

a-blog cmsでAjax検索機能を実装 (1.2.2b) その3

の続きです。今回は検索エンジンからのリファラーを元に、検索した結果を表示させてみましょう。

<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="keyword" size="30" value="CSS" />
<input type="submit" name="ACMS_POST_2GET" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>

上記であれば、CSS というキーワードが固定されています。これを以下のようにしてみます。

<form action="" class="js-post_include-ready" onsubmit="return ACMS.Config.searchEngineKeyword;">
<input type="hidden" name="tpl" value="searchList.html" />
<input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-input-eval_value" />
<input type="hidden" name="ACMS_POST_2GET" />
</form>

form に onsubmit="return ACMS.Config.searchEngineKeyword;" を、検索条件のvalueには ACMS.Config.searchEngineKeyword と書き、classを class="js-input-eval_value" のように付けます。

あと、元はsubmitボタンになっていましたが、hiddenでも大丈夫ですので、hidden に変更してあります。

これで、検索エンジンからのリンクで検索ワードがセットされるようになるハズです。

うまく動けば、以下に何か表示されるようになります。この下に何か出てますか?


「a-blog cmsでAjax検索機能を実装 (1.2.2b) その3」の続きを読む

a-blog cmsでAjax検索機能を実装 (1.2.2b) その2

昨晩書いた a-blog cmsでAjax検索機能を実装 (1.2.2b) では、以下のように書いています。

<form action="" method="post" class="js-post_include" target="#result">
<input type="text" name="keyword" size="30" value="" />
<input type="submit" name="ACMS_POST_2GET" value="検索" id="submit" class="submit" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>
<div id="result">
<p>(検索されるとココが置き換わります)</p>
</div>

(検索されるとココが置き換わります)


「a-blog cmsでAjax検索機能を実装 (1.2.2b) その2」の続きを読む

a-blog cmsでAjax検索機能を実装 (1.2.2b)

普通に検索するフォームを作ると、以下のように書きます。

<form action="" method="post">
<input type="text" name="keyword" size="30" value="" />
<input type="submit" name="ACMS_POST_2GET" value="検索" id="submit" class="submit" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>

実際の動作すると以下のような感じになります。お試し下さい。(ページが切り替わります)


「a-blog cmsでAjax検索機能を実装 (1.2.2b)」の続きを読む

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。