現在位置に装飾する
a-blog cmsでは、現在表示しているページの場所によって異なるクラスを付与する設定が標準で実装されています。（Ver. 1.3.0より）
デモ
linkMatchLocationMark
- https://developer.a-blogcms.jp/document/
- https://developer.a-blogcms.jp/document/reference/
- https://developer.a-blogcms.jp/document/reference/builtinjs/
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html?foo=var
linkMatchLocationCategoryMark
- https://developer.a-blogcms.jp/document/
- https://developer.a-blogcms.jp/document/reference/
- https://developer.a-blogcms.jp/document/reference/builtinjs/
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html?foo=var
デフォルトの設定
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
//---------------------
// link match location
linkMatchLocationMark : '.js-link_match_location',
linkMatchLocationFullMark : '.js-link_match_location-full',
linkMatchLocationBlogMark : '.js-link_match_location-blog',
linkMatchLocationCategoryMark : '.js-link_match_location-category',
linkMatchLocationEntryMark : '.js-link_match_location-entry',
linkMatchLocationContainMark : '.js-link_match_location-contain',
linkMatchLocationClass : 'stay',
linkMatchLocationFullClass : 'stay',
linkMatchLocationBlogClass : 'stay',
linkMatchLocationCategoryClass : 'stay',
linkMatchLocationEntryClass : 'stay',
linkMatchLocationContainClass : 'stay',
linkMatchLocationArray: [{
// 'mark' : '.js-link_match_location-original',
// 'type' : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
// 'class' : 'current'
}],
下記のリンク先URLのうち、指定方法による違いを説明します。
- http://www.example.com/
- http://www.example.com/blog/
- http://www.example.com/blog/category/
- http://www.example.com/blog/category/entry-1.html
- http://www.example.com/blog/category/entry-1.html?foo=var
- http://www.example.com/blog/category/sub-category/entry-1.html
- http://www.example.com/childblog/category/entry-1.html（子ブログの場合）
- http://www2.example.com/blog/category/entry-1.html（ドメインが異なる場合）
| linkMatchLocationMark | ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/ の時、以下のページへのアンカーリンクに「linkMatchLocationMark」を指定した場合 「linkMatchLocationClass」が適用されるのは以下のアンカーリンクとなります。
|
|---|---|
| linkMatchLocationFullMark | ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationFullMark」を指定した場合 「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。
|
| linkMatchLocationBlogMark | ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合 「linkMatchLocationBlogClass」適用されるのは以下のアンカーリンクとなります。
|
| linkMatchLocationCategoryMark | ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationCategoryClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/sub-category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationCategoryMark」を指定した場合 「linkMatchLocationCategoryClass」が適用されるのは以下のアンカーリンクとなります。
|
| linkMatchLocationEntryMark | ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているエントリーのURLとリンク先が同じ場合に、「linkMatchLocationEntryClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationEntryMark」を指定した場合 「linkMatchLocationEntryClass」が適用されるのは以下のアンカーリンクとなります。
|
| linkMatchLocationClass | 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名 |
| linkMatchLocationFullClass | 現在表示しているページのURLとリンク先が“完全に”同じ場合に付与するクラス名 |
| linkMatchLocationBlogClass | 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名 |
| linkMatchLocationCategoryClass | 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名 |
| linkMatchLocationEntryClass | 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名 |
| linkMatchLocationArray | 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。 |
設定のカスタマイズ
config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。
ACMS.Ready(function(){
ACMS.Config.linkMatchLocationMark = '.js-link_match_location';
ACMS.Config.linkMatchLocationFullMark = '.js-link_match_location-full';
ACMS.Config.linkMatchLocationBlogMark = '.js-link_match_location-blog';
ACMS.Config.linkMatchLocationCategoryMark = '.js-link_match_location-category';
ACMS.Config.linkMatchLocationEntryMark = '.js-link_match_location-entry';
ACMS.Config.linkMatchLocationContainMark = '.js-link_match_location-contain';
ACMS.Config.linkMatchLocationClass = 'stay';
ACMS.Config.linkMatchLocationFullClass = 'stay';
ACMS.Config.linkMatchLocationBlogClass = 'stay';
ACMS.Config.linkMatchLocationCategoryClass = 'stay';
ACMS.Config.linkMatchLocationEntryClass = 'stay';
ACMS.Config.linkMatchLocationContainClass = 'stay';
ACMS.Config.linkMatchLocationArray = [{
// 'mark' : '.js-link_match_location-original',
// 'type' : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
// 'class' : 'current'
}],
});
使い方
HTML
指定したクラスをHTMLに記述します。
例）linkMatchLocationMarkで .js-link_match_location と指定した場合
<!-- BEGIN_MODULE Entry_List -->
<ul>
<!-- BEGIN entry:loop -->
<li class="js-link_match_location"><a href="{url}"><span class="date">{date#Y}年{date#m}月{date#d}日</span>{title}</a></li>
<!-- END entry:loop -->
</u>
<!-- END_MODULE Entry_List -->
CSS
必要に応じてスタイルを指定します。
例）
ul li.stay a:link,
ul li.stay a:active,
ul li.stay a:visited {
background:url("../images/icn_arrow01.png") no-repeat scroll 10px 12px #CCCCCC;
color:#FFFFFF;
display:block;
padding:10px 10px 10px 33px;
width:155px;
}