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: http://127.0.0.1:8080
  6. Enjoy!

Add MathJax to website

Add below codes before </head> tag,

<script type="text/javascript">
  // SETTINGS
  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>

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG">
</script>

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

<script>
  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() {
    offsetAnchor();
    }, 0);
  });

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

[ref]Add these scripts in <head>,

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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>,

<script>
  $(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));
      }
    });
  });
</script>

Back to top button

Put below codes before </body> tag,

<!-- jquery 1.11.0 -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>

<!-- back-to-top script -->
<script type="text/javascript">
  jQuery(document).ready(function($){
    // 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
    $(window).scroll(function(){
      ( $(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){
      event.preventDefault();
      $('body,html').animate({
        scrollTop: 0 ,
        }, scroll_top_duration
      );
    });

  });
</script>

<!-- 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;
  }
  .cd-top.cd-is-visible, .cd-top.cd-fade-out, .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;
  }
  .cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
  }
  .cd-top.cd-fade-out {
    /* 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;
  }
</style>

<!-- 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="https://code.jquery.com/jquery-1.10.1.min.js" integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k=" crossorigin="anonymous"></script>

<!-- bootstrap scripts -->

<!-- enlargement script -->
<script type="text/javascript">
  jQuery(document).ready(function($){

    // 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

    $('[data-toggle="tooltip"]').tooltip();

    $('.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";

      $('.imagepreview').attr(
        'src', $(this).find('img').attr('src')
        );
      $('#imagemodal').modal('show');
    });
  });
</script>

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%;" >
      </div>
    </div>
  </div>
</div>