HUGO

MediaWiki Template

As promised, I finished my MediaWiki template.

And the darkmode

And with the fastSearch function:

It has a homepage where I display everything of note, it has a few other surprises as well:

  • Clean Inner links, pretty much like MediaWiki (thanks to @bep and his awesome solution [about](/about))
  • FastSearch (through content AND tags)
  • Infoboxes templates for (in my particular case), locations, characters, secondary characters. But they are configurable as well.
  • Dark Mode, for your tired eyes.
  • Minimal Front matter configuration. Simply add the bare bones and start writing.
  • Broken Links: like MediaWiki, if you linked an inner page but neglected to create it, the template will show you the link in red (until you create the page, that is).
7 Likes

That looks great … So, for the links, I assume you mark them as red if GetPage cannot find it?

Actually, I’m using a little vanilla Javascript. I tried GetPage, but couldn’t make it work so I gave up.

var anchors_doc = document.getElementById("main-content")
var anchors = anchors_doc.getElementsByTagName("a");
var x = 0;
for (var i=0; i<anchors.length; i++) {
    var href = anchors[i].getAttribute('href');
    doCheck(i,href,anchors[i]);
}

function doCheck(i,href, current_el) {
var request = new XMLHttpRequest();
request.open('HEAD', href, true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var resp = this.response;
  } else {
      x++
      current_el.classList.add("broken");
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();
}

I went vanilla instead of jQuery, because even though I am using Bootstrap for the Theme, I don’t like to go overhead with it.

1 Like

I don’t see how it should not work.

Well, I tried to use {{ findRE "<a.*?>(.|\n)*?</a>" .Content }} but I got stuck after getting the result.

{{ with .Site.GetPage .Section }}

        

    {{ range .Pages }}

        {{ $a:= findRE "<a.*?>(.|\n)*?</a>" .Content }}

        {{ if .Site.GetPage $a }}

        

        {{ end }}

    {{ end }}

    {{ end }}

Again, I’m a poor coder.

Just added a print css that looks exactly like Wikipedia’s site. I have no use for image galleries in my projects, but it can be easily added as well.

I began moving my MediaWiki files to Hugo by hand, even though there is a Python script for that, I find it easy since this project is rather small.

In the past, I talked about using Hugo for documentation. Now there are a bunch of themes and skins that really pushed me into creating my own MediaWiki template. Thanks to Bootstrap, works perfect on Mobile. The best feeling is when you can access your own docs anywhere, even on the go.

You know about render hooks, right?

I managed to add header links with render hooks, but I couldn’t get them to “test” if the URL exists or not. It just creates the link.

I just found out I can use definition lists by the way. Nice addition. This thing is exactly like wikipedia now.

this is a list
: a defined list!

Oh my God, I can even have aliases!

aliases:
   - /posts/my-original-url/
   - /2010/01/01/even-earlier-url.html

So my pages now work with shorthands!

Writers/Robert-E-Howard/index.md

aliases:
    - /writers/robert

So if I’m writing a wiki entry on Robert E. Howard and I make a link to his page, I can now do it without having to write the exact same page I’ve created. I might write [Robert E. Howard](/writers/robert) and it will redirect to Robert-E-Howard/index.md

This is the BEST alternative to a personal wiki! Goodbye MediaWiki, so long WikiPad!

1 Like

A related tip: If you make them relative to the page, they will be easier to maintain:

- my-original-url/
- /2010/01/01/even-earlier-url.html
1 Like

Good one, but I also have another tip.

I can now fire my “hugo wiki” from the taskbar thanks to a nifty batch file.

@echo off
cd "C:\Users\Desktop\Cabrera_Brothers_Archives\"
start "Cabrera Brothers Wiki" "http://localhost:2020"
hugo server -p 2020

The 2020 is the number of the plague. Jokes aside, I simply create a launch.bat shortcut in the same place I have my launch.bat, then I right click the shortcut and voila, the option “Pin to Taskbar” becomes available.

My wiki can now be called from the taskbar.

image

The white folder is my wiki, the command prompt shows my wiki running.

By clickinc the white folder my wiki gets opened in a new browser tab. I make it run on a different port than the Hugo’s default 1313 in case I’m working on something else at the moment.

Voila, instant “MediaWiki” installation.

I was thinking on the “Edit” mediawiki button.

Someone solved this, which could be potentially applied to any Hugo theme.

(Sorry for the Elon Musk avatar, no idea why that shows in the link there)

As stated in that post, the problem could be potentially solved with the use of LocalStorage.

The way of doing this would be to edit the a particular div in the current page content, then save that into the right .md file by writing the file directly instead of storing the data in the browser.

The only issue I have, which I believe I won’t be able to go by-pass, is that browsers now go against writing files locally because of security.

It would be possible to create a blob using the same data and saving it locally, but it would become cumbersome pretty fast (even though I can already see ways of doing it happen, like having a shortcode to read a file called “name-data.txt” for the content with javascript and then saving that file with the browser)

Anyway, just thinking out loud.

I guess I could use an ajax call instead and save the data on a webserver’s database, but that would kill the main purpose of Hugo.

how did you get the infoboxes to work? I’d love to add something like that to my website for some worldbuilding projects

1 Like

Hi WaitingCynicism, welcome to the community!

I simply used shortcodes (https://gohugo.io/content-management/shortcodes/), what you were having problems with exactly? I’m not a coder, but I might be able to help you.

I was mostly curious what sort of shortcode you were using is all.

Oh, that. I did something like this:

{{< infobox/character
     Image=""
     ImageCaption=""
     Publisher="Cabrera Brothers"
     Appareance="Radio Drama #1"
     Voiced="Ryan Lawhon"
....etc
 >}}

Then, the shortcode is a regular one, with things like {{.Get "Voiced"}} in the table, so it shows the text there. It is really basic, to be honest. I mostly used scss and html :wink:

I have several boxes going on, so I saved each shortcode inside a infobox folder (character.html, dialogues.html, etc) then I simply call them with infobox/character infobox/dialogues

1 Like

Sorry for the late reply. Thank you so much!

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