Introduction

Now that we have the project html layouts sorted, the next challenge is to populate them seamlessly. Seamlessly, being the operative word due to the fact that the degree of content linkage precludes manual linking. Why? As more content is added, updating and relinking content becomes quickly impractical.

The simple answer to that in the Jekyll framework is the includes functionality.

Includes Project Index

This file is included in the project_index_page.html layout file within a div element as follows:

{% include project_index.html %}

The basic logic is:

1. Iterate through all of the pages on the site
2. Select pages that match the following criteria:
   • pages with the project layout
   • pages that do not match the project assigned to project_index_page.html.
3. Extract the page title and URL
4. Include the abstract within the project index entry

Includes project abstract

In the process outlined in the section above, step 4 proved the most challenging. This is because the inclusion of the abstract file was more complicated than expected.

Inclsion of the project abstract within project pages was a simple matter, as both files are intended to exist in the same subdirectory, hence the simple includes call in the project page layout:

{% include abstract.html %}

However, when including a file that is not in the same directory or within the _includes subdirectory it needs to be included with an includes relative Liquid tag. This essentially extracts the file from the chosen path, which is relative to the projects/ directory, which is the parent of the directory where all the abstracts should exist.

{% include_relative project_dir/abstract.html %}

This was NOT as simple as it first seemed . However, after some searching I was able to find a useful solution. This essentially involved splitting of each selected project page path in order to obtain the project directory path segment so that it could be captured and prefixed to the abstract.html path segment. I got my inspiration here and basically cribbed the entire solution, tweaking it to exclude first path element (the project parent dir) from the reconstructed path, using a minus subtraction filter, to properly locate each file. The code section that delivered the completed solution was this:

{% include_relative {{path}}/{{page.abstract}} %}

Styling

Now that the index page was laid out, it was time to add some styling. I fiddled with the styling of borders (and here); text indentation and alignment; font weight and styling; and CSS padding and margin.

At the moment, the styles are implemented in project_overview_page.html based on html elements created and defined in the project_index.html includes fragment. Once I am finished with the styling, I will include the final styling in the main CSS file, as previously done in an earlier post.

Conclusion

This was an important milestone to accomplish, because I now have a mechanism to automatically cataloque, build and showcase all the projects by simply building a project page to summarise its content and supply a brief abstract .