A tip for those of you looking to adapt this wonderful template for a more blog-like format, or if you simply want to document the chronological progression of your notes.
As you may have noticed, the feed generated by feed.html is based on the file name. Changing which files it reads first is non-trivial. It is instead much easier to wrap that output in a flex and sort that flex.
Open post.html
in /_layouts/
and replace {%- include feed.html -%}
with the following:
<div class="feed-wrapper">
{%- include feed.html -%}
</div>
Make sure that the div is indented the same as {%- include header.html -%}
in the line above it.
This will wrap the output of the feed, so we can now apply sorting through css.
I use zettelkasten prefixes on files I publish in _notes
, which means that newer files, by default, are below older files in the feed, due to the aforementioned alphanumeric processing of files and adding them to the feed. The following CSS snippet reverses that order, placing newer files at the top of the feed.
.feed-wrapper {
display: flex;
flex-direction: column-reverse;
}
In addition, you can use css to ‘pin’ a file to the top of the feed. Every entry in the feed is given a ‘data-url’ property, which we can target. As the order of the flex has been reversed, a larger order:
property means pinning a message to the top. The data-url contains the file’s name, which we can target using the method in the snippet below. Assuming there are no other files you are ‘pinning’ with css, an order of 1
suffices, if you are pinning multiple files the target with the highest order value is place on top.
.feed-wrapper [data-url*="FILENAME"]{
order: 1
}
For a file called 20210528-Modifying the notenote.link template
the data-url would be: [data-url*="20210528-Modifying the notenote.link template"]
.
You can place this css in the main style.css
file, but I instead recommend writing the css in another file, and importing it in style.css
, like so @import "/assets/css/feed_sorting.css";
.