diff --git a/Gemfile b/Gemfile index 8070df8..e24a08a 100644 --- a/Gemfile +++ b/Gemfile @@ -4,4 +4,5 @@ source "https://rubygems.org" gemspec gem "jekyll", "3.9.2" +gem "jekyll-paginate", "1.1.0" gem "kramdown-parser-gfm", "1.1.0" diff --git a/Gemfile.lock b/Gemfile.lock index aaad3ce..5503030 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -33,6 +33,7 @@ GEM pathutil (~> 0.9) rouge (>= 1.7, < 4) safe_yaml (~> 1.0) + jekyll-paginate (1.1.0) jekyll-sass-converter (1.5.2) sass (~> 3.4) jekyll-watch (2.2.1) @@ -68,6 +69,7 @@ PLATFORMS DEPENDENCIES bundler (~> 2.2.30) jekyll (= 3.9.2) + jekyll-paginate (= 1.1.0) jekyll-theme-guardian! kramdown-parser-gfm (= 1.1.0) rake (~> 12.0) diff --git a/README.md b/README.md index 49f0090..ed13610 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,18 @@ ## Installation +### Remote Theme (Preferred) + +Add this line to your Jekyll site's `_config.yml`: + +```yaml +remote_theme: widen/jekyll-theme-guardian@ +``` + +See [releases](https://github.com/Widen/jekyll-theme-guardian/releases) for the most up-to-date tag to reference. + +### Standard Ruby Gem + Add this line to your Jekyll site's `Gemfile`: ```ruby @@ -43,9 +55,20 @@ guardian: disqus_shortname: ``` +This theme now properly leverages the `jekyll-pagination` plugin for blog posts. Ensure your site specifies proper [pagination configuration](https://jekyllrb.com/docs/pagination/): + +```yaml +paginate: 5 +paginate_path: "/blog/page/:num/" +``` + +If pagination configuration is not defined, then all posts will be rendered and paginator elements will be hidden. + ### Layouts * `default` - includes a header, content, and footer section +* `index` - extends `default`, used as a blog index page (with paginated support for posts), if content is provided it will be rendered _before_ the post list +* `page` - extends `default`, used for pages * `post` - extends `default` and optionally includes a Disqus comment block ### includes diff --git a/_config.yml b/_config.yml index 369c2ec..aa5bc5a 100644 --- a/_config.yml +++ b/_config.yml @@ -1,13 +1,19 @@ # theme configuration guardian: style: - logo_url: https://embed.widencdn.net/img/widen/c17yrvuaac/400px@2x/Widen Engineering White Logo.png?u=mcuc7i - header_background_url: https://embed.widencdn.net/img/widen/m4ml1kuspv/exact/1680x90_Engineering Blog Banner.png?keep=c&crop=yes&u=ksmgip + logo_url: https://embed.widencdn.net/img/widen/c17yrvuaac/400px@2x/widen-engineering-white-logo.png + header_background_url: https://embed.widencdn.net/img/widen/m4ml1kuspv/exact/widen-engineering-blog-banner.png?keep=c&crop=yes social_links: - twitter: widendev + twitter: acquiadev github_org: widen github_repo: jekyll-theme-guardian - email_subscription_url: https://www.widen.com + email_subscription_url: tracking: google_analytics_code: disqus_shortname: + +paginate: 5 +paginate_path: "/blog/page/:num/" + +plugins: + - jekyll-paginate \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index f510d49..e5b75fe 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -15,8 +15,12 @@

© Copyright {{ site.time | date: '%Y' }}, Widen Enterprises, Inc.

diff --git a/_layouts/index.html b/_layouts/index.html new file mode 100644 index 0000000..d0b4d9a --- /dev/null +++ b/_layouts/index.html @@ -0,0 +1,44 @@ +--- +layout: default +--- + +{{ content }} + +
+{% assign posts = site.posts %} +{% if paginator %} + {% assign posts = paginator.posts %} +{% endif %} +{% for post in posts %} +
+

+ {{ post.title }} +

+ +

+ {% if post.excerpt != '' %} + {{ post.excerpt | truncatewords: 50 | remove: '

' | remove: '

' }} + {% else %} + {{ post.content | strip_html | truncatewords: 50 }} + {% endif %} +

+ + • {{post.author}} +
+{% endfor %} + +{% if paginator %} +
+ {% if paginator.previous_page %} + Newer + {% else %} + Newer + {% endif %} + {% if paginator.next_page %} + Older + {% else %} + Older + {% endif %} +
+
+{% endif %} diff --git a/_sass/_index.scss b/_sass/_index.scss index bafbef9..2652e51 100644 --- a/_sass/_index.scss +++ b/_sass/_index.scss @@ -12,4 +12,17 @@ font-size: 1.65rem; color: $dark-grey; } + + .paginator { + display: flex; + gap: 16px; + justify-content: space-between; + + a, span { + padding: 8px; + display: inline-flex; + align-items: center; + gap: 4px; + } + } } diff --git a/index.html b/index.html index eb25ae0..f6278f0 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,3 @@ --- -layout: default +layout: index --- -
-
    - {% for post in site.posts %} -
    -

    - {{ post.title }} -

    - -

    - {% if post.excerpt != '' %} - {{ post.excerpt | truncatewords: 50 | remove: '

    ' | remove: '

    ' }} - {% else %} - {{ post.content | strip_html | truncatewords: 50 }} - {% endif %} -

    - - • {{post.author}} -
    - {% endfor %} -
-