Improve header and footer menu generation with <ul> and <li> tags

stevenix commented

2025-04-22 22:50:45 +02:00

I would like to be able to customize the look of the generated menu in the header and footer. In order to do this we need to generate the items in an undordered list as list items with <ul> and <li>.

I have updated scripts/build/templates.sh to include these elements. However, the css for the existing themes include the following:

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

li {
    margin-bottom: 0.75rem;
}

Therefore, we need to create additional css properties for each theme to decorate the menu in the header and footer like such:

/* Navigation */
nav {
    display: inline-block;
}

nav a {
    margin-right: 0.5rem;
    font-weight: 500;
    position: relative;
}

nav ul {
  list-style-type: none;
  display: flex;
  padding-left: 0;
  text-align: center;
}

nav li + li:before {
  content: "::";
  padding: 0 10px;
  display: inline;
}

/* footer nav */
footer {
    display: inline-block;
}

footer a {
    margin-right: 0.5rem;
    font-weight: 500;
    position: relative;
}

footer ul {
  list-style-type: none;
  display: flex;
  padding-left: 0;
  text-align: center;
}

footer li + li:before {
  content: "::";
  padding: 0 10px;
  display: inline;
}

Here is the diff for scripts/build/templates.sh

diff --git a/scripts/build/templates.sh b/scripts/build/templates.sh
index 3033462..396ba89 100755
--- a/scripts/build/templates.sh
+++ b/scripts/build/templates.sh
@@ -121,8 +121,8 @@ preload_templates() {
     # Generate dynamic menu items from pages
     # IMPORTANT: Requires PAGES_DIR, SITE_URL, PAGE_URL_FORMAT, MSG_* vars to be exported/available
     # Assumes parse_metadata function is available (sourced via utils.sh or content.sh)
-    local menu_items="<a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a>"
-    local footer_items="<a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a> &middot;"
+    local menu_items="<ul><li><a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a></li>"
+    local footer_items="<ul><li><a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a></li>"

     # Arrays to store primary and secondary pages
     # Ensure we reset the global arrays before populating
@@ -194,35 +194,39 @@ preload_templates() {
             continue
         fi

-        menu_items+=" <a href=\"$url\">$title</a>"
-        footer_items+=" <a href=\"$url\">$title</a> &middot;"
+        menu_items+=" <li><a href=\"$url\">$title</a></li>"
+        footer_items+=" <li><a href=\"$url\">$title</a></li>"
     done

     # Add Pages menu item if there are secondary pages
     if [ ${#SECONDARY_PAGES[@]} -gt 0 ]; then
-        menu_items+=" <a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a>"
-        footer_items+=" <a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a> &middot;"
+        menu_items+=" <li><a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a></li>"
+        footer_items+=" <li><a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a></li>"
     fi

     # Add standard menu items
     local tags_flag_file="${CACHE_DIR:-.bssg_cache}/has_tags.flag"
     # Add tags link only if the flag file exists (meaning tags were found in the last indexing run)
     if [ -f "$tags_flag_file" ]; then
-        menu_items+=" <a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a>"
+        menu_items+=" <li><a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a></li>"
     fi

     # Only add Archives link if enabled
     if [ "${ENABLE_ARCHIVES:-true}" = true ]; then
-      menu_items+=" <a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a>"
-      footer_items+=" <a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a> &middot;"
+      menu_items+=" <li><a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a></li>"
+      footer_items+=" <li><a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a></li>"
     fi
-    menu_items+=" <a href=\"${SITE_URL}/rss.xml\">${MSG_RSS:-"RSS"}</a>"
+    menu_items+=" <li><a href=\"${SITE_URL}/rss.xml\">${MSG_RSS:-"RSS"}</a></li>"

     # Add tags link to footer only if the flag file exists
     if [ -f "$tags_flag_file" ]; then
-        footer_items+=" <a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a> &middot;"
+        footer_items+=" <li><a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a></li>"
     fi
-    footer_items+=" <a href=\"${SITE_URL}/rss.xml\">${MSG_SUBSCRIBE_RSS:-"Subscribe via RSS"}</a>"
+    footer_items+=" <li><a href=\"${SITE_URL}/rss.xml\">${MSG_SUBSCRIBE_RSS:-"Subscribe via RSS"}</a></li>"
+
+    # close menu lists
+    menu_items+="</ul>"
+    footer_items+="</ul>"

     # Replace menu placeholders in templates
     HEADER_TEMPLATE=${HEADER_TEMPLATE//\{\{menu_items\}\}/"$menu_items"}
@@ -334,4 +338,4 @@ export FOOTER_TEMPLATE

 # Export functions - Do not export the SECONDARY_PAGES array itself anymore
 export -f preload_templates
-# export SECONDARY_PAGES # <-- Remove this export
\ No newline at end of file
+# export SECONDARY_PAGES # <-- Remove this export

I would like to be able to customize the look of the generated menu in the header and footer. In order to do this we need to generate the items in an undordered list as list items with `<ul>` and `<li>`. I have updated `scripts/build/templates.sh` to include these elements. However, the css for the existing themes include the following: ```css /* Lists */ ul, ol { margin-top: 0; margin-bottom: 1.75rem; padding-left: 2rem; } li { margin-bottom: 0.75rem; } ``` Therefore, we need to create additional css properties for each theme to decorate the menu in the header and footer like such: ```css /* Navigation */ nav { display: inline-block; } nav a { margin-right: 0.5rem; font-weight: 500; position: relative; } nav ul { list-style-type: none; display: flex; padding-left: 0; text-align: center; } nav li + li:before { content: "::"; padding: 0 10px; display: inline; } /* footer nav */ footer { display: inline-block; } footer a { margin-right: 0.5rem; font-weight: 500; position: relative; } footer ul { list-style-type: none; display: flex; padding-left: 0; text-align: center; } footer li + li:before { content: "::"; padding: 0 10px; display: inline; } ``` Here is the diff for `scripts/build/templates.sh` ```diff diff --git a/scripts/build/templates.sh b/scripts/build/templates.sh index 3033462..396ba89 100755 --- a/scripts/build/templates.sh +++ b/scripts/build/templates.sh @@ -121,8 +121,8 @@ preload_templates() { # Generate dynamic menu items from pages # IMPORTANT: Requires PAGES_DIR, SITE_URL, PAGE_URL_FORMAT, MSG_* vars to be exported/available # Assumes parse_metadata function is available (sourced via utils.sh or content.sh) - local menu_items="<a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a>" - local footer_items="<a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a> ·" + local menu_items="<ul><li><a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a></li>" + local footer_items="<ul><li><a href=\"${SITE_URL}/\">${MSG_HOME:-"Home"}</a></li>" # Arrays to store primary and secondary pages # Ensure we reset the global arrays before populating @@ -194,35 +194,39 @@ preload_templates() { continue fi - menu_items+=" <a href=\"$url\">$title</a>" - footer_items+=" <a href=\"$url\">$title</a> ·" + menu_items+=" <li><a href=\"$url\">$title</a></li>" + footer_items+=" <li><a href=\"$url\">$title</a></li>" done # Add Pages menu item if there are secondary pages if [ ${#SECONDARY_PAGES[@]} -gt 0 ]; then - menu_items+=" <a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a>" - footer_items+=" <a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a> ·" + menu_items+=" <li><a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a></li>" + footer_items+=" <li><a href=\"${SITE_URL}/pages.html\">${MSG_PAGES:-"Pages"}</a></li>" fi # Add standard menu items local tags_flag_file="${CACHE_DIR:-.bssg_cache}/has_tags.flag" # Add tags link only if the flag file exists (meaning tags were found in the last indexing run) if [ -f "$tags_flag_file" ]; then - menu_items+=" <a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a>" + menu_items+=" <li><a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a></li>" fi # Only add Archives link if enabled if [ "${ENABLE_ARCHIVES:-true}" = true ]; then - menu_items+=" <a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a>" - footer_items+=" <a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a> ·" + menu_items+=" <li><a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a></li>" + footer_items+=" <li><a href=\"${SITE_URL}/archives/\">${MSG_ARCHIVES:-"Archives"}</a></li>" fi - menu_items+=" <a href=\"${SITE_URL}/rss.xml\">${MSG_RSS:-"RSS"}</a>" + menu_items+=" <li><a href=\"${SITE_URL}/rss.xml\">${MSG_RSS:-"RSS"}</a></li>" # Add tags link to footer only if the flag file exists if [ -f "$tags_flag_file" ]; then - footer_items+=" <a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a> ·" + footer_items+=" <li><a href=\"${SITE_URL}/tags/\">${MSG_TAGS:-"Tags"}</a></li>" fi - footer_items+=" <a href=\"${SITE_URL}/rss.xml\">${MSG_SUBSCRIBE_RSS:-"Subscribe via RSS"}</a>" + footer_items+=" <li><a href=\"${SITE_URL}/rss.xml\">${MSG_SUBSCRIBE_RSS:-"Subscribe via RSS"}</a></li>" + + # close menu lists + menu_items+="</ul>" + footer_items+="</ul>" # Replace menu placeholders in templates HEADER_TEMPLATE=${HEADER_TEMPLATE//\{\{menu_items\}\}/"$menu_items"} @@ -334,4 +338,4 @@ export FOOTER_TEMPLATE # Export functions - Do not export the SECONDARY_PAGES array itself anymore export -f preload_templates -# export SECONDARY_PAGES # <-- Remove this export \ No newline at end of file +# export SECONDARY_PAGES # <-- Remove this export ```

Screenshot 2025-04-22 at 17.49.01.png

8.7 KiB

stevenix commented

2025-04-22 23:28:30 +02:00

Author

I would like to add, I'm still working on tweaking the CSS mentioned above, and I need to test it on other themes to make sure it doesn't cause any strangeness.

stefano self-assigned this 2025-04-23 10:19:57 +02:00

Rows
Columns

Improve header and footer menu generation with <ul> and <li> tags #10