Tissevert/hablo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix broken Markdown link due to a ' ' in the URL

Tissevert 2020-10-28 10:55:30 +01:00
parent cd3b1f5bb3
commit 382f3ecc8a
1 changed files with 107 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

214
Customizing-your-blog.md

@ -1,107 +1,107 @@
# Customizing your blog # Customizing your blog
«Miss !» I hear you calling. «Miss, the blog we've generated… it's… it's pretty ugly actually ?!» «Miss !» I hear you calling. «Miss, the blog we've generated… it's… it's pretty ugly actually ?!»
No it's not. It's just pure HTML. Hablo isn't there to provide you with a full-fledged website, it's just the tool that writes the HTML files of your static blog and updates them so you only have to concentrate on what matters : the contents of your articles. No it's not. It's just pure HTML. Hablo isn't there to provide you with a full-fledged website, it's just the tool that writes the HTML files of your static blog and updates them so you only have to concentrate on what matters : the contents of your articles.
## How do I use a custom skin ? ## How do I use a custom skin ?
Hablo provides an option to embed arbitrary HTML in the `<head></head>` of the pages it generates. This is the perfect place to put a link to a CSS file you've written ! The idea behind hablo is to generate a part of your blog, the HTML files, but the rest of your blog's directory is all yours to put what you like in it. Hablo provides an option to embed arbitrary HTML in the `<head></head>` of the pages it generates. This is the perfect place to put a link to a CSS file you've written ! The idea behind hablo is to generate a part of your blog, the HTML files, but the rest of your blog's directory is all yours to put what you like in it.
Create a CSS file ! Create a CSS file !
```bash ```bash
echo > style.css <<EOF echo > style.css <<EOF
a { a {
color: #0cc; color: #0cc;
} }
EOF EOF
``` ```
Then write a HTML header line that includes it : Then write a HTML header line that includes it :
```bash ```bash
echo > head.html <<EOF echo > head.html <<EOF
<link rel="stylesheet" href="/style.css"/> <link rel="stylesheet" href="/style.css"/>
EOF EOF
``` ```
And tell hablo to use this file when generating the blog: And tell hablo to use this file when generating the blog:
```bash ```bash
hablo --head head.html hablo --head head.html
``` ```
«Ok, now the skin is a bit better, but I don't like the default texts, and I can't fix that with CSS !» «Ok, now the skin is a bit better, but I don't like the default texts, and I can't fix that with CSS !»
## How do I customize the templates ? ## How do I customize the templates ?
Hablo doesn't allow you to change the [structure of the pages](https://git.marvid.fr/Tissevert/hablo/wiki/Architectural%20choices#customization) but what you can do is change the texts used by default. They are contained in the file `share/defaultWording.conf` and you can copy this file to your blog's directory and override its entries (you don't have to keep the ones you don't change). For example, let's do this: Hablo doesn't allow you to change the [structure of the pages](https://git.marvid.fr/Tissevert/hablo/wiki/Architectural%20choices#customization) but what you can do is change the texts used by default. They are contained in the file `share/defaultWording.conf` and you can copy this file to your blog's directory and override its entries (you don't have to keep the ones you don't change). For example, let's do this:
```bash ```bash
echo "latestPage = Recently on Turtles/paradize" > wording.conf echo "latestPage = Recently on Turtles/paradize" > wording.conf
``` ```
Then generate your blog telling hablo to use this wording Then generate your blog telling hablo to use this wording
```bash ```bash
hablo -w wording.conf hablo -w wording.conf
``` ```
The complete list of the available template variables can be found in the [reference](https://git.marvid.fr/Tissevert/hablo/wiki/Template%20variables). The complete list of the available template variables can be found in the [reference](https://git.marvid.fr/Tissevert/hablo/wiki/Template%20variables).
Another possible customization that would be done by means of template files in other blog generators is the header of your blog. Just like for the CSS header, write a custom file with your HTML and tell hablo about it, this time the option is called `banner`: Another possible customization that would be done by means of template files in other blog generators is the header of your blog. Just like for the CSS header, write a custom file with your HTML and tell hablo about it, this time the option is called `banner`:
```bash ```bash
echo > banner.html <<EOF echo > banner.html <<EOF
<h1>## T·U·R·T·L·E·S / paradize##</h1> <h1>## T·U·R·T·L·E·S / paradize##</h1>
<div> <div>
<p>The amazing world of fashionable young turtles.</p> <p>The amazing world of fashionable young turtles.</p>
</div> </div>
EOF EOF
``` ```
Then run hablo and pass it the path to your file with the `--banner` option. Then run hablo and pass it the path to your file with the `--banner` option.
```bash ```bash
hablo --banner banner.html hablo --banner banner.html
``` ```
If you'd like to read more details about all the available customization, you should read about hablo's [command-line arguments](https://git.marvid.fr/Tissevert/hablo/wiki/Command-line). If you'd like to read more details about all the available customization, you should read about hablo's [command-line arguments](https://git.marvid.fr/Tissevert/hablo/wiki/Command-line).
## How do I activate comments on my blog ? ## How do I activate comments on my blog ?
Since hablo is [static](https://git.marvid.fr/Tissevert/hablo/wiki/Architectural choices#static-and-lazy) there's no way to directly include the comments in the pages. On a blog generated with hablo comments are fetched with JS and dynamically added to the page when it gets rendered in the client. Since hablo is [static](https://git.marvid.fr/Tissevert/hablo/wiki/Architectural%20choices#static-and-lazy) there's no way to directly include the comments in the pages. On a blog generated with hablo comments are fetched with JS and dynamically added to the page when it gets rendered in the client.
Let's say you published an article, tell people about it from your fediverse instance by posting a link to that article. First, we need to find the status [`id`](https://docs.joinmastodon.org/api/entities#status) of your post. Let's say you published an article, tell people about it from your fediverse instance by posting a link to that article. First, we need to find the status [`id`](https://docs.joinmastodon.org/api/entities#status) of your post.
Point your web browser to the page that focuses on it and shows the thread of its answers (possibly none yet if you've just posted it) and take the «code» component of the URL (a series of apparently meaningless digits or letters). Point your web browser to the page that focuses on it and shows the thread of its answers (possibly none yet if you've just posted it) and take the «code» component of the URL (a series of apparently meaningless digits or letters).
On a Mastodon instance the URL should look like On a Mastodon instance the URL should look like
``` ```
https://turtles.social/users/fondofshells/statuses/101841418824885713 https://turtles.social/users/fondofshells/statuses/101841418824885713
``` ```
The part that interests you is the end of the URL after `statuses/` (here, `101841418824885713`). The part that interests you is the end of the URL after `statuses/` (here, `101841418824885713`).
On a Pleroma instance URLs look like On a Pleroma instance URLs look like
``` ```
https://turtles.social/notice/9hK9GL3GcRbMw0CV0a https://turtles.social/notice/9hK9GL3GcRbMw0CV0a
``` ```
And you still want the end, in this case after `notice/` (here, `9hK9GL3GcRbMw0CV0a`). And you still want the end, in this case after `notice/` (here, `9hK9GL3GcRbMw0CV0a`).
Now that you've found your post's `id`, let's add a `comments` [metadata](https://git.marvid.fr/Tissevert/hablo/wiki/Metadata#comments) to your article with this `id` as value in its metadata header : Now that you've found your post's `id`, let's add a `comments` [metadata](https://git.marvid.fr/Tissevert/hablo/wiki/Metadata#comments) to your article with this `id` as value in its metadata header :
```YAML ```YAML
comments: 101841418824885713 comments: 101841418824885713
``` ```
Now, when you generate your blog, tell hablo to look for comments on the instance where you posted : Now, when you generate your blog, tell hablo to look for comments on the instance where you posted :
```bash ```bash
hablo --comments-at https://turtles.social hablo --comments-at https://turtles.social
``` ```
Be sure to clear the cache of your web browser before visiting your article again. A «comments» section now shows after your article, with possibly some comments if someone has already answered your post on the fediverse. Also, please note that, as comments are purely handled by the fediverse so is the moderation : you should preferably use this feature on an instance where you have moderation rights and will be able to delete hateful comments or where you know the moderation team will be able to react appropriately. Be sure to clear the cache of your web browser before visiting your article again. A «comments» section now shows after your article, with possibly some comments if someone has already answered your post on the fediverse. Also, please note that, as comments are purely handled by the fediverse so is the moderation : you should preferably use this feature on an instance where you have moderation rights and will be able to delete hateful comments or where you know the moderation team will be able to react appropriately.