This note is updated frequently without notice!

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>
  // The function actually applying the offset
  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 #
  $(document).on('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>

Notice an error?

Everything on this site is published on Github. Just summit a suggested change or email me directly (don't forget to include the URL containing the bug), I will fix it.