Make Blog link text bold (just like e.g. `Shortcodes`)

[TheChymera]

I have tried to make the link to the Blog section bold, similarly to the “Example Site” and “Shortcodes” sections here:

Any ideas how I can make it bold? It seems neither markdown nor HTML code will work in the title section, and I was unable to track down the point in the code where I can selectively disable this neutralization.

Additionally, I'm thinking maybe it would be better for the default to make it bold? It is basically a section on its own, more distinct from “Example Site” and “Shortcodes” than they are from each other.

[chrillek]

Any ideas how I can make it bold?

I'd use CSS for that.

I'm thinking maybe it would be better for the default to make it bold?

Not at all. In general, users have an expection about the UX of links. Historically, they're blue. Making them bold would obscure that they're a link to many users. I for one would expect bold text to be an empasis, not a link. So if you want it, you should use CSS for your site.

[TheChymera]

Makes sense, but yeah, I don't know, it's really a section unlike all others, so it would make sense to highlight it somehow. At the very least from my perspective.

I'd use CSS for that.

Any idea what part of the CSS I should modify? I assume I'd need to derive the class which is currently used and then edit one of the HTML files to make sure it selects that class.

I was able to make sense of much of the theme over the past few days, but I wasn't able to track down where this element is styled.

[alex-shpak]

Hi! So, menu where you have Blog is menu-after native hugo menu. rendered here: https://github.com/alex-shpak/hugo-book/blob/master/layouts/partials/docs/menu-hugo.html

And some docs: https://gohugo.io/content-management/menus/ There is no direct way to affect its CSS. There are 2 ways:

1. Use .Pre and .Post fields of hugo menu to wrap elemen in a <span>
2. Add support for class in menu params: https://gohugo.io/content-management/menus/#params

[TheChymera]

@alex-shpak thanks. Still getting to grips with hugo. The following code basically gave me what I needed:

[menu]
        [[menu.after]]
                identifier = 'blog'
                name = 'Blog'
                pre = "<b>"
                url = '/posts/'
                post = "</b>"
                weight = -110

Not sure whether <b> is particularly reliable, but shows up correctly on all my devices. I don't think I need anything more fancy, but it would be cool in principle to have full CSS control.

Is there any place where I can have my own CSS classes auto-added to the defaults (like as a separate file I can track independently)? Ideally I would like to avoid editing the standard hugo files with anything you'd be unwilling to pull, because there's only so long that my diffs will be valid. Eventually hugo-book will have changes that make the diffs incomprehensible, and if everything goes well this will be far enough in the future that I'll have forgotten what I was trying to do :D

[alex-shpak]

for full CSS control we perhaps can add .Params.class parameter to menu, to add class to the <a> tag

[alex-shpak]

Hi! .Params.class in menu was added

Example

menu:
  # before: []
  after:
    - name: "Github"
      url: "https://github.com/alex-shpak/hugo-book"
      weight: 10
      params:
        class: bold

[y0nei]

Just a note to new people looking into this cuz i had to search a bit, for local stuff you have to specify pageRef or else the element will automatically get a target="_blank" attached to it.

[[menu.after]]
    identifier = "blog"
    pageRef= "/posts/"
    name = "Blog"
    weight = -110

    [menu.after.params]
    class = "bold"

apologies for necrobump