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 {{ and }}; 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 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 it. Otherwise will have errors.

  • Cannot put in backticks either. ❌

  • 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.

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

image-20230803084657700

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

  1. 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 -->

  2. 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>

CSS

Comments are surrounded by /* ... */.

/* This is a single-line comment */
p {
  color: red;
}
p {
  color: red;  /* Set text color to red */
}
/* This is
a multi-line
comment */

p {
  color: red;
}

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

References

  1. Nice website for learning Liquid https://shopify.dev/docs/api/liquid/filters/sort