My blog is now back online, with brand new render engine Hugo. The URLs are totally different though. Not sure how web crawlers handling it right now.
After the migration, I did a few extra work for patching the hiccups. Fix the build warnings and adding new features.
The about page
In every blog you always have some pages that you do not want it be inside the
blog list. By default Hugo will simply place everything on the “navigation
list”. Even if I place it outside the blog folder. This is the list your
template is calling .NextPage and .PrevPage. So initially I just give it a
very old date, or simply removed the date, so it will appear as the last on the
list. Obviously I will have to fix that.
The solution is fairly simple as well, a single change in the font
matter. Where you need to
add _build: list:never inside. It sounds simple but somehow you can’t find it
on stack-overflow. Plenty people are asking the questions but I guess people do
not like to read the documents just like me.
Fight with fonts
My Attila theme ships with some icon fonts. Initially I thought it was like font-awesome, but no, it is got only 11 icons in it. So when I want to remove the google plus sharing button and replace it with Reddit. It didn’t work 🤦. So later I tried to simply replace the icons with font-awesome but the CSS style is not happy, with my CSS skills, that is a no-no.
Then came my dumbest idea, editing fonts with Font-Forge manually, that was
such a hustle especially you have to maintain multiple font formats for
web-page. And again my CSS is not happy. @font-face is just not going to load
my fonts, why though.
It is 2021, evidently there should be some tools out there for this. Here comes the Fontello, the web tool for generating icon fonts, used by Original Attila theme. This tool would give you all the fonts for your website plus the CSS configuration you need. Just place it under assets. The whole process took 10 minutes, but the time wasted on manually editing fonts took me 4 hours, they are not coming back.
Adding a WeChat sharing button.
This is why I hate monopoly technologies. Sharing button for WeChat is a typical example. Everything else takes simply one link redirection. Not going to work for WeChat, there is no way you can create a link to direct to your WeChat app. So what people do is using QR-Code. The guy who wrote the qrcode.js did it 9 years ago. No changes ever since and it still works today. Usually you would think software codes need to be updated frequently. But hey, looks like software can also be like math formula or music sheet, live for real long. Now I can simply lay back and sipping Piña Colada and keep use it.
With the Qt-Code, How am I gonna add a WeChat sharing button though? Turned out
you need to implement something called
Modal. It is basically
a piece of hidden code which initially set to display: hidden. Then you have
a JavaScript event listener which changes its display property once you clicked
on it.
<a class="wechat" id="wechat-share-btn">
<i class="icon-wechat" id="wechat-share-icon"></i>
<div id="wechat-share-modal" class="modal">
<div class="modal-content">
<div id="wechat-share"></div>
</div>
</div>
</a>
<script type="text/javascript">
var modal = document.getElementById("wechat-share-modal");
var btn = document.getElementById("wechat-share-btn");
var icon = document.getElementById("wechat-share-icon");
var span = document.getElementById("wechat-share-close");
//open it if we click on btn or icon, close it on second click
window.onclick = function(event) {
if (event.target == icon || event.target == btn)
modal.style.display = "block";
else if (modal.style.display == "block") {
modal.style.display = "none";
}
};
{{ $url := printf "%s" .RelPermalink | absLangURL }}
new QRCode(document.getElementById("wechat-share"), {{ $url }});
</script>
Now I see it the web is pretty much like good old desktop software, you can’t really break someone’s 19 years old web-page on Internet with a standard update. It may look ugly, but it still works. Let’s hope this sharing button works forever 😆.