Skip to content

Includes Directory

thomasthaddeus edited this page Dec 8, 2023 · 1 revision

Documentation for _includes Directory

The _includes directory in a Jekyll website is a crucial component of the site's structure. It contains partial HTML snippets or components that can be reused and included in multiple layouts or pages. These include elements like headers, footers, navigation menus, and any other reusable HTML segments.

Directory Structure

  • header.html: Contains the HTML for the site's header section. This typically includes the site logo, main navigation menu, and any other elements that appear at the top of every page.

  • footer.html: Houses the site's footer content. This can include copyright notices, links to privacy policy or terms of service, and social media links.

  • navigation.html: Defines the navigation menu of the site. This file often contains the HTML for the main menu items and can be included in the header.html or directly in layouts like default.html.

  • seo.html: If you're using additional SEO tags and scripts, they might be included in this file for easy inclusion in your layouts.

  • analytics.html: Contains the site's web analytics code (like Google Analytics), which can be included in the layout templates to appear on every page.

  • social-links.html: A snippet for social media links, which can be included in the footer or header.

  • comments.html: For integrating a comments section (like Disqus) into your blog posts.

  • sidebar.html: For sites with a sidebar, this file contains its contents, which might include a search box, list of recent posts, or advertisements.

Usage

  • Include these components in layouts or other includes using the {% include file_name.html %} tag. For example, {% include header.html %} will include the header.html content.
  • Break down complex layouts into manageable parts by creating specific includes for different sections of the page.

Best Practices

  • Modularity: Keep your HTML components modular. Each include file should serve a specific purpose.
  • Reuse: Maximize the use of includes to avoid repeating code across different layouts and pages.
  • Naming Convention: Name your include files clearly and descriptively to indicate their purpose and content.

Maintenance

  • Regularly review your include files for any updates or optimizations, especially if they contain dynamic content or links.
  • If any global changes are needed (like updating a social media link), you only need to update the respective include file.
  • Keep an eye on performance implications. Overusing includes for very small snippets of code can sometimes affect site build times.

Clone this wiki locally