I would like to have a couple of social network icons showing to the right of my sections on my blog (jtr.mico.blog). For starters, these would be RSS feed icon and Mastodon, which will lead to the RSS feed and my mastodon account.
It seems my theme (paper) has some of these icons built in, and some aspects of adding social networks, since I see this in my baseof.html:
There are a few svg files of social networks included with the theme.
I also installed the font awesome plug in, but it doesn’t seem to work right. The icons show a broken ASCII icon instead of the right icon when I paste the code for it.
Ideally, I’d like to use the built-in option for social network, but I have no idea how to get it working. Or, if I figure out what’s going on with fontawesome, I could just create links the ugly, old-fashion way, user HTML.
Implementation would be theme specific. I’d look at the theme on github and possibly review the upstream version to find documentation.
I looked upstream and found that references to social links appear to be in the Home-Info mode version of this very complex theme. There it shows how it uses the site parameters to determine what social icons to show and the links
So it seems to me like you need to edit your config.json (note the below is yaml because that’s what’s on the documentation but you can make it JSON)
To add more platforms, you just have to add the icon to the svg.html partial.
Because the social icons themselves are a range over your params for the social network platform name and the link you’re providing, rendering the SVG icon from svg.html
This is a very complex theme to modify if you’re not familiar with Hugo.
Before I try to go through all of that (thanks for looking, I already got lost),
Can’t I just use font awesome somehow with the pages in micro.blog? Right now I just have a page “mastodon” that links there. I juuuust wanna change it to the mastodon Icon, since I have the plug-in installed.
The short answer is “of course!” The long answer is Paper is a complex theme I don’t use and I’m not sure where you’ve already put the link in your code so I don’t have any idea how to modify it to place things where you want. If you want to use the social icons from the theme and how the theme supports it, what I described is using the same machinery.
But it’s all just HTML you paste where you need it.
Ok so let me ask you this, even though it’s getting a bit off-topic: are there simpler themes you’d recommend that work better this way?
I went for paper because I liked how it looks, the pages up top, the posts in the center, simple. Didn’t imagine it’s this complex. Something similar but simpler that works well with micro.blog might be a good answer too. I’m not married to this theme yet.
Since this is Amit’s Paper theme, you can also get help directly with him on GitHub where he has been quite responsive to this exact issue amongst other things.
Basing any edits on Aditya Telange’s repo might not work so well, since Amit has probably already made changes to get the theme to work on Micro.blog. I would consider his fork — which didn’t come from Aditya’s repo — to be the best source from which to work.
Thanks, I might go that way.
In a nutshell, I had my own Hugo blog before I switched over to micro.blog, because I sank a lot of time into Hugo. Theming was a part of it. It’s not that is bad, and learning is a good thing for sure. I just don’t want to end up doing something similar to what I did on my own blog
For now, I can get by. I might change to a simpler theme here that is slightly less complex.
FWIW I just looked at font awesome, which I haven’t in years. I would just sign up on their webpage, make a “kit”, get their embed code to toss in your head.html template, and then use
<i class="fa-brands fa-mastodon"></i>
where you want it. I have no idea how the FontAwesome plug in works off hand, but getting a free CDN address to hit is easy (though does require signup) and then you have no dependency.
As for where to put it— you’re still shit out of luck without a lot of modification because the whole point of the social icons element of this theme is that it just iterates over the svg.html file for any social sites you give it. So I truly think the easiest thing is a very simple modification to add the Mastodon icon to the svg.html file. That’s how social icons work in this theme, not FontAwesome. The alternative would be to not use the social icons features of this theme and build that component yourself using Font Awesome.
