For me only

04-12-2020

This post is for me only. It contains shortcodes to create this website.

👉 11ty note.

Frontmatter #

layout: post # or `page` or `base`
title: "For me only"
descriptopm: description of the post
tags: [Others] # base: Project-based Learning, MOOC, Machine Learning,
# Data Science, Deep Learning, Time Series,
# NLP, MLOps, Python, R Lang, Linear Algebra,
# Prob & Stats, JavaScript, Web Dev, Algorithms
# Skills, Others
icon: "/img/header/customize.svg" # can be "customize.svg"
# if it's in /img/header/
keywords: "for me only customize edit this site box font blocks" # used for searching
toc: true # `false` to hide toc
notfull: true # if the post is not good enough
hide: true # if don't want to show it on index

Other components #

  • Mark: ==Text==.
  • Keyboard: [[Ctrl]].
  • Reference: {% ref "url" %} (mush have "").
  • Inline text color: {color:red}text{color} (without space)
  • {:.noindent} before a list, not indent a list.
  • {:.indent} before a list, indent a list.
  • {:target="_blank"} after an url.

Insert figures #

# NORMAL WITH CUSTOM CLASS
![description](/path/to/figure){:.img-full-100}
# There are class .img-full-{number}
# where, {number} are 30 to 100, step 5.
# WITH DESCRIPTION
![description](/path/){:.custom-class}
__Description texts__

Background white #

![Description](/path/to){:.bg-white}
# with other classes?
{:.bg-white .custom-class}

Default img path #

{% assign img-url = '/img/post/python' %}

Inser codes #

# Highlight line 2
``` js/2
// lines of codes
```
# Highlight line 2 to 4
``` js/2-4
// lines of codes
```
# Highlight line 2, 4
``` js/2,4
// lines of codes
```
# Delete line 2 (red highlight) and add line 4 (green highlight)
``` js/4/2
// lines of codes
```

Raw code #

~~~ js {% raw %}
# line of codes
{% endraw %}
~~~

Code inside a list #

For problems with tab/spaces in markdown rendering.

1. Item # below is a blank line

``` bash
# codes with 2 spaces (as tab indented)
`
``
2. Another item.

`
`` bash
# code
`
``

Columns #

Content - figure / table #

Using class columns-2,

<div class="columns-2" markdown="1">
<div>

Content containing markdown blocks
</div>

![Description](/path/to/figure){:.custom-class}
</div>

There are also others: .columns-2.size-2-1 (1-2, 3-2, 2-3, 1-1).

Two cols list #

<div class="col-2-list">

<!-- list (a line break above is required!) -->
</div>

Code & output #

  • Equal widths: ::: code-output-equal.
  • Flexible widths: ::: code-output-flex.

Two columns #

<!-- flexible width -->
::: col-2-flex
<!-- 2 equal colmuns -->
<div class="col-2-equal">

Content
</div>

<!-- or use (not recommended) -->
::: col-2-equal
Content
:::

Boxes #

Hide / Show box #

// The box must have a title
::: hsbox Title Name
Content
:::

Or using liquid tag,

{% hsbox "Long title" %}
# content
{% endhsbox %}

HSBox with indent #

{% hsbox %}
- Item 1
- Item 2

<div ><div class="hsbox">
<div class="hs__title">
More detail
</div>
<div class="hs__content">

//code
</div>
</div>

- Sub item.
- Item
{% endhsbox %}

Alert boxes #

// info
::: info
Content
:::
// warning
::: warning
Content
:::
// danger
::: danger
Content
:::
// success
::: success
Content
:::

Math #

If using with list and indent -> DON'T break line in math formulas,

# instead of
- Item

$$
\dfrac{1}{2}
$$
- Item
# use
- Item

$$\dfrac{1}{2}$$ # ALl in 1 line
- Item

Dev #

Locally developing mode #

We can use a different config file (instead of .eleventy.js).

npm run eleventy --config=.eleventy.dev.js

Other command lines can be found here or using npx @11ty/eleventy --help.

PurgeCSS #

Becare full on PurgeCSS,

/*! purgecss start ignore */
// css classes
/*! purgecss end ignore */

Custom tags / shortcodes #

The main guide is here.

// In .eleventy.js
module.exports = function(eleventyConfig) {
eleventyConfig.addShortcode("ref", function(url) {
return '<a href="' + url + '">[ref]</a';
});
}

Usage,

{% ref https://dinhanhthi.com %}

Custom classes #

Usage,

# paragraph
A pragraph {:.custom-class}

# image
![](){:.custom-class}

# table
{:.custom-class}
table

Multi-classes: {:.custom-1 .custom-2} (with spaces)!

We define CSS like that,

p.custom-class + table{}
// and
p.custom-class{display: none;}
// instead of
table.custom-class{}

.eleventy.dev.js vs .main.js #

The only difference is the line

// comment out in .dev.js
eleventyConfig.addPlugin(require("./_11ty/img-dim.js"));

If there is new post / keywords in some old posts -> remove line of pages/search-index.json.njk in .eleventyignore.

Using markdown inside njk #

Using {% markdown %}{% endmarkdown %} (no need spaces between content).

Other vars of page #

Besise page.url, there are others at here.

Errors? #

// Problem of "Content-Security-Policy" (CSP)
// _data/csp.js
const CSP = {
regular: serialize([
// Inline CSS is allowed.
["style-src", SELF, "https://fonts.googleapis.com/", quote("unsafe-inline")],
["font-src", SELF, "https://fonts.gstatic.com/"],
]),
};

// equivalent phrase (put in <head>)
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">
// quote() -> for '', e.g. 'self'
// "abc" -> doesn't mean 'abc' in <meta>