Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Menu code #46

Open
VincentTam opened this issue Aug 10, 2019 · 2 comments

Comments

@VincentTam
Copy link
Collaborator

commented Aug 10, 2019

Code Change Request

Is your request related to a problem?

The current code base makes use of the identifier field to render Font Awesome icons.

[[menu.main]]
name = "Home"
url = "/"
identifier = "fas fa-home"
weight = 1

Even though this works, this is not the intended role of this field. This field serves as a unique ID for the menu entry so that its children be associate themselves with it using their parent field.

[[menu.main]]
  name = "About"
  url = "page/about/"
  weight = 1

[[menu.main]]
  name = "Math Resources"
  url = "math-live-preview"
  weight = 2

[[menu.main]]
  parent="Math Resources"
  name = "Math Editor"
  url = "math-live-preview"
  weight = 1

[[menu.main]]
  parent="Math Resources"
  name = "Math.SE Comments"
  url = "page/math-se-comment-templates/"
  weight = 2

Source: site config for my blog

Solution

Use the pre field instead of identifier.

Additional Context

@pacollins

This comment has been minimized.

Copy link
Owner

commented Aug 10, 2019

The only issue I see here is that it would prevent backwards compatibility with no way to do a work around.

@VincentTam

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 10, 2019

The only issue I see here is that it would prevent backwards compatibility with no way to do a work around.

@pacollins To substantialise your concern about backwards compatibility, here're a list of Git repos that uses this theme as a submodule.

🤔 Nonetheless, writing the theme in a way that's consistent with the Hugo docs makes it easier to be maintained and understood by other Hugo developers.

💡 After thinking about this for two hours, here's an idea that might satisfy both old and new users: add some Hugo logic in the Go-HTML template file to differentiate "old" and "new" users.

(Edited: typo made in the first version of this comment. I intended to say to handle both "old" and "new" types of config.toml with the same Go-HTML template file containing some Hugo logic. Lemme think about what's the Hugo logic should exactly be.)

  • old: keep using identifier for navbar icon
  • new: do something like what I've done to my blog.
{{ range .Site.Menus.main.ByWeight }}
  {{ if .HasChildren }}
    <li class="navlinks-container">
      {{ if .Pre }}
        <a class="navlinks-parent" title="{{ .Name }}">{{ .Pre }}</a>
      {{ else }}
        <a class="navlinks-parent">{{ .Name }}</a>
      {{ end }}
      <div class="navlinks-children">
        {{ range .Children }}
          {{ if .Pre }}
            <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
          {{ else }}
            <a href="{{ .URL  | relLangURL }}">{{ .Name }}</a>
          {{ end }}
        {{ end }}
      </div>
    </li>
  {{ else }}
    <li>
      {{ if .Pre }}
        <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
      {{ else }}
        <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
      {{ end }}
    </li>
  {{ end }}
{{ end }}

so that the following example in Hugo's docs for Menus would work.

[menu]

  [[menu.main]]
    identifier = "about"
    name = "about hugo"
    pre = "<i class='fa fa-heart'></i>"
    url = "/about/"
    weight = -110

  [[menu.main]]
    name = "getting started"
    post = "<span class='alert'>New!</span>"
    pre = "<i class='fa fa-road'></i>"
    url = "/getting-started/"
    weight = -100

In addition, provided that we've support for the pre field, it's better to leave a word about this change in the README.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.