Welcome to my Hexo blog, a cool batch. KeMa BLOG

🌟 preface

My Hexo version is 3.9.0, and my Next theme version is 7.5, which is the magical, generational version that removes the Custom file.

My server is not Github-Page, but Ali Cloud ECS server. For how to migrate Hexo from Github-Page to Ali Cloud ECS server, please see this article: Deploy blog to Ali Cloud server.

Of course, at the beginning of this version of good rub card, originally wanted to change the style, not CSS, search on the Internet there are a lot of articles to change the custom file, copy copy can be changed to a very good-looking style, this is good, a remove all invalid.

But it wasn’t. After a long time in the trenches with Next,

Found that you can be in themes/next/source/CSS/main styl finally added:

@import "_custom/custom";

Copy the code

Then, in the themes/next/source/ CSS directory, create a new folder named _custom. Styl file, paste the next theme file, and preview these new styles locally.

👩🏫 of course you may not need to do this, you can even add your desired CSS style code to any.styl file in the themes/ Next /source/ CSS folder and it will take effect in the local preview.

I think the reason is: Theme calls file mainly comes from the themes/next/source/CSS/main styl, and inside this file are all import statements, is about to import all the CSS file to come in, This means that the resulting entire main. CSS file is just a sequence of all the CSS sub-files, so which file you add changes only the order of the final main. CSS, but it still provides the same effect. However, in order to facilitate future modification, it is recommended to find the corresponding location to add.

1️ problem statement

Foreword I also mentioned the “local preview effect”, means that you can define your own CSS style, also can copy and paste the contents of the Internet, but one thing is very headache, it is in most cases, you can only be successful local preview, and once the deploy to the server or completely invalid, or it’s weird, Sometimes you can even delete the entire/CSS folder and find that the site looks exactly the same after deploy. 😭

I then went through F12 debugging on both the deployed page and the local preview page and found the differences one by one. The file name main. CSS in the debug page/CSS file is exactly the same as the file name in the /public folder that hexo g generated, but in the deployment page the file name is main.css? V is equal to 7.3.0. What’s that extra? V =7.3.0. The file contents in main.css are exactly the same as those in /public/ CSS /main.css on my PC, but main.css? There are hundreds of lines missing in v=7.3.0. I thought it was the incomplete deployment of the hexo deploy command, but the contents in the server folder of Ali Cloud are the same as my local one. And when I copy the stuff in main.css to main.css? At v=7.3.0, I wanted the deployment page to look exactly like my local preview, even if I refreshed it. After all, it was web debugging.

So the question is clear, is this main.css? V =7.3.0 is not on the server side, the source of the call is not clear and cannot be changed, so you have to find a way to make the deployed page load main.css instead of main.css? V = 7.3.0.

2️ problem solved

In themes/next/layout/_partials/head/head.swig, there is a line that looks like this:

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css?v={{ version }}">

Copy the code

It was obviously an extra one, right? That’s where v=7.3.0 comes from, right? V ={{version}}, so the? V ={{version}}

Then hexo Clean && Hexo G && Hexo D to view the deployment page, complete style perfect! Problem solved. 👍 👍 👍

3️ some disadvantages

This works perfectly for the problem itself, and there is absolutely no problem with the local preview being different from the deployment side, but there are side effects.

Just when I thought I could finally enjoy my unbridled play, I found a new problem. I restyled the CSS again, adding some styles to the /_custom/custom file, and hexo d found that the styles had not changed. Redebugging found the problem, the main.css file did not change. Think about it, guess the reason should be main.css? The problem with V =7.3.0 is the same, it itself is immutable, even if it hexo d a new CSS file, it itself will not change.

The solution is to start with themes/next/layout/_partials/head/head.swig

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css">

Copy the code

Instead of

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main1.css">

Copy the code

So I’m going to change it to something else main1 or main2, or I’m going to change it to something different. Then hexo G will change the CSS file name referenced in the generated blog post pages to main1.css.

Change main. CSS to main1.css in /public/ CSS, hexo d, and see that the changed CSS style works.

Of course, this means that every time you change the CSS style, you need to change main. CSS to a new name, such as main2. CSS or main3. CSS…… .

It is recommended that you back up the /public folder before hexo clean && hexo g && Hexo d so that the version can be rolled back.

Therefore, it is recommended that you either leave the CSS unchanged or change it all at once. After all, Hexo blogging is not about looks, it’s about content, right? 😉

4 ️ ⃣ summary

  • deletethemes/next/layout/_partials/head/head.swigIn themain.css? v={{ version }}At the back of the? v={{ version }}
  • Every changecssLater,hexo dBefore, retrofitthemes/next/layout/_partials/head/head.swigIn themain.cssThe name of, e.gmain2.css,main3.css. .
  • advicehexo clean && hexo g && hexo dBefore you do that, make a backup/publicFolders that retain the possibility of a rollback version.