nav.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <header>
  2. <nav class="navbar navbar-expand-lg navbar-dark p-0">
  3. <div class="container-fluid p-0">
  4. <div class="mx-auto">
  5. <a class="navbar-brand home" href="/">
  6. {{ if default false .Site.Params.disabled_logo }}
  7. <h4>{{ .Site.Params.logo_text }}</h4>
  8. {{ else }}
  9. <img src="{{ .Site.Params.logo_mobile | relURL }}" alt="{{ .Title }} logo" height="70px" alt="" />
  10. {{ end }}
  11. <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
  12. </a>
  13. </div>
  14. <button onclick="changeIcon(this)" class="navbar-toggler" type="button" data-bs-toggle="collapse"
  15. data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  16. aria-label="Toggle navigation">
  17. <span data-toggle-class="icon" class="navbar-toggler-icon"></span>
  18. </button>
  19. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  20. <ul class="navbar-nav align-items-lg-center mx-auto mb-2 mb-lg-0">
  21. <li class="navbar-logo">
  22. <a href="/">
  23. {{ if default false .Site.Params.disabled_logo }}
  24. <h4>{{ .Site.Params.logo_text }}</h4>
  25. {{ else }}
  26. <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" height="50px" alt=""
  27. style="image-rendering: -webkit-optimize-contrast;" />
  28. {{ end }}
  29. <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
  30. </a>
  31. </li>
  32. {{ $current := . }}
  33. {{ range .Site.Menus.main.ByWeight }}
  34. {{ $topLevel := replace .URL "/" "" }}
  35. {{ $active := "" }}
  36. {{ if eq $current.RelPermalink .URL }}
  37. {{ $active = "active" }}
  38. {{ end }}
  39. {{ if eq $current.Type $topLevel }}
  40. {{ $active = "active" }}
  41. {{ end }}
  42. {{ if and (or (eq $current.RelPermalink .URL) (eq "term" $current.Kind)) (in (slice "page" "term")
  43. $current.Kind) }}
  44. {{ range (split .URL "/") }}
  45. {{ if eq "blog" . }}
  46. {{ $active = "active" }}
  47. {{ end }}
  48. {{ end }}
  49. {{ end }}
  50. <li class="nav-item {{ $active }}">
  51. <a class="navbar-link" href="{{ .URL }}">{{ .Name }}</a>
  52. </li>
  53. {{ end }}
  54. <!-- <li class="">
  55. <a class="navbar-link" href="/collection.html">成家故事作品集</a>
  56. </li>
  57. <li class="nav-item">
  58. <a class="navbar-link" href="/room_planner.html">成家設計服務</a>
  59. </li>
  60. <li class="nav-item">
  61. <a class="navbar-link" href="/frequently_asked_questions.html">服務常見QA</a>
  62. </li>
  63. <li class="nav-item">
  64. <a class="navbar-link" href="/categories.html">成家知識專欄</a>
  65. </li>
  66. <li class="nav-item">
  67. <a class="navbar-link" href="/furniture_design.html">小寶設計單品</a>
  68. </li>
  69. <li class="nav-item">
  70. <a class="navbar-link" href="/store.html">小寶優居門市</a>
  71. </li> -->
  72. </ul>
  73. </div>
  74. </div>
  75. </nav>
  76. </header>
  77. <script>
  78. // Navbar Icon
  79. function changeIcon(e) {
  80. const item = document.querySelector('[data-toggle-class]');
  81. item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
  82. }
  83. </script>
  84. <!-- *** NAVBAR END ***-->