foreword

The first is mainly to DIY some theme configurations, enrich the performance of existing themes, and optimize the page effect. Speaking human words is doing better
The second is because if you do optimization directly modify the theme file, then there will be problems when you update the theme (unless you will not update the theme again)

operate

1. Create a folder

After you blog主目录下的source目录下(一定不要是themes目录下那个，那个是主题的source文件)have created the css, js, img folders respectively, they are mainly used to store the css, js files and pictures you created yourself; these three folders are basic needs, and there are other configuration files that you can create separately folder

source/configI have archived these custom configuration files here.

Hexo_pic_1

2. Import custom js and css files

You can configure it directly in the theme configuration file, and my theme configuration file is as shown above_config.butterfly.yml

The configuration method is as follows: find the configuration inject in the theme

# Inject
# ps：引入自定义css、js
#     css文件在head引入，js文件在bottom里引入，有的js要求在head引入，不然无法生效
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# ps: 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head: #注入自定义css
      - <link rel="stylesheet" href="/css/style.css?v1">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom: #注入自定义js
      - <script src="/js/script.js?v1"></script>
    # - <script src="/xxxx"></script>

Importing multiple files is as follows

bottom: #注入自定义js
      - <script src="/js/script.js?v1"></script>
      - <script src="/xxxx"></script>

⚠️: The path must be /xx/xx, not ./xx/xx

reference link

Add custom css and js files to Hexo blog

More knowledge is being continuously updated!!!

statement

The source of the original text is indicated in the reference part, and the source of the original text can be obtained at the reference link of the article

If the content in the article involves the original copyright, please contact [email protected] by email , and the related articles or content will be changed or canceled in time

Hexo: Butterfly theme introduces custom CSS and JS files