Merge a28a76767a into 28b0d82a53

archetypes/homepage.md

@@ -1,9 +1,19 @@
 ---
 title: '{{ replace .Name "-" " " | title }}'
+
+# The "header_menu_title" value will be used as text for header buttons.
+# The "title" value will be used if value for "header_menu_title" is not provided.
+#header_menu_title: 'Short Menu Title'
+
+# The "navigation_menu_title" value will be used as text for fixed menu items.
+# The "title" value will be used if value for "navigation_menu_title" is not provided.
+#navigation_menu_title: 'Short Menu Title'
+
 # The "weight" will determine where this section appears on the "homepage".
 # A bigger weight will place the content more towards the bottom of the page.
 # It's like gravity ;-).
 weight: 5
+
 # If "header_menu" is true, then a button linking to this section will be placed
 # into the header menu at the top of the homepage.
 header_menu: true

exampleSite/content/homepage/services.md

@@ -1,5 +1,7 @@
 ---
-title: "Services"
+title: "The Services I Offer"
+header_menu_title: "My Services"
+navigation_menu_title: "Services"
 weight: 2
 header_menu: true
 ---

layouts/index.html

@@ -10,7 +10,11 @@
             {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . }}</h2>{{ end }}
 
             {{ range where $sections ".Params.header_menu" "eq" true }}
-                 <a class='btn site-menu' data-title-anchor='{{ anchorize .Title }}'>{{ .Title }}</a>
+                {{ $button_title := .Title }}
+                {{ with .Params.header_menu_title }}
+                    {{ $button_title = . }}
+                {{ end }}
+                 <a class='btn site-menu' data-title-anchor='{{ anchorize .Title }}'>{{ $button_title }}</a>
             {{ end }}
             <i id='header-arrow' class="fa fa-angle-down"></i>
         </div>
@@ -21,10 +25,14 @@
     <div class='fixed-nav'>
     </div>
     {{ range $index_val, $elem_val := $sections }}
+        {{ $fnav_title := .Title }}
+        {{ with .Params.navigation_menu_title }}
+            {{ $fnav_title = . }}
+        {{ end }}
         <div class='post-holder'>
             <article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $sections) }}last{{ end }}'>
                 <header class="post-header">
-                    <h2 class="post-title">{{ .Title }}</h2>
+                    <h2 class="post-title" data-fnav-title="{{ safeHTMLAttr $fnav_title }}">{{ .Title }}</h2>
                 </header>
                 <section class="post-content">
                     {{ .Content }}

static/js/index.js

@@ -13,12 +13,15 @@ var $sitehead = $("#site-head");
 /* Globals jQuery, document */
 (function ($) {
   "use strict";
-  function srcTo(el) {
+  function srcTo(el, dur = 1000) {
     $("html, body").animate(
       {
         scrollTop: el.offset().top,
       },
-      1000
+      dur,
+      function() {
+        window.location.hash = el.attr("id");
+      }
     );
   }
   function srcToAnchorWithTitle(str) {
@@ -49,21 +52,16 @@ var $sitehead = $("#site-head");
     });
 
     $(".post-title").each(function () {
-      var t = $(this).text();
+      var t = $(this).data("fnav-title");
       var index = $(this).parents(".post-holder").index();
+      var postId = $(this).closest("article.post").attr('id');
       $fnav.append(
-        "<a class='fn-item' item_index='" + index + "'>" + t + "</a>"
+        "<a class='fn-item' item_index='" + index + "' data-post-id='" + postId + "'>" + t + "</a>"
       );
       $(".fn-item").click(function () {
-        var i = $(this).attr("item_index");
+        var postId = $(this).data("post-id");
-        var s = $(".post[item_index='" + i + "']");
+        var s = $("#" + postId);
-
+        srcTo(s, 400);
-        $("html, body").animate(
-          {
-            scrollTop: s.offset().top,
-          },
-          400
-        );
       });
     });