Add pagination to blog
- Add pagination - Display full content in /blog - Truncate Recent posts - Add permalink that lists all the blog posts - Add spacing and bullet around recent posts to make it more readable
Vjeux committed
Aug 27, 2013 at 01:30 UTC
1c14cd6c8bd7fc6aeb88101cf147e7eab4d7825b
5 files changed
+63
-21
docs/_config.yml
+2
@@ -16,6 +16,8 @@ markdown: redcarpet
16
react_version: 0.4.0
17
description: A JavaScript library for building user interfaces
18
relative_permalinks: true
19
+paginate: 5
20
+paginate_path: /blog/page:num
21
nav_docs_sections:
22
- title: Quick Start
23
items:
docs/_css/react.scss
+25
-7
@@ -248,6 +248,12 @@ li {
248
249
}
250
251
+.nav-blog {
252
+ li {
253
+ margin-bottom: 5px;
254
+ }
255
+}
256
+
257
// Home Page specifics
258
259
.home-section {
@@ -285,14 +291,14 @@ li {
291
margin-right: 0;
292
}
293
288
-#examples {
289
- h3 {
290
- color: $darkColor;
291
- font-size: 24px;
292
- font-weight: normal;
293
- margin-bottom: 5px;
294
- }
294
+#examples h3, .home-presentation h3 {
295
+ color: $darkColor;
296
+ font-size: 24px;
297
+ font-weight: normal;
298
+ margin-bottom: 5px;
299
+}
300
301
+#examples {
302
p {
303
margin: 0 0 25px 0;
304
max-width: $twoColumnWidth;
@@ -685,3 +691,15 @@ p code {
691
.post {
692
margin-bottom: 30px;
693
}
694
+
695
+.pagination {
696
+ margin-bottom: 30px;
697
+
698
+ /* Trick to get the wrapper to expand to fit floating elements */
699
+ width: 100%;
700
+ overflow: hidden;
701
+
702
+ .next {
703
+ float: right;
704
+ }
705
+}
\ No newline at end of file
docs/_includes/nav_blog.html
+5
-4
@@ -1,10 +1,11 @@
1
-<div class="nav-docs">
1
+<div class="nav-docs nav-blog">
2
<div class="nav-docs-section">
3
<h3>Recent posts</h3>
4
<ul>
5
- {% for post in site.posts %}
6
- <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
7
- {% endfor %}
5
+ {% for post in site.posts limit:10 %}
6
+ <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
7
+ {% endfor %}
8
+ <li><a href="/react/blog/all.html">All posts ...</a></li>
9
</ul>
10
</div>
11
</div>
docs/blog/all.html
new
+15
@@ -0,0 +1,15 @@
1
+---
2
+title: Blog
3
+layout: default
4
+sectionid: blog
5
+id: all-posts
6
+---
7
+
8
+<section class="content wrap documentationContent nosidebar">
9
+ <div class="inner-content">
10
+ <h1>All Posts</h1>
11
+ {% for page in site.posts %}
12
+ <p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
13
+ {% endfor %}
14
+ </div>
15
+</section>
docs/blog/index.html
+16
-10
@@ -7,22 +7,28 @@ sectionid: blog
7
<section class="content wrap blogContent">
8
{% include nav_blog.html %}
9
<div class="inner-content">
10
- {% for page in site.posts %}
10
+ {% for page in paginator.posts %}
11
<div class="post-list-item">
12
<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
13
<p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
14
-
15
- <hr>
16
-
14
+ <hr />
15
<div class="post">
18
- {{ page.excerpt }}
19
- {% if page.excerpt != page.content %}
20
- <p>
21
- <a href="/react{{ page.url }}">Continue Reading →</a>
22
- </p>
23
- {% endif %}
16
+ {{ page.content }}
17
</div>
18
</div>
19
{% endfor %}
20
+
21
+ <div class="pagination">
22
+ {% if paginator.previous_page %}
23
+ <a href="/react/blog/{{ paginator.previous_page_path }}" class="previous">
24
+ « Previous Page
25
+ </a>
26
+ {% endif %}
27
+ {% if paginator.next_page %}
28
+ <a href="/react/blog/{{ paginator.next_page_path }}" class="next">
29
+ Next Page »
30
+ </a>
31
+ {% endif %}
32
+ </div>
33
</div>
34
</section>