This article records Personal Blog websites Small blog The Next topic optimization process of is updated from time to time.

1. Add statistics function

Turn on busuanzi statistics function in themes/next/_config.yml

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

If you want to modify the default display text content of statistics, you can modify the corresponding parts of the following two file pairs.

• Themes / next / layout /. Macro / post.swig (article Statistics)
• Themes / next / layout / "third party / analytics / Busuanzi counter.swig (website statistics)

2. Change color

Related documents:

• themes/next/source/css/_common/components/post/post-title.styl
• themes/next/source/css/_schemes/Pisces/_brand.styl
• themes/next/source/css/_variables/base.styl
• themes/next/source/css/_variables/Pisces.styl

This is more complex, you need to modify and debug the configuration of the color.

3. Adding Copyright Information

Add the my-copyright.swig file to the themes / next / layout /? Macro / directory.

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS library sweetalert Modifiable path -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>Title of this article:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>Article author:</span><a href="/" title="Visit {{ theme.author }} Personal blog of">{{ theme.author }}</a></p>
  <p><span>Release time:</span>{{ page.date.format("YYYY year MM month DD day - HH:mm") }}</p>
  <p><span>Last update:</span>{{ page.updated.format("YYYY year MM month DD day - HH:mm") }}</p>
  <p><span>Original link:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="Click Copy article link"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="Copy succeeded!"></i></span>
  </p>
  <p><span>license agreement:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">{{ theme.author }}-Non commercial use-No deduction 4.0 international</a> Please keep the original link and author for reprint.</p>
</div>
<script>
    var clipboard = new Clipboard('.fa-clipboard');

</script>
{% endif %}

Add the following div to themes / next / layout /. Macro / post.swig

    {### END POST BODY ###}
    {#####################}

    <div>
          {% if not is_index %}
            {% include 'my-copyright.swig' %}
          {% endif %}
    </div>

Add my-post-copyright.styl file in themes / next / source / CSS / ﹣ common / components / post /

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

Introduce modules in themes/next/source/css/_common/components/post/post.styl

@import "my-post-copyright"

4. Delayed image loading

Installing hexo lazload image

npm install hexo-lazyload-image

Add in / / config.yml

# Lazyload
## Depends on hexo-lazyload-image
lazyload:
  enable: true
  #onlypost: false
  loadingImg: /uploads/loading.gif