RapidWeaver 7に「最新記事」リストを配置する

スポンサーリンク

 

当ブログは、Mac用のホーページビルダーRapidWeaver7で作成しています。 ホームページには、既にRSS表示用ブログパーツの「FeedWind」を使わせて頂いて「記事一覧」を配置しています。 一方、ブログページには、未だ「記事リスト」を配置していませんでしたので、YahooのYQL API と jQueryを使った「最新記事リスト」をブログページにも配置してみようと試みました。 ネット情報を参考にしてRapidWeaver7で作成するブログページに、どの様に「最新記事」リストを配置したかをRapidWeaverの取扱い方を含めブログします。 なお、RapidWeaverのテーマは「Voyager」を使っています。

スポンサーリンク

 

「最新記事」リストの配置 完成画面

以下の様に、「最新記事」リストとして、ブログの最下段(フッター部分)に配置しました。

 

RSSフィード(xml)について

RapidWeaver7は、ブログ記事作成毎に、RSSフィード(xml)が自動的に更新されて行きます。 ファイルの場所は、ブログfilesフォルダーの中にある、feed.xmlです。 このfeed.xmlのデータは、タイトル、更新日、画像ファイル、サマリーのテキストデータが収められています。 これは、以下のRapidWeaver7のブログ作成時のSummsryの入力データと同じものです。

要は、feed.xmlのデータは、タイトル、更新日、画像ファイル、サマリーのテキストデータを夫々要素毎に取り出せば良いのですが、一番手っ取り早く、要素データを取り出す方法として、ネット情報によりますと、YahooのYQL API で、一旦feed.xmlをJSON形式にコールバックさせて、JSON形式のフォーマットを取得するQueryの$getJSON()を使えば、feed.xmlのデータ要素を取得することができるというものです。 ココらへんの詳しい説明は、「a href="https://blog2.k05.biz/2017/01/rss-javascript.html" rel="external noopener" target="_blank" sl-processed="1">【YQL API利用】JavascriptでRSSを読み込んで表示する方法」をご参照ください。 尚、JSONについては、ウィキペディアを参照してください。

 

RapidWeaver7への実装

1. jQueryを使用するための準備  

 

RapidweaverのCode設定画面

jQueryが使用出来るように、上のコードをRapidWeaverの全体に掛かるように 「Code」 をクリックして、下の様にHead タブにペーストしておきます。

2. JavaScriptの配置
基本は、「
YQL API と jQuery による RSS 表示:各ブログ対応版」を参考にさせて頂きました。 javaScriptは殆ど変えていませんが、当ブログに合うように一部修正しました。
変更点としては、

  • New!を赤字にして表示させ、更新日を5日→7日に変更
  • サムネイルのサイズや位置など調整
  • リンクを開く時、ブラウザが同じタブで開くように  target="_self " 変更
  • リスト行間の調整

 

 

以上のコードを、Page InspectorのJavaScriptタブにペーストします。

 
3.HTMLコードをフッターへ配置

 
以上のコードを下図のPage InspectorのGeneral Settings画面のFooterにペーストします。

 
尚、class指定の「panel」は、Page InspectorのCSSタブに以下のコードを配置しています。

以上で、RapidWeaver7で作成したブログページのフッターに「最新記事」リストが配置されました。

 


(追記)2018/8/21

「最新記事」リストの配置を、フッターから個別ページ(body)下段に変更しました。

 

(注記)2018/8/27

ブログを更新して、サイトにUPした時に、更新ブログが「最新記事」リストに直ぐに反映されない場合があります。 この原因は、YQL APIの標準時の違いで、YQLから見て、更新ブログの時刻が、将来時刻であるとリジェクトされ、例えば、YQLの標準時と更新ブログの時刻の差が9時間ですと、9時間後に更新ブログが「最新記事」リストに反映される様です。
 

 

スポンサーリンク

 

関連記事(一部広告含む)

 

 

Blog オススメ記事(コンテンツ選択)

ボタンを押してコンテンツ選択

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WebデザインやiPhone・PCなど

ツールと閑話ブログ

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5