Fuji2 Theme- How to add 'Read More'

support
1

I am relatively new to Hugo and I have been using Fuji2 Theme and hosted my website in Netlify.

I have a few questions.

  1. The summary page on a tag lists down the posts under the tag. However, on each post I would like to have a ‘Read More…’ as that would be more meaningful to give a hint to the readers that the blog post has something more in it, than just giving an impression that whatever is displayed is the entire content. How do I achieve this?

  2. Also the tags displayed underneath each post does not have a comma to separate each of them, which I feel would be of a good use. How can I achieve this?

image
image975×469 35.3 KB

I know I can ask this in the Fuji2 Theme forum, but I though I can get a help from here as it is a common consortium for Hugo sites.

Cheers,
RM…

2

The list seems to be defined by layouts/_default/list.html. We can overwrite template files as follows:

mkdir -p layouts/_default
cp themes/hugo-theme-fuji/layouts/_default/list.html layouts/_default/list.html

Then, edit layouts/_default/list.html

  • To implement 1: You can add a new link “Read more”.
  • To implement 1: You can overwrite layouts/partials/post-meta.html as the same as layouts/_default/list.html
1 Like
3

Thanks @peaceiris . I will work on this and update you.

Another QQ (quick question). How do I link the text to the particular post? That is when it would be meaningful and connected. Excuse my ignorance as I have not been familiar with the golang.

4

When we have content/posts/todo.md

- [TODO](/posts/todo)
- [TODO]({{< ref "todo" >}})
- [TODO]({{< ref "/posts/todo" >}})
- [TODO]({{< ref "/posts/todo.md" >}})
- [TODO]({{< relref "todo" >}})
- [TODO]({{< relref "/posts/todo" >}})
- [TODO]({{< relref "/posts/todo.md" >}})
1 Like
5

Have a look at this layout - especially line 15.

In your list.html inside the loop of the pages, you’ll can use {{ .RelPermalink }} or {{ .Permalink }} to link to the page (probably around line 13 of your layout).

1 Like
6

Thanks @funkydan2 and @peaceiris . I tried following the suggestions you gave, but still no luck. No changes happening in the post listing at all. Below is the content of <MySite>/layouts/_default/list.html.

  <div class="post-item post-summary markdown-body">
    {{ .Summary }}
    <a href="{{ .RelPermalink }}">{{ T "readMore" }}</a>
    {{ if .Truncated }}
      <a href="{{ .RelPermalink }}">{{ T "readMore" }}</a>
    {{ end }}
  </div>
</div>

I tried giving the ReadMore link inside if and outside as well - just to check whether any of them could bring a luck but unfortunately they did not. :frowning: Anything I am missing? I just understand the fact that contents inside the actual theme folder is a master copy and we shouldn’t directly modify them, instead we copy it locally inside the main site folder with relevant subdirectory like layout etc., and then modify it there so that it gets overridden with the default.

Cheers,
RM…

7

I think the problem is you don’t have a translation string called readMore (at least, that’s not provided by the theme).

For testing, try

{{ .Summary }}
<a href="{{ .RelPermalink }}">Read more ...</a>

and then read up on how to use internationalisation next.

1 Like
8

Brilliant. Thanks a lot @funkydan2 . It was my bad :frowning: should have noticed that reserved word ‘readMore’. It works like a charm now :slight_smile: Thank you.

I also see that the keyword <!--more--> plays a role to conditionally render the Read More in the summary in the list.html file.

image
image997×604 38.2 KB

Cheers,
RM…

2 Likes
9

And you also can use --i18n-warnings option for finding them (print missing translations)

1 Like
10

Thanks @divinerites . Where do you want me to use this? Inside the {{ .RelPermalink --i18n-warnings}} ?

Cheers,
RM…

11

Oh no.

If you (hint hint) search the documentation you will find that it is a hugo option.

$ hugo --i18n-warnings

3 Likes
12

@divinerites thanks for buying in ignorance on the basics as I am totally new to Hugo and also golang. Will supply this argument in the command line when starting the hugo server and see the difference if any that brings.

Thanks again for being very kind. :blush:
Cheers,
RM…

13

Hello @divinerites @peaceiris @funkydan2 can you please help me how can I achieve this - comma separated tags than the whitespace? I will also explore a bit on my own in the meta html, but that requires more of the golang syntax.

Cheers,
RM…

14

So, you’re looking in the right place with meta.html - this is the line, and you’re interested in the bit where it ranges through the tags.

I learn lots by reading other people’s code - so you may want to try something like this theme:

2 Likes
15

Hi @funkydan2 , you had been really very helpful :slight_smile: :cowboy_hat_face: :sunglasses:I really appreciate and sincerely thank you for your kindness!!

This suggestion worked and I tweaked a bit to make what I wanted for my posts :wink:

image
image1015×695 49.3 KB

Cheers,
RM…

1 Like
16

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.