New Features

Rebuilt CSS

The preprocessor used is SASS, and the styles related to @mixin and @media are placed in separate files. The problem that some styles previously needed to use !important to increase the priority has been fixed.

ToC

When the article is long, it is easier to jump directly to the part you want to read if there is a table of contents.

Preload Comments

Previously, I thought to load the js/css and data of the comment module only when scrolling to the comment area, to avoid loading unnecessary things when entering the page. Recently, I found that this feels a bit slow, and I always have to wait a while before I can see the comments, so I decided to load them in advance.

The element used for monitoring is placed after the second subtitle, which means that when the reader slides to the second h2, I think he may read all the way to the bottom to see the comments.

After the update, I feel that the experience has indeed improved a bit.

Article Word Count

1
2
3
4
5
6
7
8
9
10
11
12
13

<%
  const content = post.content || "";
  const text = content
    .replace(/<figure[^>]*>.*?<\/figure>/gs, "")
    .replace(/<noscript[^>]*>.*?<\/noscript>/gs, "")
    .replace(/<style[^>]*>.*?<\/style>/gs, "")
    .replace(/<script[^>]*>.*?<\/script>/gs, "")
    .replace(/<\/?[^>]+(>|$)/g, "")
  
  const currentLanguage = page?.language || config?.language;
  const words = (currentLanguage === 'en'? text?.split(' ')?.length : text?.trim()?.length) || 0;
  const photos = content.match(/class="gallery-item/gi, '')?.length || 0;
%>

Copy Button on Code Block

It is really inconvenient that the code block cannot be copied.

At first, I thought of using pseudo-elements, but after writing the style, I found that the click event will not work on pseudo-elements. There is no other way to determine whether the copy is clicked except positioning.

I had to use hexo’s hook to add a <div class="copy-btn"></div> to the code block when building.

My Theme 1.0

I changed to the hand-made theme 1.0. Why did I want to write a theme myself? The main reason is that I want my blog to be “small and beautiful”. The previous theme Icarus also fits my aesthetic, but it is a bit heavy for me. There are too many plugins, and I don’t know how to streamline some of them, so I just wrote one myself.