5

Blogger和WordPress的倒序显示

 2 years ago
source link: https://www.williamlong.info/archives/6688.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Blogger和WordPress的倒序显示

2022-1-23 13:47:49 | 作者: 月光 | 分类: 网站建设 | 评论: 0 | 浏览: 503

  Blogger和WordPress都可以通过一定的设置,变成一个只供自己查看的私人博客,相当于私人日记本,具体方法是,在博客设置里将其设置为只有作者才能查看,然后将博客设置为在一页内全部显示(比如设置单页文章1千篇),在博客安装一个倒序显示脚本,即可完成日记本的功能,可供导出和打印。

  除了打印,还可以将内容复制到TXT文件里,在邮箱里发送到Kindle邮箱,然后在自己的Kindle上看,相当于看书的体验。

  这里面的一个技术问题是如何在Blogger和WordPress里实现按照日期倒序显示(Reverse Post Order)。这里分别给出Blogger和WordPress实现倒序的方法。

  在Blogger中,页脚点击“添加小工具”,添加“HTML/JavaScript”微件,之后在微件内容里插入如下代码:

<!-- Start Post Reversal Code -->
<script type='text/javascript'>
//<![CDATA[
  // -----------------------------------------------------------------------------------------
  // Name   : PRS - Post Reversal Script for Blogger - Version 1.0
  // Author : David Yockey
  // URL    :   techsquirrels.blogspot.com/2012/04/swapping-to-reverse-post-order-on.html
  // -----------------------------------------------------------------------------------------
  // Temp variable used to shorten classname references
  var cn;
  // This function is called as needed in the main program below.
  function ReversePosts(BlogPostContainer,PostClass) {
    // Arguments:
    //    BlogPostContainer -- The node containing the posts to be reversed.
    //    PostClass -- The className of each of the posts in the container to be reversed.
    //                 (may be a single name from among names in the class attribute of the posts)
    // Flag for checking whether any posts are found
    var found=false;
    var BlogPosts = BlogPostContainer.childNodes;  // May include text-nodes containing
                                                   // whitespace in addition to post-nodes
    // Set index variables to top and bottom of BlogPosts list
    var i=0;
    var j=BlogPosts.length-1;
    for( ; ; ) {     // Start Endless Loop
      // Find next Post from the top
      while( (i < j) && (!(cn=BlogPosts[i].className) || !(cn.match(PostClass))) )
        ++i;
      // Find next Post from the bottom
      while( (i < j) && (!(cn=BlogPosts[j].className) || !(found=cn.match(PostClass))) ) // (see Footnote 1)
        --j;
      if( found && i < j ) {
        // Swap Posts (see Footnote 2)
        var tempi = BlogPosts[i].cloneNode(true);           // Store a copy of Post i in tempi
        var tempj = BlogPosts[j].cloneNode(true);           // Store a copy of Post j in tempj
        BlogPostContainer.replaceChild(tempi,BlogPosts[j]); // Replace Post j with Post i in tempi
        BlogPostContainer.replaceChild(tempj,BlogPosts[i]); // Replace Post i with Post j in tempj
      } else {
        // Done
        break;        // Break out of Endless Loop
      }
      ++i; --j;
    }
  }
  // Footnote 1:
  //   If a post is found from one end, then a post must necessarily be found from the other.
  //   So, recording and later checking for a post from one end is sufficient to ensure that
  //   one was found from both.
  //
  // Footnote 2:
  //   At least in Firefox 11.0 on Fedora Linux, replacing a child directly with another child
  //   causes some text-nodes containing whitespace to be deleted. That node deletion messes up
  //   the positions of the posts in the BlogPosts list. This is avoided by cloning both posts
  //   rather than just one and replacing both posts from the cloned copies.
  // *** MAIN POST REVERSAL PROGRAM ***
  // Magic Words
  var BlogWidget             = 'Blog1';
  var BlogPostContainerClass = 'blog-posts';
  var BlogPostClass          = 'date-outer';
  var DatePostContainerClass = 'date-posts';
  var DatePostClass          = 'post-outer';
  var Blog1 = document.getElementById(BlogWidget);
  // Find the node containing the blog posts
  var BlogPostContainer;
  var x=0;
  do {
    BlogPostContainer = Blog1.childNodes[x++];
  } while ( !(cn=BlogPostContainer.className) || !(cn.match(BlogPostContainerClass)) );
  // Reverse different day posts
  ReversePosts(BlogPostContainer,BlogPostClass);
  // Reverse same day posts - Loop thru contents of BlogPostContainer to find each day's posts
  var BlogPosts = BlogPostContainer.childNodes;
  for ( i = 0; i < BlogPosts.length; ++i ) {
    // Check for an actual post-node rather than a text-node or such
    if ( (cn=BlogPosts[i].className) && cn.match(BlogPostClass) ) {
      var DatePostContainer;
      x=0;
      // Find the node containing the posts to be reversed for the current day being processed
      do {
        DatePostContainer = BlogPosts[i].childNodes[x++];
      } while ( !(cn=DatePostContainer.className) || !(cn.match(DatePostContainerClass)) );
      ReversePosts(DatePostContainer,DatePostClass);
    }
  }
//]]>
</script>
<!-- End Post Reversal Code -->

  之后保存,设置“主页上显示的博文数量上限”的数量,然后打开页面即可看到倒序的文章。

  对于WordPress来说,操作起来比较简单,安装一个名为“Chronological Posts”的Plugin即可实现倒序文章。

  从安全性来说,Blogger更为安全一些,谷歌帐号设置两步验证,在谷歌Blogger中写内容,然后设置只有自己只读,安装一个倒序显示脚本,然后复制到TXT文件里,在邮箱里发送到Kindle邮箱,然后在自己的Kindle上看,看完了就删,只要谷歌帐号不泄露,秘密的信息就不会泄漏。

Blogger和WordPress的倒序显示


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK