Question

我一直在制作一个非常简单的博客页面来记录我在学习HTML5和CSS3方面的进展。到目前为止，我有2个非常基本的帖子。我想要创建的是每页10个帖子的限制，然后它将创建一个新页面，其中最新帖子位于顶部，就像我见过的一些Tumblr博客。在页面的底部，它将有“旧帖子”和“更新帖子”按钮，这些按钮将循环向前或向前循环10个帖子。每当我创建一个新帖子时，它会将第10个帖子推到上一页。最后，我还将创建一个博客存档，按月对我的帖子进行排序。用户将能够在1页上查看一个月内的所有帖子。我是HTML5和CSS3的新手，我愿意学习javascript，php或其他任何需要做的事情。任何帮助，甚至链接将不胜感激。以下是我到目前为止的情况：

<head>
    <meta charset="utf-8">
    <title>SmithSite:Blog</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <link href='http://fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>
    <!–[if lte IE 9]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
    <![endif]–>
</head>
<body>
  <header>
    <h1>SmithSite</h1>
  </header>
  <nav>
    <div id="menu">
    <ul id="menu">
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="about.html" title="About">About</a></li>
      <li><a href="blog.html" title="Blog" class="active">Blog</a></li>
    </ul>
    </div>
  </nav>
    <article>
      <header><h2>Adventures in HTML5 (Mon Mar  5 23:02:05 EST 2012)</h2></header>
      <p>So far, I've learned a little bit about HTML5 and CSS3. I've been using emacs as my editor. It has some very strance, but efficient keyboard shortcuts. It takes a little while to get used to, but I'm sure I'll get the hang of it. So far, I've created 3 buttons as you'll notice above. Next time, I'll try working on how to get this blog to span over multiple pages, or try to work out how to archive it.</p>
    </article>
    <article>
      <header><h2>My First Entry (02.24.12)</h2></header>
    <p>This is the contents of the article element. I can't tell if this will extend past the end of the page or not, but I'll just keep on typing until I see the result. I guess this is my first blog entry. I'm messing around with a little HTML and some CSS. I hope I can make a kickass webpage soon. Hey look, it automatically sets borders based on the style tag above! HTML5 is so smart!</p>
    </article>
</body>

Answer 1

在Javascript中使用jQuery有一个很好的分页示例：

jQuery Pagination Plugin

Answer 2

纯HTML可以做你想要的，但你会做很多繁琐的移动帖子，或用某种脚本生成html。

您正在寻找博客引擎。有一些从帖子列表中生成一堆静态页面，或者那些需要数据库后端的页面。

对于前者，你必须更加担心安全性，因为你所提供的只是静态页面。您唯一需要担心的是您的基本网络服务器的安全性。

通过动态的解决方案，您可以获得实时评论和发布，搜索以及其他类似内容的所有好处，但权衡是潜在的安全风险，并且博客服务器上的负载更多软件和数据库。

最常见的博客软件包可能是 Wordpress ，它是数据库支持的，动态的，用php编写的。它的许多主题可能是html5或至少有一些前瞻性的元素。我会说从那里开始，看看它在哪里。

HTML5分页

2 个答案: