Adding the "About" to the blogroll

Hosting on Micro.blog
1

When adding the blogroll via short code, it’s pretty bare bones. I want to add the about section for each blog.

The documentation says (if I understand it correctly) that I should be able to do something like this:

{{ range .Site.Data.blogrolls.recommendations }}
   <p>{{ .name }}</p>
   <p>{{.about}}</p>
{{ end }}

But entering it as is to the page displays it literally; that is Hugo ignores this as code and shows it as part of the text.

Assuming I have the above right, how do I tell Hugo to actually go through the code and work it, not just display it as is? I tried to include it in brackets:

{{ <range .Site.Data.blogrolls.recommendations> }}
   <p>{{<.name> }}</p>
   <p>{{<.about>}}</p>
{{ <end> }}

But this does the same thing.

2

I see now there were errors in the logs:

Error: Error building site: "content/blogroll.md:7:1": failed to extract shortcode: template for shortcode "range" not found

Not sure what that means exactly.

3

You do not want to use < at all. For the first set of text, I’m not sure if it’s right, but did you put it in a template or did you try and put it in a post? Code like that will only work in a blog template.

4

Thanks @jsonbecker.

I put the code (with and without the angular brackets) in a dedicated page.

I have TinyTheme installed, and I tried to put the shortcode only it in layouts/partials/microhook-archive-lead.html before, which is a part of TinyTheme’s Microhooks. That failed, it was ignored. Putting the shortcode into a dedicated page worked, so I wanted to expand on top of that with the code above.

Here’s what happens when I try to paste the code in a post (this is on my test blog), previous attempt (with shortcode only) and what I tried just now:

Screenshot 2024-04-22 at 08.02.53
Screenshot 2024-04-22 at 08.02.53953×591 44.2 KB

5

No this is not accurate either anymore. The shortcode doesn’t work now; I don’t know why. It displays literally.

6

It will not work in a page or a post because it’s not a short code, it’s a layout element.

It should work in the microhook, but I am not an expert in that theme and what causes the microhook to be recognized.

7

I misread what you said above, thought it should work in a post.

OK, so with the shortcode working in its own page on my theme, how do I include the “about” part of the blogroll?

8

I want to be super clear.

A shortcode like {{< blogroll name="Favorite Authors" >}} works in pages and posts. It is not customizable. That is how you get the version of the design that Manton has made most easily available.

If you want your own design with different data, you can add it by editing a layout in your theme. You will not use the short code there. Instead, you can access the raw data. To do that, you can follow the example:

{{ range .Site.Data.blogrolls.recommendations }}
   <p>{{ .name }}</p>
{{ end }}

This works in a layout and adds the data:

  • name
  • url
  • feed_url (RSS)
  • about
  • created_at
  • updated_at

To access about with name, for example, you can do:

{{ range .Site.Data.blogrolls.recommendations }}
   <p>{{ .name }}: {{ .about }}</p>
{{ end }}

That’s for layouts only because you’re accessing a data file.

9

OK, this helps! Now I get it.

It seems to be working OK, I’m tweaking it a bit to be:

 {{ range .Site.Data.blogrolls.recommendations }}
   <p><a href="{{. url}}"{{ .name }}</a>: {{ .about }}</p>
{{ end }}

so the URL is included.

– edit: I forgot to close the anchor to the <a> tag. Here is how I have it now in list form. This is inside my layouts/partials/microhook-archive-lead.html, which is a micro hook, a component of TinyTheme. Should document this when I get the time:

{{ range .Site.Data.blogrolls.recommendations }}
<ul>   
<li><a href="{{.url}}">{{ .name }}</a>: {{ .about }}</li>
</ul>
{{ end }}

It’s on my Archive page, toward the middle. I might move it around.

Thank you Jason, for the patience and explaining this :smiley:

10

By the way, I’m going to add a couple more options to the shortcode, so it’s easier to customize. I think we need at least two options: whether to show the “about” description, and whether to include the domain name in the link.

1 Like
11

This would be good to have. I think that having the option to have an automatic page for this (like archive or about) might also work, since many of us use tiny theme or similar where there’s no room the “traditional” blogroll at the side bar. Maybe in a check box (“create a blogroll page?”)

12

also @jsonbecker -

A closing question as I’m writing this down: do we even need the blogroll plugin (available through Plug-ins the sidebar under Design) anymore? It is not mentioned in the documentation, and the fact that it’s under Design seems to indicate this is now a “built-in” function. If that’s the case, perhaps the plugin should be removed.

13

:wave:t2: hey I’m back.
So you helped me before with this, and now I have a question to build on top of that.

If I want to create a dedicated blogroll page using the code we wrote above, I need to add it to my theme. The problem here is that if I add it directly (say to single.html) it will show up in every page where I just want it in one particular page.

Speculating here that in this case you could put in some sort of an if statement (if page title = “blogroll” put in the code) but I wouldn’t know how to do that. Or perhaps with everything @manton has been working on, I’m missing something more recent?

The shortcode almost does what I want, but I do want to include the about section for each blog. Otherwise I’m good!

14

If you want it on a specific page, there’s a few options, but perhaps the easiest is turn the code you have into your own shortcode. It’s quite easy, it’s just a special kind of template.

Then you can use that shortcode on a page created in the Micro.blog way and replace it later if the native shortcode gets what you need.

15

well I’m up to trying this out. For starters, where do I create it? On MB we don’t have a shortcode folder, and as far as I know I can’t create one. Can I just create an extra html file in layouts and place my code there?

16

When creating a new file in your theme, you can just add the slashes as though it’s a path to that folder and it’ll make the folders when it makes the file.

17

lol one does not simply…

I created layouts/shortcodes/test1-shortcode-test.html:

{{ range .Site.Data.blogrolls.recommendations }}
<ul>   
<li><a href="{{.url}}">{{ .name }}</a>: {{ .about }}</li>
</ul>
{{ end }}

which is the exact code I currently have in layouts/partials/microhook-archive-lead.html. It works there.

Then I tried to make a post and use {{< test1-shortcode-test >}} as short code. Nothing shows.

I’m thinking maybe I should just create the f file inside layout/partials instead, will try this next.

edit:

OK, this seemed to have worked. I see the test shortcode list.
I don’t have descriptions (about field) on the test blog’s blogroll like I do on the main blog, so now. I’m going to replicate this process on my main blog… :crossed_fingers:t2:

Not working… :confused:

I get an error - Theme error: Error building site: “content/blogroll.md:9:1”: failed to extract shortcode: template for shortcode “jtr_blogroll” not found. ( I called it differently on my main blog). I do have it under layouts/partials/jtr_blogroll.html …any idea wahts’ going on?

…But it does… work? :expressionless:

After playing back and forth, recreating the page and trying another post, the error is gone and I can see my blogroll. What I think happens is that when I created the template, MB didn’t acdstually build it yet on the back end. After I deleted another post, the progress bar that shows you “now publishing changes to your blog” at the lower right went a bit slower, and what do you know, it’s there. So now MB actually created that template and it actually reads it.

Now sure why this happens - I could probably try to rebuild my site next time, but that seems a bit forced.

and now the site is broken :dizzy_face:

wanted to move the blogroll page out of the nav bar until I’m ready. Again, changes rolled way too fast, and no changes took place. So I decided to rebuild the site to force these changes…

…and got a “not found 404” for my main site, taonaw.com. Maybe this could have been a MB issue with pushing changes at the moment that I wasn’t aware of.

I gave up for now. I deleted the template I created and the blogroll page with the shortcode. Site is back up. Will wait for some feedback before I break more things.

18

Without getting into your exact site, I would start with Manton’s existing shortcode, erm, code, and modify how you’d like:

Note his code is quite straight forward and suggests your should work, and I strongly believe you’re trying to change too much too fast and not giving time for your site to rebuild one step at a time (Micro.blog will put you on a queue if you make a lot of fast changes).

I would declare an unordered list outside of the range, so you don’t make a series of one item lists. But otherwise, in layouts/shortcodes/jtrblogroll.html go ahead and do:

<ul>
{{ range .Site.Data.blogrolls.recommendations }}
      <li><a href="{{.url}}">{{ .name }}</a>: {{ .about }}</li>
{{ end }}
</ul>

And call your shortcode like this:

{{< jtrblogroll >}} on any page or post you want.

There are no other steps.

19

I see the logic in doing the list tangs outside like you say and I will try that. Other than that though, I think it’s all the same as what I did.

Makes sense that somewhere between experimenting both on my test blog and my regular blog, each one a couple of times, MB placed me on queue which is why I got that error message. So I will try it again and do it once and leave it alone for some time.

Manton’s code is a bit over my head. While I can see the general building blocks and I have a rough understand of what’s going on, I still don’t understand it, so I’m just taking the suggestion here (to build my own short code based on Manto’s plug in) and get it to work.

20

edit: this works now. So the issue was indeed updates on the queue.