前の関連記事：Blogger:ページ番号付ページナビ(3)フィードの取得件数制限に左右されないページナビ
NetBeans8.1とNetBeans Connectorでローカルでページナビだけを表示させる
いろいろと手を加えたいのでまずlinuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドでNetBeans Connectorを設定したNetBeans8.1を使ってローカルでページナビを表示させます。
NetBeans8.1のメニューからファイル→新規プロジェクト。
HTML5/JSアプリケーション。
次>。
プロジェクト名をPageNaviにしてあとはデフォルトのままにするので終了ボタンをクリックします。
プロジェクトタブでPageNaviプロジェクト下のサイト・ルートを右クリック、新規→JavaScriptファイル。
ファイル名をpagenaviにして終了。
この作成されたpaginavi.jsにHow to Add Numbered Page Navigation Widget for Blogger | HelploggerのStep5の /*<![CDATA[*/と/*]]>*/に挟まれているコードをコピペします。
ソース→フォーマット。
これで見やすくなりますが、ifのスコープを設定している波かっこがかけているところが多数ありこれを修正しておかないとあとでわけがわからない現象に悩むことになります。
最初の方にある変数をこのブログの状態に変更します。
var perPage = 5; // 1ページあたりの投稿数。 var numPages = 5; // ページナビに表示するページ数。 var firstText = 'First'; var lastText = 'Last'; var prevText = '« Previous'; var nextText = 'Next »'; var urlactivepage = 'http://p--q.blogspot.jp/'; // location.href; // 表示中のURL。 var home_page = "http://p--q.blogspot.jp/"; // "/"; // 表示中のURLのルートページ。http://p--q.blogspot.jp/で1ページあたり5投稿の5ページ分をナビ表示します。
次にボタン表示のCSSを作成します。
プロジェクトタブでPageNaviプロジェクト下のサイト・ルートを右クリック、新規→Cascading Style Sheet。
ファイル名をpaginaviにして終了。
How to Add Numbered Page Navigation Widget for Blogger | HelploggerのStep3のBlack Numbered Page Navigation With Orange Current PageのCSSをコピペしました。
index.htmlにこれらを挿入します。
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<div class='blog-pager' id='blog-pager'></div>
<link href="paginavi.css" rel="stylesheet" type="text/css"/>
<script src="paginavi.js" type="text/javascript"></script>
</body>
</html>
10行目でBloggerのテンプレートで使われているページナビ表示のdiv要素部分、11行目にcssファイルへのリンク、12行目にjsファイルへのリンクを挿入しました。jsファイルへのリンクはページナビ表示のdiv要素の後ろにないといけません。
cssファイルやjsファイルはプロジェクトタブからドラッグしてくればindex.htmlファイルにドロップしたところでリンクを挿入してくれます。
NetBeans8.1で、NetBeans ConnectorをインストールしたChromiumを選択した状態で実行ボタンをクリックします。
Chromiumが立ち上がり、http://p--q.blogspot.jp/を表示した場合のページナビが表示されました。
これはフィードを取得して表示しているのでこの方法は公開ブログに対してしか使えません。
ページ番号にはリンクがついていますがそれをクリックしてもそのページのページナビに切り替わるわけではありません。
それには手動でURLを切り替えないといけません。
例えば5ページ目のページナビの状態を表示させるには次のようにします。
var perPage = 5; // 1ページあたりの投稿数。 var numPages = 5; // ページナビに表示するページ数。 var firstText = 'First'; var lastText = 'Last'; var prevText = '« Previous'; var nextText = 'Next »'; var urlactivepage = "http://p--q.blogspot.jp/search?updated-max=2016-06-17T01%3A49%3A00%2B09%3A00&max-results=5#PageNo=5"; // location.href; // 表示中のURL。 var home_page = "http://p--q.blogspot.jp/"; // "/"; // 表示中のURLのルートページ。7行目のurlactivepageを変更しています。
URLの最後に表示しているページ番号を表す#PageNo=5を追加することが必須です。
これでページナビを編集する準備が整いました。
NetBeans8.1のヒントの表示を制限する
NetBeansのエディタにいろいろ警告が表示されておりとりあえず==より===を使った方がよいようなことを言われたのですべて置換してみたところ動かなくなったので元に戻しました。
==を===に変換すると型までも厳密に比較するようです（JavaScript 忘れがちな === と == の違い - Qiita参照）。
鬱陶しいのでこの警告がでてこないようにします。
ツール→オプション、エディタ、ヒント。
言語からJavaScriptを選択します。
JS表記規則の「==または!==ではなく===または!==を使用しています」のチェックをはずしました。
蛇足ですがこれは本当は日本語としては「===または!==ではなく==または!=を使用しています」の方が正しいですよね。
ついでに「セミコロンがありません」もチェックをはずしました。
これでたくさん出ていた警告がすべてでてこなくなりました。
ページナビのレイアウトを変更する
デフォルトの状態ではこのブログでは横幅がはみ出るのでそれを修正します。
まずFirstとLastはすでにページ番号でも表示されているので削ります。
先頭ページと最終ページとの間の三点をPreviousとNextに置換します。
さらにPreviousとNextはそれぞれ<<と>>に置き換えます。
これでボタンを9つに減るはずです。
#PageNo=50の時の表示について、変数htmlの作成が始まる20行目にブレークポイントを設定して関係あるところを見ていきます。
最初にPage 50 of 136を作成していますがこれはCSSで.showpageOf{display:none!important}となっていて表示されていませんね。
.showpageOfを表示されるとこのようになりますがもうこれは幅が大きすぎですね。
ページナビの色を変更する
今度はCSSの変更です。
現在使用中のページナビの色に揃えます。
#fff フォントの色
#2973FC 表示されていないページのボタンの色
#000 表示されているページのボタンの色
ChromiumのNetBeans ConnectorボタンをクリックしてInspect In NetBeans Modeにチェックを入れます。
ボタン1を選択するとNetBeansのCSSスタイルウィンドウにそのプロパティが表示されます。
backgraound-colorを#404042から#2973FCに変更しました。
フォントの色も#f4f4f4から#fffに変更しました。
今度は表示中のページのボタンを選択します。
これもbackgoundを#EC8D04から#000に変更しました。
フォントの色も#f4f4f4から#fffに変更しました。
これらの変更はCSSファイルに即時変更されて保存されるようです。
これで現在のページナビとほぼ同じになりました。
ラベルインデックスページへの対応の確認
今度はラベルインデックスページでページナビの動作を確認します。
urlactivepageにラベル名をクリックしたときに表示されるページのURLを代入します。
var urlactivepage = "http://p--q.blogspot.jp/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?max-results=5"; // location.href; // 表示中のURL。、、、もう書くのも面倒なほどあちこち修正しました。
まずif文のスコープについての混乱です。
if...else - JavaScript | MDNにはif文は一つの文しかないときはブロック文{}にしなくてよいと書いてありますが、全部ブロック文にしました。
そうでないと、if文のあとの実行文がまだらに実行されていました。
原因がわかるまで四苦八苦しました。
次に修正したのは?と&の使い方です。
BloggerでのURLにつける引数は先頭の引数の前は?、2つ目以上の引数の前は&になっています。
それがぐちゃぐちゃになっていたので修正しました。
検索結果ページへの対応は断念
urlactivepageに検索結果の表示されるページのURLを代入します。
http://p--q.blogspot.jp/search?q=linuxbeanこれはjavascript - Numbered page-navigation of Google Blogger not working on search results page - Stack Overflowを参考にスクリプトを書き換えないと動きません。
この修正を加えてfeedからページナビを表示させることができましたが、一番最初の検索結果に表示させる投稿数の制限の仕方がわかりません。
その他やってみると、ページを切り替えても結果が入れ替わらないことに気が付きました。
検索結果は必ずしも日付順に並んでいるわけではないからです。
ということで検索結果ページへの対応は断念しました。
ようやく導入へ
結局あれやこれやとかなりいじらないといけませんでした。
paginavi.css
pagenavi.js
この二つを圧縮してHTML/JavaScriptガジェットに入れればよいのですがまずはBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で導入した現在のページナビを外さないといけません。
新しいページナビはid='blog-pager'のdiv要素に入りますのでそれは残しておかなないといけません。
CSSも外さないといけません。
どこに古いページナビを入れたのかと思ったら直接テンプレートのHTMLに入れてました。
<b:includable id='page-navi'>に入れていた古いページナビのスクリプトを削除しました。
<b:includable id='nextprev'>にid='blog-pager'のdiv要素がありますがこれはアイテムページのものですね。
もう長く触っていないので忘れてしまいました。
<b:includable id='main' var='top'>のなかにインデックスページで場合分けしていいる部分を見つけました。
<!-- navigation --> <b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/> <b:else/> <b:include name='nextprev'/> </b:if>インデックスページでは<b:include name='page-navi'/>を呼び出しそれ以外のページでは<b:include name='nextprev'/>を呼び出しているので<b:include name='page-navi'/>に<div class='blog-pager' id='blog-pager'></div>をいればよいとわかりました。
<b:includable id='page-navi'> <div class='pagenavi'> <div class='blog-pager' id='blog-pager'></div> <div class='clear'/> </div> </b:includable>とりあえず<b:includable id='page-navi'>に入れました。
CSSの除去は圧縮してあるので取り除くのに一苦労です。
うーん、慎重にやったつもりでしたがアイテムページの下のページナビのボタンまで消えてしまいました。
あとで考えることにしてとりあえず新しいページナビをHTML/JavaScriptガジェットに入れます。
footer-1に入れることにしました。
headerのガジェットに入れるとボタンのhtmlを置換するhtmlの要素がまだ描かれていないためにボタンが表示されませんでした。
インデックスページのページナビの表示はうまくいきました。
アイテムページのページナビを戻さないといけません。
#blog-pager a{
margin: 0 5px 0 0;
padding: 2px 10px 3px;
text-decoration: none;
color: #fff;
background: #2973FC;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#blog-pager a:hover{
color: #fff;
text-decoration: none;
background: #000;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
これを戻してアイテムページのページナビも元に戻りました。モバイルサイトのアイテムページのページナビも戻りました。
モバイルサイトのページナビも変更する
<b:includable id='mobile-page-navi'> <div class='pagenavi mobile-pagenavi'> <div class='blog-pager' id='blog-pager'/> <div class='clear'/> </div> </b:includable>モバイルサイトには<div class='blog-pager' id='mobile-blog-pager'></div>を貼り付けてレイアウトを変えようと考えていましたが、CSSのセレクタも変更しないといけないと気が付いたのでPCサイトと同じにすることにしました。
HTML/JavaScriptガジェットをモバイルサイトでも有効にするにはテンプレートをいじってウィジェットの設定を変えないといけません。
Blogger：レイアウト編集(10)ウィジェットのIDを確認する方法の方法で確認するとスクリプトを入れたウィジェットはHTML8とわかりました。
<b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML' visible='true'>HTML8のウィジェットのプロパティにmobile='yes'を追加します。
さらにモバイルサイトのテンプレートをデフォルトからカスタムに変更してないいけません(Blogger：ラベル設定(4)モバイルサイトでラベルリストを表示を参照)。
iPod touchでは数字がページ番号が3桁になるとレイアウトが崩れてきます。
動作確認できたのでBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するで圧縮してHTML/JavaScriptガジェットに入れ直しました。
参考にしたサイト
How to Add Numbered Page Navigation Widget for Blogger | Helplogger
フィードの取得制限に作用されないページナビ。
JavaScript 忘れがちな === と == の違い - Qiita
デフォルトのNetBeans8.1では===を使うように推奨されますが===の使い方は難しそうです。
javascript - Numbered page-navigation of Google Blogger not working on search results page - Stack Overflow
検索結果のページにも対応したページナビのようですがうまく動きませんでした。
【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
document.writeを使わない方法が紹介されています。
JavaScriptではエルビス演算子を論理演算子で代用できる - Qiita
今回は使いませんでしたがそのうち機会があったら使ってみようと思います。
0 件のコメント:
コメントを投稿