Last modified on 16 Aug 2020.

Automatically reload page if js file changes

  1. Install nodejs.
  2. Install live-server using nodejs: npm install -g live-server.
  3. cd to the project folder.
  4. run live-server (accept all networks notification)
  5. Browse:
  6. Enjoy!

Add MathJax to website

Add below codes before </head> tag,

<script type="text/javascript">
  window.MathJax = {
    jax: ["input/TeX", "output/SVG"],
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
    SVG: {
      linebreaks: { automatic: true },
      styles: {".MathJax_SVG_Display": {margin: "0.5rem 0", overflow: "auto"}},
      scale: 90

<script type="text/javascript" async

If you use table of content for posts in which links starting with # link to headings. After jumping, headings are usually hidden by the fixed navigation. Adding below script before </body> tag can solve the problem (change value 100 to change where the page jump)[ref].

  function offsetAnchor() {
    if (location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY - 60);

  // Captures click events of all <a> elements with href starting with #
  window.addEventListener('click', 'a[href^="#"]', function(event) {
    // Click events are captured before hashchanges. Timeout
    // causes offsetAnchor to be called after the page jump.
    window.setTimeout(function() {
    }, 0);

  // Set the offset when entering page with hash present in the url
  window.setTimeout(offsetAnchor, 0);

[ref]Add these scripts in <head>,

<link rel="stylesheet" href="" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="//"></script>

Add CSS,

.header-link {
  position: inherit;
  margin-left: 0.4rem;
  opacity: 0;
  color: #999;
  font-size: 1rem;
  font-weight: normal;
  -webkit-transition: opacity 0.1s ease-in-out 0.1s;
  -moz-transition: opacity 0.1s ease-in-out 0.1s;
  -ms-transition: opacity 0.1s ease-in-out 0.1s;

h2:hover .header-link,
h3:hover .header-link,
h4:hover .header-link,
h5:hover .header-link,
h6:hover .header-link {
  opacity: 1;

Add the following in any place before </body>,

  $(function() {
    return $("h2, h3, h4").each(function(i, el) {
      var $el, icon, id;
      $el = $(el);
      id = $el.attr('id');
      icon = '<i class="fa fa-link"></i>';
      if (id) {
        return $el.append($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));

Back to top button

Put below codes before </body> tag,

<!-- jquery 1.11.0 -->
<script src="" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>

<!-- back-to-top script -->
<script type="text/javascript">
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
      //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
      offset_opacity = 1200,
      //duration of the top scrolling animation (in ms)
      scroll_top_duration = 700,
      //grab the "back to top" link
      $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
      ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        scrollTop: 0 ,
        }, scroll_top_duration


<!-- css -->
<style type="text/css">
  .cd-top {
    display: inline-block;
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 2%;
    right: 2%;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: #bbb url(/images/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
  },, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
  } {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
  } {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
  .no-touch .cd-top:hover {
    background-color: #e86256;
    opacity: 1;

<!-- where back-to-top button locates -->
<a href="#0" class="cd-top">Top</a>

Click to enlarge photo

If some photos on your page are too small and you wanna add a function in that users can click on the photo to enlarge it. This technique requires Bootstrap 4.

Put below scripts in that order before </body> tag.

<!-- jquery 1.10.1 -->
<script src="" integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k=" crossorigin="anonymous"></script>

<!-- bootstrap scripts -->

<!-- enlargement script -->
<script type="text/javascript">

    // add more attributes to the img.pop
    $('.pop').attr("data-toggle", "tooltip");
    $('.pop').attr("data-placement", "top");
    $('.pop').attr("title", "Click to see a bigger photo.");

    // current view port size
    var wW = $(window).width()*0.9;
    var wH = $(window).height()*0.9; // max display


    $('.pop').on('click', function() {

      // real size of the photo
      var rW = $(this).find('img')[0].naturalWidth;
      var rH = $(this).find('img')[0].naturalHeight;

      var cW, cH; // photo's will be set to this size!
      cW = rW; cH = rH; // initial setting

      if (rH < wH){
        if (rW > wW){
          cW = wW; cH = wW*rH/rW;
      } else{
        if (rW < wW){
          cH = wH; cW = wH*rW/rH;
        } else if(wW*rH/rW < wH){
          cW = wW; cH = wW*rH/rW;
        } else{
          cH = wH; cW = wH*rW/rH;

      // Show max photo's size if it's smaller than the current view port. Otherwise, it scale photo to the size of view port.
      $('.modal-dialog')[0].style.width = cW + "px";
      $('.modal-dialog')[0].style.height = cH + "px";

        'src', $(this).find('img').attr('src')

Add below codes at the end of the post content,

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >