1

当我在我的网站上发布一些新闻或更新时，我想显示 5 个最新的并自动归档所有旧的，并创建诸如 news/page2、news/page3 等。

由于我不使用cms，所以我像这样自己写新闻

<div class="news">            
    <h2>Headline</h2>
    <div class="news_text">    
        content here...
    </div>
</div>

有没有可能在动态创建的页面中自动存档新闻，而我不必在我写新东西的时候一直这样做？

4

1 回答 1

1

是的，这绝对是可能的，但您可能需要放开“页面”。相反，您可以以 5 个一组（或类似的）调用其他新闻项目并将它们显示在同一页面上。

您可以使用带有（或不带有）AJAX 的 JavaScript（或 jQuery，如果您愿意）来实现。

由于您没有 CMS 并且不打算制作一个，我推荐使用“简单”的 jQuery 方法。

伪代码如下所示：

- Hide all news items 
- Show latest five items
- Make functionality to show next
  - Etc..

更新

jQuery 中的函数如下所示：

toShow = 5;
i = 0;

//initial run
processNews();

//process button clicks
$('#nextItems').click(function() {
   if ((i + toShow) >= $('.news_text').length)
   {
       i = 0;
       processNews();
   }
   else
   {
       i = i + toShow;
       processNews();        
   }
});

$('#prevItems').click(function() {
   if ((i - toShow) < 0 )
   {
       i = $('.news_text').length - toShow;
       processNews();
   }
   else
   {
       i = i - toShow;
       processNews();        
   }
});

//show news items function
function processNews(){  
    $( "#display" ).empty();
    $('.news_text').hide();
    for (var j = i; j < i+toShow; j++) {
        var $new = $('.news_text:eq('+j+')');
        $('#display').add($('.news_text:eq('+j+')'));
        $new.fadeIn(400);
        // or other cool animations like:    $new.slideDown(300);
    }
};

toShow您要同时显示的新闻站点的数量在哪里（目前我显示 5 个）。

divs然后，您可以使用或buttons在我的函数中由nextItems和定义来滚动浏览新闻prevItems。

所以你的 HTML 看起来像这样：

<div id="news">
    <div id="display"></div>
    <div class="news_text"><h2>Headline 1</h2> article one   </div>
    <div class="news_text"><h2>Headline 2</h2> article two   </div>
    <div class="news_text"><h2>Headline 3</h2> article three </div>
    <div class="news_text"><h2>Headline 4</h2> article four  </div>
    <div class="news_text"><h2>Headline 5</h2> article five  </div>
    <div class="news_text"><h2>Headline 6</h2> article six   </div>
    <div class="news_text"><h2>Headline 7</h2> article seven </div>
    <div class="news_text"><h2>Headline 8</h2> article eight </div>
    <div class="news_text"><h2>Headline 9</h2> article nine  </div>
    <div class="news_text"><h2>Headline 10</h2> article ten   </div>
    // etc....
</div>

<button id="prevItems">Show prev 5</button>
<button id="nextItems">Show next 5</button>

这是该实现的演示。

另请注意，您可以通过$new.

目前我有$new.fadeIn(400);，但你也可以做其他很酷的事情，比如$new.slideDown(300);如果你让自己的身高看起来真的<div id="news">很酷auto。也可以玩弄时代。你可以做一些很酷的事情:)

我希望这能够帮到你。

玩得开心 ：）

更新

如果您不希望在开始时加载所有新闻项目，但在过程中：您可以像我之前所说的那样使用 AJAX 加载。

例如将processNews函数更改为此（未经测试，请注意）：

var page = 1;

//show news items function
function processNews(){  
    $( ".display" ).empty();
    for (var j = 0; j < toShow; j++) {
        $("#display").load("news/newsitems"+page+".html .news_text:eq("+j+")");
    }
};

加载在页面上找到的前 5 个新闻站点newsitems1.html，在这种情况下，它位于一个名为的文件夹中news，并且必须可以从您的根文件夹访问。

然后，您可以在此文件夹中创建多个html文件并通过更改变量来访问它们var page。

我希望这会有所帮助。

于 2013-09-23T14:31:35.617 回答