Sticky Posts Feature

[taufik-nurrohman]

Filtering results directly from $pages variable is currently not possible, and is not recommended. Authors are advised to separate the concerns. One of the best ways to make sticky posts feature is to have the target pages separate from the main pages.

To practically separate them from the main pages can be done by storing the pages as archives, that is, by saving them with the .archive extension.

After that, you can do the archives loop before the main pages loop manually, by fetching all pages with .archive extension. However, by doing the archives loop only is not enough. Archives need to be filtered further based on certain conditions. For example, you may need to add a sticky property to the archive page as an indicator that the archive page is designated to be a sticky post:

---
title: Page Title
description: Page description.
sticky: true
...

Lorem ipsum dolor sit amet.

In .\lot\layout\index.php file:

$stickies = [];
$folder = LOT . DS . 'article';

foreach (g($folder, 'archive') as $k => $v) {
    $v = new Page($k);
    if ($v->sticky) {
        $stickies[] = $k;
    }
    unset($v);
}

// Register the `$stickies` variable to global
$GLOBALS['stickies'] = new Pages($stickies);

In .\lot\layout\pages.php file:

<?php if (!empty($stickies)): ?>
  <!-- Sticky posts -->
  <?php foreach ($stickies as $sticky): ?>
    <article class="sticky">
      <h3>
        <a href="<?= $sticky->url; ?>">
          <?= $sticky->title; ?>
        </a>
      </h3>
      <p>
        <?= $sticky->description; ?>
      </p>
    </article>
  <?php endforeach; ?>
<?php endif; ?>
<!-- Normal posts -->
<?php foreach ($pages as $page): ?>
  <article>
    <h3>
      <a href="<?= $page->url; ?>">
        <?= $page->title; ?>
      </a>
    </h3>
    <p>
      <?= $page->description; ?>
    </p>
  </article>
<?php endforeach; ?>
<!-- Pagination for the normal posts -->
<nav>
  <?= $pager; ?>
</nav>

In .\lot\layout\asset\css\index.css:

article.sticky {
  background: #def;
  border: 1px solid #abc;
  padding: 1em 1.25em;
}