Hexo's beautification, optimization and Lighthouse's ultimate tracking

Note

This article was automatically translated using Google

I wrote an article before Using Hexo, GitHub Page, Typora to write articles and shared the process of installing Hexo in detail. Today, let’s talk about how I did article migration in the past few days, choose Hexo theme, and the process of theme modification and Hexo pagination modification. Finally, I will briefly talk about how to achieve 100 points in Lighthouse.

Hexo Beautify

First of all, after Hexo is installed, the default theme is landscape, which is also very concise. It is completely fine for those who focus on writing articles. However, when I used Halo before, I used Next theme, so the first idea of ​​this migration is to still use next

Theme installation

What’s interesting is that I didn’t search for next directly, but wanted to find next in Hexo’s official theme library. I think this is a kind of fate, let I found the theme of Oranges, you can take a look at Demo, this theme is more concise than next

All the variable buttons and columns have been removed, which brings a benefit. When selecting other tab buttons on the mobile terminal, there is no need to click a drop-down menu. Just a little bit of simplification made me choose [this theme](https: //github.com/zchengsite/hexo-theme-oranges)

The installation process is very simple, there are only two steps:

1. $ git clone https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges

2. Modify the _config.yml file in the hexo root directory and change theme to oranges

Theme configuration

Before officially using the theme, you can also make some personalized configuration based on the theme. It can be seen that the author has very strict standards for the opening of some functions. Basically, the functions listed in the Readme file are basically required, which can be found in here View, because the author’s document is very detailed , I won’t list it separately, I will just briefly talk about the functions I have enabled:

Categories, tags, article directories, RSS, comments, Google Analytics, top and bottom pages, full text search

The image lazy loading is not turned on, mainly because I feel that the original image has already used the image bed + CDN, and one more lazy loading is unnecessary, and the look and feel is not good, you must first look at an unloaded image

Theme modification

Let’s talk about what I’ve changed. It’s broken, let’s talk about it bit by bit.

Add email recognition to footer

All the icons here correspond to a URL, so the author directly writes the address of the configuration file into the href of the <a> tag when processing, but as a mailbox, it needs to be added to the href The previous mailto:, but because there is a : in it, writing directly in the configuration file will report an error, so I modified the code as follows:

<div class="footer">
  <div class="social">
    <ul>
      <% for(let item of theme.footer.social){ %>
        <% if (item.name == "email") {%>
          <li>
            <a title="<%- item.name %>" href="mailto:<%- item.path %>">
              <i class="iconfont icon-<%- item.icon %>"></i>
            </a>
          </li>
        <%} else {%>
          <li>
            <a title="<%- item.name %>" href="<%- item.path %>">
              <i class="iconfont icon-<%- item.icon %>"></i>
            </a>
          </li>
        <%} %>
      <%} %>
    </ul>
  </div>
  <% for(let item of theme.footer.more){ %>
    <div class="footer-more">
      <% if (item.path) {%>
        <a href="<%- item.path %>"><%- item.name %></a>
      <%} else {%>
        <%- item.name %>
      <%} %>
    </div>
  <%} %>
</div>

When the social name in the configuration file is email, add mailto: to the code

Remove a category from the homepage article list

I don’t know if anyone else has this requirement, because in addition to technical articles in my blog, there are also some novels, and a daily paragraph similar to the previous talk, all piled in the homepage list is very confusing, so I modified After the code, remove a certain category from the list (it doesn’t matter if you remove a few), the code changes little, but the structure is more complicated, so I posted all index.ejs, if you want to change it, just copy it, and then Then manually change the 11th line

<div class="container index">
  <div class="post-list">
    <!-- Traverse the rendered article -->
    <%
    var prev = -10086;// prev year
    var curr;// curr year, ever step be updated

    page.posts.forEach(function(item) {
      var mark = true;
      item.categories.forEach(function(item1){
        if(item1.name == "novel" || item1.name == "breaking thoughts"){
          mark = false;
        }
      });
      if(mark){
        curr = item.date.year()
        if (curr !== prev) {
          prev = curr;

    %>
    <div class="content-title">
      <h2>
        <span><%- curr %></span>
      </h2>
    </div>
    <%
      }
    %>
      <div class="post-item" title="<%- item.title %>">
        <div class="time-m-d"><%- item.date.format("MM-DD") %></div>
        <div class="title">
          <a href="<%- url_for(item.path) %>">
            <% if(item.title !== "") {%>
              <% if (item.top) {%>
                <span><span title="<%= __('pinned') %>" class="icon iconfont icon-pin-top post-top"></span><%- item.title %></span >
              <%} else {%>
                <span><%- item.title %></span>
              <%} %>
            <%} else {%>
              <span>untitled</span>
            <%} %>
          </a>
        </div>
      </div>
    <% }}) %>
  </div>
  <nav class="post-navigation">
    <% if(page.prev !== 0){ %>
      <a href="<%- url_for(page.prev_link)%>"><i class="iconfont icon-angleleft"></i></a>
    <%} %>
    <span class="page-num"><%- page.current %> / <%- page.total -%></span>
    <% if(page.next !== 0){ %>
      <a href="<%- url_for(page.next_link)%>"><i class="iconfont icon-angleright"></i></a>
    <%} %>
  </nav>
</div>

The difference from the original theme is that I extracted the year in the list and displayed it separately. This way, the look and feel is better. Of course, I copied it from the archive page.

Modify hexo-generator-index pagination

It should be noted that unless you do not use paging (it seems unlikely), if you use system paging, then the system will not remove the articles you want to remove when paging by itself. This will cause a problem, such as If you divide 10 articles, but the homepage only displays 7 articles, then this page will be 7 articles after pagination. If a page happens to contain all the articles you want to remove, then there will be nothing on this page. Contrary to our original intention, so if we want to achieve a better look and feel, we also need to modify the paging program of Hexo

The modified location is in the node_modules folder of the root directory of your blog. Find the file generator.js in the folder hexo-generator-index, and open it with vscode or Notepad. After the article array is generated, before calling the paging function, add a piece of code. My method is to create a new array, then add a judgment to the old array, and push the unexcluded articles into the new array. The code is as follows, the change is from the 16th Line start

'use strict';

const pagination = require('hexo-pagination');
const {sort} = require('timsort');

module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);
  const temp_posts = [];

  sort(posts.data, (a, b) => (b.sticky || 0)-(a.sticky || 0));

  const paginationDir = config.pagination_dir ||'page';
  const path = config.index_generator.path ||'';

  if(config.index_generator.exclude){
    posts.forEach(element => {
      var mark=true;
      element.categories.forEach(function(categories){
        config.index_generator.exclude_list.forEach(function(category){
          if(categories.name == category){
            mark=false;
          }
        });
      });
      if(mark){
        temp_posts.push(element);
      }
    });
  }

  return pagination(path, config.index_generator.exclude? temp_posts: posts, {
    perPage: config.index_generator.per_page,
    layout: ['index','archive'],
    format: paginationDir +'/%d/',
    data: {
      __index: true
    }
  });
};

Then add the category name to be excluded in the system configuration file _config.yml

index_generator:
  path:''
  per_page: 10
  order_by: -date
  exclude: true
  exclude_list:
    -novel
    -gossip

At this point, basically the visual changes are almost the same

Hurry! Must be fast

Next, the part I modified is mainly to open up the speed. Since I chose such a concise theme, it would be shameful for the Lighthouse to run less than 100 points? Below are the running scores of My Homepage, including desktop and mobile

How to do it, in fact, google has given a lot of suggestions, here I will only talk about some of my practices for the subject

Save all static files in CDN

The method is also very simple, upload the theme directory to a public repository in github, and then publish a release version, so that the static files in your version will be cached in jsdelivr, and the method to call is also very simple

https://cdn.jsdelivr.net/gh/your username/your warehouse name@Release version number/source/iconfont/iconfont-min.css

Load the js file asynchronously

After having the CDN address, change all the resources in the theme to CDN, mainly in /layout/_partial/header.ejs, there are also a few scattered places, look at the source/* for yourself Files, what needs to be modified can be changed, and there will be corresponding prompts when Lighthouse runs. Remember to add the async keyword to all the loading of js files, jquery.min is here It is used for full-text search. It is not involved when loading. jquery.fancybox.min-3.5.2 is used here for the purpose of clicking on the image to enlarge the article, and it does not involve the initial page rendering, so it doesn’t matter if you add it without worry. Let these js files hinder page rendering

Compress all js and css files

This is a standard action. Search for css compression directly. There will be many online compression sites. Copy the file and click on the compression, then create a file of XX-min.js and save it.

So far, after a toss, my page desktop simulation is 100 points, and the mobile terminal simulation is 99 points. Of course, there is room for improvement, but I have the opportunity to toss again in the future.