html 使用Jekyll _includes作为自定义液体功能

Posted 2021-05-11

<!--
In order to open up the menu to the correct place when a page is loaded we need to mark its parent folder nodes as open in the HTML. Unfortunately this means that we need to iterate the structure twice: once to determine the breadcrumb of folders to the current article, and again to build the TOC using this information.

The function we use for the first iteration is /_includes/functions/f_navtree_open.html. The function is initially called with the TOC for the whole menu as a parameter.
-->

<!-- Iterate all items at root level of the passed-in TOC -->
{% for navitem in include.theTOC %} 

  <!-- If item is a folder ... -->
  {% if navitem.folder %}

    <!-- Add its name to the list of folders and assign to iterfolders -->
    {% capture iterfolders %}{% if include.folders %}{{include.folders}},{% endif %}{{navitem.folder}}{% endcapture %} 

    <!-- Call function again with folder content, and iterfolders listing the folders above it -->  
    {% if navitem.contents %}
      {% include /functions/f_navtree_open.html theTOC=navitem.contents folders=iterfolders %} 
    {% endif %}

  <!-- If the item is an URL matching the current page, output the list of folders above it (passed in as include.folders) -->
  {% elsif navitem.url %}
    {% if page.url == navitem.url %}{{include.folders}}{% endif %} 
  {% endif %}

{% endfor %}

<!--
The function iterates through the items in the first level of the passed TOC (include.theTOC):

If it encounters a folder, the function recursively calls itself to handle the next level of TOC. In this case the function is passed the TOC sub-tree and a comma separated list of all folders above the current point (include.folders).
If it finds an URL that matches the current page, the function outputs the current value of {{include.folders}}. This is the “result” - a comma separated list of folders in the direct path above the current article.
The function is used in /_includes/sidebar_tree.html as shown below:
-->

{% capture openfolder_array %}{% include /functions/f_navtree_open.html theTOC=toc %}{% endcapture %}
{% assign openfolder_array = openfolder_array | strip_newlines | split: "," %}
{% include /functions/f_navtree.html theTOC=toc outer='true' opentree =openfolder_array %}

<!--
First the function block is run within a capture block with the full TOC. The capture block assigns the returned comma separated list of folders (simply a string) to the openfolder_array variable. The variable is then stripped of newlines and split into an array object, and then assigned to the same variable name. Finally, the array is passed to the /functions/f_navtree.html where is is used to build the TOC.
-->

- folder: A folder
  contents:
   - url: /somepath/anydoc.html
   - url: /anypath/anotherdoc.html

   - folder: Nested Folder
     contents:
      - url: /anypath/anydoc1.html
      - url: /anypath/anydoc2.html


- folder: Another (peer) folder
  contents:
   - url: /anypath/anydoc3.html
     name: TOC defined name

- url: /anypath/anydoc4.html

<!--
“Functions” are simply files, typically with the extension .html, in the site _includes directory (or a subdirectory of that folder). These can contain any HTML, markup, or Liquid code.

The fragment below shows how you might pass in a string "a value" and a variable variable_name.
-->

{% include your_function.html some_parameter="a value" another_parameter=variable_name %}

<!--
Within the file you can access those parameters using {{ include.some_parameter }} and {{ include.another_parameter }} respectively.
-->