Liquid Tutorial

Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on websites. Three main components:

Objects enclosed by double curly braces {{...}}; referring to predefined variables as contents on a page.

For example, {{page.title}} displays the page.title variable.
Tags define the logic and control flow for templates. Use a pair of curly braces {% … %} and percent signs for tags:

For example:
```
{% if page.show_sidebar %}

<div class="sidebar">
    sidebar content
</div>

{% endif %} 
```
This displays the sidebar if the value of the show_sidebar page variable is true.

Note that the tag {%...%} will be recognized as Liquid language. Must escape braces with \{ and percentages with \%!
- Cannot put braces in backticks either; otherwise, will result in Liquid syntax error. ❌
Filters takes in a Liquid object or variable, change its form and output. They are used within double curly braces {{ … }} and variable assignment are separated by a pipe character |.

For example:
```
{{ "hi" | capitalize }}
```
This displays Hi instead of hi.

{% raw %} temporarily disables tag processing to avoid syntax conflicts. This is useful for generating content (e.g., Mustache or Handlebars) which uses conflicting syntax.

To add syntax highlight and apply code monospaced font:

For block code, use 3 backticks followed by the programming language.
For inline code, use <code>.

For instance, write block code as follows (remove the backslash before % and {):

```r
\{\% raw \%\} # Good
max_by <- function(data, var, by) {
  data |>
    group_by({{␣by␣}}) |>
    summarise(maximum = max({{ var }}, na.rm = TRUE))
}
# Bad
max_by <- function(data, var, by) {
  data |>
    group_by({{by}}) |>
    summarise(maximum = max({{var}}, na.rm = TRUE))
}  \{\% endraw \%\}
```

Which will be rendered as (with syntax highlighing enabled by rouge):

# Good
max_by <- function(data, var, by) {
  data |>
    group_by({{␣by␣}}) |>
    summarise(maximum = max({{ var }}, na.rm = TRUE))
}
# Bad
max_by <- function(data, var, by) {
  data |>
    group_by({{by}}) |>
    summarise(maximum = max({{var}}, na.rm = TRUE))
} 

Enclose inline raw liquid tag with <code> will be rendered as {{...}}.

An output statement is a set of double curly braces {{…}} containing an expression; when the template is rendered, it gets replaced with the value of that expression.

Here is a simple example of output:

Hello {{name}}
Hello {{user.name}}
Hello {{ ‘tobi’ }}

Tag markup (which cannot resolve to text) is surrounded by a pair of single curly braces {…} .

Expressions are statements that have values. Liquid templates can use expressions in several places; most often in output statements, but also as arguments to some tags or filters.

Disqus

create a comment area on your Github Pages
Disqus allows for interaction btw viewers and owners.

https://cuda-chen.github.io/blogging/2020/03/28/add-Disqus-to-Jekyll-Minima-theme-simplified.html

Back-to-top float button

For this sticky back-to-top button tutorial, we’ll use three languages:

HTML for the markup to create the button
CSS to style the button and have it match your brand
JavaScript to make it “work” and define the behaviors of the button

https://github.com/FabrizioMusacchio/GitHub_Flavor_Markdown_CSS

https://wpengine.com/resources/sticky-back-to-top-button-tutorial/

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Using html, create a button that let users click to scroll to top of your webpage. You can use a button or font-awesome icons or style a div to make your scroll-to-top button.

For examples:

<!-- use word -->
<button id='scroll-to-top'>up</button>
<!-- use font-awesome icons -->
<h3><i class="icon-arrow-up"></i></h3>
<!-- use up arrow -->
<a class="top-link" href="#">	↑	</a>  

You can include this above html inside _includes/footer.html.

<!-- start custom footer snippets -->
<button id='scroll-to-top'>up</button>
<!-- end custom footer snippets -->

Add css style to /assets/css/style.scss to style up the botton, e.g, how much padding should be around it, the color.

Alternatively, could use other people’s well defined code. Maybe too elaborate, easiest to implement directly without any adjustment. Drawback is I don’t know how to customize it according to my own aesthetic taste. But it is a most straightforward solution for sure.

<script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>

TOC as a sidebar on gh-pages

https://dqdongg.com/blog/github/2018/12/29/Blog-Jekyll-toc-plugin.html

Sorting Order of Posts

Frontpage (index page) sorts by modified_date if a post has it, and otherwise it should sort by date.

Add a box around text

https://www.computerhope.com/issues/ch001392.htm

https://stackoverflow.com/questions/61945328/can-i-create-a-box-around-text-in-markdown-using-html

Nice website for learning Liquid