blank

a post with custom blockquotes

2023-05-12T19:53:00+00:00

This post shows how to add custom styles for blockquotes. Based on jekyll-gitbook implementation.

We decided to support the same custom blockquotes as in jekyll-gitbook, which are also found in a lot of other sites’ styles. The styles definitions can be found on the _base.scss file, more specifically:

/* Tips, warnings, and dangers */
.post .post-content blockquote {
    &.block-tip {
    border-color: var(--global-tip-block);
    background-color: var(--global-tip-block-bg);

    p {
      color: var(--global-tip-block-text);
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--global-tip-block-title);
    }
  }

  &.block-warning {
    border-color: var(--global-warning-block);
    background-color: var(--global-warning-block-bg);

    p {
      color: var(--global-warning-block-text);
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--global-warning-block-title);
    }
  }

  &.block-danger {
    border-color: var(--global-danger-block);
    background-color: var(--global-danger-block-bg);

    p {
      color: var(--global-danger-block-text);
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--global-danger-block-title);
    }
  }
}

A regular blockquote can be used as following:

> This is a regular blockquote
> and it can be used as usual

This is a regular blockquote and it can be used as usual

These custom styles can be used by adding the specific class to the blockquote, as follows:

> ##### TIP
>
> A tip can be used when you want to give advice
> related to a certain content.
{: .block-tip }

TIP

A tip can be used when you want to give advice related to a certain content.

> ##### WARNING
>
> This is a warning, and thus should
> be used when you want to warn the user
{: .block-warning }

WARNING

This is a warning, and thus should be used when you want to warn the user

> ##### DANGER
>
> This is a danger zone, and thus should
> be used carefully
{: .block-danger }

DANGER

This is a danger zone, and thus should be used carefully

a post with table of contents on a sidebar

2023-04-25T14:14:00+00:00

This post shows how to add a table of contents as a sidebar.

Adding a Table of Contents

To add a table of contents to a post as a sidebar, simply add

toc:
  sidebar: left

to the front matter of the post. The table of contents will be automatically generated from the headings in the post. If you wish to display the sidebar to the right, simply change left to right.

Example of Sub-Heading 1

Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.

Example of another Sub-Heading 1

Customizing Your Table of Contents

If you want to learn more about how to customize the table of contents of your sidebar, you can check the bootstrap-toc documentation. Notice that you can even customize the text of the heading that will be displayed on the sidebar.

Example of Sub-Heading 2

Example of another Sub-Heading 2

a post with audios

2023-04-25T10:25:00+00:00

This is an example post with audios. It supports local audio files.

A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.

a post with videos

2023-04-24T21:01:00+00:00

This is an example post with videos. It supports local video files.

A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.

It does also support embedding videos from different sources. Here are some examples:

displaying beautiful tables with Bootstrap Tables

2023-03-20T18:37:00+00:00

Using markdown to display tables is easy. Just use the following syntax:

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1       | center 1       | right 1       |
| Left 2       | center 2       | right 2       |
| Left 3       | center 3       | right 3       |

That will generate:

Left aligned	Center aligned	Right aligned
Left 1	center 1	right 1
Left 2	center 2	right 2
Left 3	center 3	right 3

It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:

  id="table"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
  
    
       data-field="id">ID
       data-field="name">Item Name
       data-field="price">Item Price
    
  

ID	Item Name	Item Price

By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.

  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}">
  
    
       data-checkbox="true">
       data-field="id" data-halign="left" data-align="center" data-sortable="true">ID
       data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name
       data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price
    
  

	ID	Item Name	Item Price

a post with table of contents

2023-03-20T15:59:00+00:00

This post shows how to add a table of contents in the beginning of the post.

Adding a Table of Contents

To add a table of contents to a post, simply add

toc:
  beginning: true

to the front matter of the post. The table of contents will be automatically generated from the headings in the post.

Example of Sub-Heading 1

Example of another Sub-Heading 1

Table of Contents Options

If you want to learn more about how to customize the table of contents, you can check the jekyll-toc repository.

Example of Sub-Heading 2

Example of another Sub-Heading 2

a post with giscus comments

2022-12-10T15:59:00+00:00

This post shows how to add GISCUS comments.

Displaying External Posts on Your al-folio Blog

2022-04-23T23:20:09+00:00

a post with redirect

2022-02-01T17:39:00+00:00

you can also redirect to assets like pdf

a post with diagrams

2021-07-04T17:39:00+00:00

This theme supports generating various diagrams from a text description using jekyll-diagrams plugin. Below, we generate a few examples of such diagrams using languages such as mermaid, plantuml, vega-lite, etc.

Note: different diagram-generation packages require external dependencies to be installed on your machine. Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW. For any other details, please refer to jekyll-diagrams README.

Mermaid

Install mermaid using node.js package manager npm by running the following command:

npm install -g mermaid.cli

The diagram below was generated by the following code:

{% mermaid %}
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
{% endmermaid %}