QooQで更新日表示ガジェット-p--q

1MB制限にひっかからないインデックスページやガジェットを投稿日でオンオフできるテンプレートに作り変えようとしていますがまだ手が回っていません、、、

とりあえずコメントでQooQで更新日を表示する方法の質問を頂いたので現在使用中のスクリプトを書いておきます。

Dashboard ー＞レイアウト。

フッター2 ー＞ガジェットを追加をクリック。

HTML/JavaScriptガジェットを追加。

        
          
          
              
              <script>  // DisplayUpdatedDate_Bloggerモジュール
    var DisplayUpdatedDate_Blogger = DisplayUpdatedDate_Blogger || function(){
        var d = { // グローバルスコープに出すオブジェクト。
            callback: {  // コールバック関数。
                replace_date: function(json){  // 日付を置換する。
                    var feed_date = json.feed.entry[0].updated.$t;// 更新日時を取得。「2013-08-29T22:07:」書式で返る。
                    g.elem.textContent = ["Posted:", g.elem.textContent, "Last Updated:", feed_date.slice(0, 10)].join(" ");
                } 
            },
            all: function(id){ // ここから開始する。
                g.elem = document.getElementById(id);
                var url = '/feeds/posts/summary?path='+location.pathname+'&alt=json-in-script&callback=DisplayUpdatedDate_Blogger.callback.replace_date';
                g.elem && writeScript(url);            
            }
        };
        var g = { // モジュール内の"グローバル"変数。
            elem: null  // 日付を置換する要素。
        };
        function writeScript(url) {  // document.write()の代替。URLを読み込む。
            var newInclude = document.createElement('script');
            newInclude.type = 'text/javascript';
            newInclude.setAttribute("src", url);
            document.getElementsByTagName('head')[0].appendChild(newInclude);
        }
        return d;
    }();
    DisplayUpdatedDate_Blogger.all("single-header-date");
</script>

            

        
      

このスクリプトをHTML/JavaScriptガジェット内に貼り付けて保存するだけです。

フィードから更新日時を取得しているのでフィードを有効にした公開ブログでしか使えません。

QooQでは投稿日はsingle-header-dateというIDのタグで表示しているのでそのタグを書き換えています。

他のテンプレートでも投稿日のタグにIDが指定されているときは、最後の行のDisplayUpdatedDate_Blogger.all("single-header-date")のsingle-header-dateをそのIDで書き換えれば同様に使えるかと思います。

このスクリプトはBlogガジェットのあとに読み込まれる位置に置かないといけないのと、フィードの取得に時間がかかるので更新日が表示されるまで少しタイムラグが生じます。

Posted: 2019-06-30 Last Updated: 2019-06-30

このように置換されます。

ブログの日付書式は2019-06-30の形式にしています。

ブログの日付書式設定に関係なく更新日時分を表示する方法

上のスクリプトをさらに汎用化しました。

        
          
          
              
              <script>  // DisplayUpdatedDate_Bloggerモジュール
    var DisplayUpdatedDate_Blogger = DisplayUpdatedDate_Blogger || function(){
        var d = { // グローバルスコープに出すオブジェクト。
            callback: {  // コールバック関数。
                replace_date: function(json){  // 日付を置換する。
                    var published_date = json.feed.entry[0].published.$t;// 公開日時を取得。「2013-08-29T22:07:」書式で返る。
                    var updated_date = json.feed.entry[0].updated.$t;// 更新日時を取得。「2013-08-29T22:07:」書式で返る。
                    var p = published_date.match(/\d+/g);  // 公開年月日時分を配列に取得。
                    var u = updated_date.match(/\d+/g);  // 更新年月日時分を配列に取得。
                    g.elem.textContent = `公開日: ${p[0]}年${p[1]}月${p[2]}日${p[3]}時${p[4]}分 更新日: ${u[0]}年${u[1]}月${u[2]}日${u[3]}時${u[4]}分`;
                } 
            },
            all: function(id){ // ここから開始する。
                g.elem = document.getElementById(id);
                var url = '/feeds/posts/summary?path='+location.pathname+'&alt=json-in-script&callback=DisplayUpdatedDate_Blogger.callback.replace_date';
                g.elem && writeScript(url);            
            }
        };
        var g = { // モジュール内の"グローバル"変数。
            elem: null  // 日付を置換する要素。
        };
        function writeScript(url) {  // document.write()の代替。URLを読み込む。
            var newInclude = document.createElement('script');
            newInclude.type = 'text/javascript';
            newInclude.setAttribute("src", url);
            document.getElementsByTagName('head')[0].appendChild(newInclude);
        }
        return d;
    }();
    DisplayUpdatedDate_Blogger.all("single-header-date");
</script>

            

        
      

10行目で表示する書式を設定しています。

公開日もフィードから取得しているのでブログの日付書式に左右されません。

日時を取得している配列はテンプレート文字列 - JavaScript | MDNで展開しています。

この機会にこのブログの日付表示もこのスクリプトの時分を削ったものに置き換えました。

QooQで更新日表示ガジェット

ブログの日付書式設定に関係なく更新日時分を表示する方法

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事