Skip to main content

Bắt đầu Mainroad

1)Từ Terminal chạy lệnh: cd D: hugo new site BlogD (ví dụ)
cd BlogD
git clone https://github.com/vimux/mainroad.git themes/mainroad

2)Tiếp lệnh: echo "theme = 'mainroad'" >> hugo.toml Mở file hugo.toml bằng Visual Studio sửa lại cho đúng định dạng.

3)Chép file config.toml trong folder themes/examplesite vào folder gốc của Site

4)Chạy thử: cd themes\mainroad\exampleSite hugo server --themesDir ../.. Sau đó past thử trên trình duyệt: http://localhost:1313/ Đến đây thấy xuất hiện trang Web là tốt rồi! Giờ chỉ hiệu chỉnh thôi!

5)Tạo trang chủ theo hướng dẫn https://gohugo.io/templates/homepage/ Xem kỹ link này: https://gohugo.io/templates/ Nghĩa là tạo trang index.html trong folder layout/ nội dung sau:

{{ define "main" }}
  <main aria-role="main">
    <header class="homepage-header">
      <h1>{{ .Title }}</h1>
      {{ with .Params.subtitle }}
        <span class="subtitle">{{ . }}</span>
      {{ end }}
    </header>
    <div class="homepage-content">
      <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
      {{ .Content }}
    </div>
    <div>
      {{ range first 10 .Site.RegularPages }}
        {{ .Render "summary" }}
      {{ end }}
    </div>
  </main>
{{ end }}

6)Làm menu nhiều tầng theo hướng dẫn của trang này:
https://codingnconcepts.com/hugo/nested-menu-hugo/
Gồm 4 bước:

1)Update config.toml file to provide menu and submenu configuration.
2)Create layouts/partials/menu.html to generate HTML from menu and submenu configuration.
3)Use menu partial in either layouts/partials/header.html or layouts/_defaults/baseof.html
depending upon the theme you are using.
4)Finally you need to update your style.css file with menu related CSS

Bắt đầu thực hiện step by step!

1)Update config.toml: 

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "category"
    name = "Category"
    url = "/category"
    weight = 2
  [[menu.main]]
    identifier = "category1"
    name = "Category1"
    url = "/tags/category1"
    parent = "category"
    weight = 1
  [[menu.main]]
    identifier = "category2"
    name = "Category2"
    url = "/tags/category2"
    parent = "category"
    weight = 2
  [[menu.main]]
    identifier = "category3"
    name = "Category3"
    url = "/tags/category3"
    parent = "category"
    weight = 3
  [[menu.main]]
    identifier = "another-category"
    name = "Another Category"
    url = "/another-category"
    weight = 3
  [[menu.main]]
    identifier = "another-category1"
    name = "Another Category1"
    url = "/tags/another-category1"
    parent = "another-category"
    weight = 1
  [[menu.main]]
    identifier = "another-category2"
    name = "Another Category2"
    url = "/tags/another-category2"
    parent = "another-category"
    weight = 2
  [[menu.main]]
    identifier = "about"
    name = "About Us"
    url = "/about/"
    weight = 4

Làm thực tế:

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "categories"
    name = "CHUYÊN MỤC"
    url = "/categories"
    weight = 2
  [[menu.main]]
    identifier = "Anki"
    name = "Anki"
    url = "/tags/Anki"
    parent = "categories"
    weight = 3
   [[menu.main]]
    identifier = "Hugo"
    name = "HUGO"
    url = "/tags/Hugo"
    parent = "categories"
    weight = 4
     [[menu.main]]
    identifier = "Tips"
    name = "TIPS PC"
    url = "/tags/Tips"
    parent = "categories"
    weight = 5

2)Update layouts/partials/menu.html Tạo file menu.html trong layouts/partials/ có nội dung:

{{- if .Site.Menus.main }}
<nav class="menu">
  <button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
    <span class="menu__btn-title" tabindex="-1">{{ T "menu_label" }}</span>
  </button>
  <ul class="menu__list">
    {{- $currentNode := . }}
    {{- range .Site.Menus.main }}
    {{- if .Name }}
    {{- if .HasChildren }}
    <li class="menu__item menu__dropdown{{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
      <a class="menu__link" href="{{ .URL }}">
        {{ .Pre }}
        <span class="menu__text">{{ .Name }}</span>
        <label class="drop-icon" for="{{ .Name }}">▾</label>
        {{ .Post }}
      </a>
      <input type="checkbox" id="{{ .Name }}">
      <ul class="submenu__list">
        {{ range .Children }}
          <li class="menu__item{{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
          <a class="menu__link" href="{{ .URL }}">
            {{ .Pre }}
            <span class="menu__text">{{ .Name }}</span>
            {{ .Post }}
          </a>
          </li>
        {{ end }}
      </ul>
    </li>
    {{- else }}
    <li class="menu__item{{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
      <a class="menu__link" href="{{ .URL }}">
        {{ .Pre }}
          <span class="menu__text">{{ .Name }}</span>
        {{ .Post }}
      </a>
    </li>
    {{- end }}
    {{- end }}
    {{- end }}
  </ul>
</nav>
{{ else -}}
<div class="divider"></div>
{{- end }}

Nhập code trên vào layouts/partials/header.html hoặc layouts/defaults/baseof.html , tùy file nào có thể nhập vào được! 3)Update static/css/style.css

/* Main menu */
.no-js .menu__btn {
  display: none;
}

.menu__btn {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: #fff;
  background: #2a2a2a;
  border: 0;
  outline: 0;
}

.menu__btn-title {
  position: relative;
  display: block;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

:focus > .menu__btn-title {
  box-shadow: inset 0 0 1px 3px #e22d30;
}

button:not(:-moz-focusring):focus > .menu__btn-title {
  box-shadow: none;
}

.menu__btn:focus,
.menu__btn-title:focus {
  outline: 0;
}

.js .menu__btn--active {
  color: #e22d30;
}

.menu__list,
.submenu__list {
  list-style: none;
  background: #2a2a2a;
}

.menu__item {
  transition: background-color .25s ease-out;
}

.menu__item:hover > a {
  color: #ffa500;
}

.menu__item:first-child {
  border: 0;
}

.menu__item--active {
  background: #e22d30;
}

.menu__link {
  display: block;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.menu__list .menu__item .submenu__list {
  background: #2a2a2a;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  max-width: 15rem;
  transition: all 0.5s ease;
  border-top: 5px solid #e22d30;	  
  display: none;	  
}

.menu__item.menu__dropdown input[type="checkbox"] {
  display: none;
}

.menu__list .menu__item:hover > .submenu__list,
.menu__list .menu__item:focus-within > .submenu__list,
.menu__list .menu__item .submenu__list:hover,
.menu__list .menu__item .submenu__list:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu__link:hover {
  color: #fff;
}

.js .menu__list {
  position: absolute;
  z-index: 1;
  width: 100%;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.js .menu__list--active {
  visibility: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.menu__list--transition {
  transition: visibility 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
}

@media screen and (min-width: 767px) {
  .menu {
    border-bottom: 5px solid #e22d30;
  }
  .menu__btn {
    display: none;
  }
  .menu__list, .js .menu__list {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    visibility: visible;
    border: 0;
    -webkit-transform: none;
    transform: none;
	}
  .menu__item {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media screen and (max-width: 767px) {
  .menu__item.menu__dropdown .drop-icon {
    position: absolute;
    right: 1rem;
    top: auto;
    width: 50%;
    text-align: right;
  }
  .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list {
    display: none;
  }
  .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list {
    border: none;
    padding-left: 20px;
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    max-width: 100%;
  }
}

@media screen and (max-width: 620px) {
  .menu__item.menu__dropdown .drop-icon {
    position: absolute;
    right: 1rem;
    top: auto;
  }
  .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list {
    display: none;
  }
  .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list {
    border: none;
    padding-left: 20px;
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    max-width: 100%;
  }
}

Nhập code sau đây vào layouts/partials/header.html hoặc layouts/defaults/baseof.html tùy file nào có thể nhập vào được!

{{ $style := resources.Get "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . -}}

4)Update static/js/menu.js Nếu trong theme không có sẵn, thì nhập code này vào:

'use strict';

(function iifeMenu(document, window, undefined) {
	var menuBtn = document.querySelector('.menu__btn');
	var	menu = document.querySelector('.menu__list');

	function toggleMenu() {
		menu.classList.toggle('menu__list--active');
		menu.classList.toggle('menu__list--transition');
		this.classList.toggle('menu__btn--active');
		this.setAttribute(
			'aria-expanded',
			this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
		);
	}

	function removeMenuTransition() {
		this.classList.remove('menu__list--transition');
	}

	if (menuBtn && menu) {
		menuBtn.addEventListener('click', toggleMenu, false);
		menu.addEventListener('transitionend', removeMenuTransition, false);
	}
}(document, window));

Nhập tiếp code sau vào layouts/partials/header.html hoặc layouts/defaults/baseof.html, tùy thích hợp:

<script async defer src="{{ "js/menu.js" | relURL }}"></script>

Bổ sung vào config.toml(hoặc hugo.toml) code sau:

assetDir = "static"

Khi đã cấu hình trong config.toml chẳng hạn:

[[menu.main]]
    identifier = "category1"
    name = "Category1"
    url = "/tags/category1"
    parent = "category"
    weight = 1

thì sau đó trong bài post ta có thể dùng para để tag lên: Ví dụ:

myblogpost.md​
---
tags:
  - "category1"
---
5:11:01 AM