%%# Modify Layout of sites%% Tested in the theme: bookstrape
Glance
1cd layouts/partials/
2ls -l
This htmls describe the basic layout of your sites
1-rwx------+ 1 parkman None 105 Sep 1 22:21 body-end.html
2-rwx------+ 1 parkman None 878 Sep 1 22:21 breadcrumb.html
3drwx------+ 1 parkman None 0 Sep 2 00:52 footer
4-rwx------+ 1 parkman None 243 Sep 1 22:21 footer.html
5drwx------+ 1 parkman None 0 Sep 2 00:32 head
6-rwx------+ 1 parkman None 905 Sep 2 01:07 head.html
7drwx------+ 1 parkman None 0 Sep 2 00:32 header
8-rwx------+ 1 parkman None 55 Sep 1 22:21 header.html
9drwx------+ 1 parkman None 0 Sep 2 00:32 helpers
10drwx------+ 1 parkman None 0 Sep 2 00:32 hooks
11-rwx------+ 1 parkman None 1018 Sep 1 22:21 list.html
12-rwx------+ 1 parkman None 96 Sep 1 22:21 pagination.html
13drwx------+ 1 parkman None 0 Sep 2 00:32 plugins
14drwx------+ 1 parkman None 0 Sep 2 00:32 post
15-rwx------+ 1 parkman None 539 Sep 1 22:21 post.html
16-rwx------+ 1 parkman None 110 Sep 1 22:21 scroll-to-top.html
17-rwx------+ 1 parkman None 330 Sep 1 22:21 sections.html
18drwx------+ 1 parkman None 0 Sep 2 00:32 sidebar
19-rwx------+ 1 parkman None 207 Sep 1 22:21 sidebar.html
we can modify them. Let’s begin with header
header
try extract dark/light mode
1<header>
2 {{- partial "header/navbar" . -}}
3</header>
header.html call the function(I guess) navbar in the header folder, which writes,
1{{- $menusPositions := dict "right" "ms-auto" "left" "me-auto" "center" "me-auto ms-auto" -}}
2{{- $baseURL := $.Site.BaseURL -}}
3<nav class="navbar navbar-expand-xl{{ if (default true $.Site.Params.fixedHeader) }} fixed-top{{ end }}">
4 <div class="container{{ if default false .Site.Params.fullWidth }}-fluid{{ end }}">
5 <a class="navbar-brand{{ if .IsHome }} active{{ end }}" href="{{ absLangURL "" }}">
6 {{ partial "helpers/image" (dict "filename" (default "images/logo.webp" .Site.Params.logo) "alt" "Logo" "class" "logo" "resources" .Resources) }}
7 {{- with .Site.Params.brand -}}
8 {{ . }}
9 {{- end -}}
10 </a>
11 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
12 <span class="navbar-toggler-icon"></span>
13 </button>
14 <div class="collapse navbar-collapse" id="navbarSupportedContent">
15 <ul class="navbar-nav me-1 mb-2 mb-lg-0">
16 {{- partial "header/search-bar" . -}}
17 </ul>
18 {{- $menusPosition := default "right" .Site.Params.menusPosition -}}
19 <ul class="navbar-nav me-1 mb-2 mb-lg-0 me-1 {{ index $menusPositions $menusPosition }}">
20 {{- $currentPage := . -}}
21 {{- range .Site.Menus.main -}}
22 {{- $url := absLangURL .URL -}}
23 {{- $active := or (eq $currentPage.Permalink (absLangURL .URL)) ($currentPage.IsMenuCurrent "main" .) -}}
24 {{- if .HasChildren -}}
25 <li class="nav-item dropdown">
26 <a class="nav-link{{ if $currentPage.HasMenuCurrent "main" . }} active{{ end }}" id="navbarDropdown-{{ .Identifier }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
27 {{ .Pre }} {{- .Name -}} {{ .Post }}
28 </a>
29 <ul class="dropdown-menu" aria-labelledby="navbarDropdown-{{ .Identifier }}">
30 {{- range .Children -}}
31 {{- $childURL := absLangURL .URL -}}
32 <li>
33 <a class="dropdown-item{{ if or (eq $currentPage.Permalink (absLangURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
34 href="{{ $childURL }}"{{ if not (hasPrefix $childURL $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
35 {{ .Pre }} {{- .Name -}} {{ .Post }}
36 </a>
37 </li>
38 {{- end -}}
39 </ul>
40 </li>
41 {{- else -}}
42 <li class="nav-item">
43 <a class="nav-link{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
44 {{ .Pre }} {{- .Name -}} {{ .Post }}
45 </a>
46 </li>
47 {{- end -}}
48 {{- end -}}
49 {{- partial "header/languages" . -}}
50 {{- partial "header/settings" . -}}
51 </ul>
52 </div>
53 </div>
54</nav>
This files describe all the componet of the headbar of my site, howerver, I just would not like the collapse setting button and hope to extrack the dark/light mode button out. Track this line
1{{- partial "header/settings" . -}}
put this line out of the class “offcanvas-body”
1{{- partial "header/settings/mode" . -}}
annotate the words mode
1<!-- <div class="col-auto">
2 <label><i class="fas fa-fw fa-adjust"></i> {{ i18n "mode" }}</label>
3 </div> -->
Actucally, the result shows this is a silly action. It’s ugly.
try disable the catagories
Sidebar
1{{- partial "sidebar/profile" . -}}
2{{- partial "sidebar/featured-posts" . -}}
3{{- partial "sidebar/recent-posts" . -}}
4{{- partial "sidebar/taxonomies" . -}}
we can interchange the sequence.
footer
1{{- partial "footer/social-links" . -}}
2{{- partial "footer/count" . -}}
3{{- partial "footer/copyright" . -}}
4{{- partial "footer/powered-by" . -}}
we add conut component “busuanzi” in the bottom of pages
