My English is not very good, so if there is a typo, please remind me, thank you very much.
This goes back to March, Mimi's PR: Adding Submodule, and we discussed how to manage third-party dependencies. LEAFERx proposed that using NPM management would be better, he practice PR:Extract leancloud-counter to plugins #677 #707. In my opinion, LEAFERx's solution is not good because of the complexity. So to be plugin, there are two requirements that must be met:
- Flexibility/Extensibility, in the plugin, we have to be able to modify most of the content.
- Simplicity, we can integrate the functions with very little code.
In addition, ivan-nginx is also concerned about documentation issues, but if it is completely independent, it is not a problem. In the meantime, I also tried PR:Refactoring comments. After all, the comment system is really "bad". A bunch of
if else. This refactoring is a good attempt, but I can't easily get together because the impact is big (almost everyone), and then I found another solution, a plugin for Hexo hexo-inject, by customizing the content by injecting code, since hexo itself is separated from the theme, it can only provide 4 injection points, and the scalability is far from enough. But if it can be implemented in NexT, it is completely different, so I mentioned PR: Add new filter type theme_inject
How to use
Okay, let's talk about this, let's experience how to use
theme_inject. Of course, if you are a beginner, you can use the
custom_file_path in the configuration file to add custom content. If you want to modify more content, then follow me step by step. The docs of Injects can be found in NexT Document. Here is an example, step by step integration gitter.
First, we create a js file (any name) in the hexo or theme
scripts, add the following content. As long as it is a script inside, the hexo runtime will execute it.
In the second step, we create a
views/gitter.swig file and add the following.
hexo s runs, you can see that the gitter has been integrated in the lower right corner.
Next step, we adjust the style. In the script, add more styles of injection.
Run it again, the style of the button changes, do you think it is better than the original or...?
Make a npm plugin
The spirit of open source lies in sharing. When you customize your theme, you may write an article "How to implement XXXX in NexT". Then, after Visitor saw it, and followed you. Although there is no problem. But after all, "lazy" is the intent. If we can put it all into an NPM plugin, then they only need
yarn add xxxx when they use it. How convenient it will be! ! !
The next step is to implement a plug-in that slides to the bottom/head and read progress. The final effect is seen in hexo-cake-moon-menu
In order to be uploaded to the NPM repository, you first need to create an account on it: https://www.npmjs.com/, and for convenience, I use yarn as a command line tool.
Initializing an NPM package
Create a new folder and run
yarn init in it, you will be asked a series of questions (such as the following), after initialization will initialize a package.json
- name suggests adding
@yourname, after all, the same name package can't upload
- name must start with
Create an example project for preview
You need to upload your plugin (this step is the last step, but due to hexo will detect package.json to execute the plugin, you must have the plugin first), run
yarn publish --access public in the current project.
.gitignore, npm will also ignore unnecessary files based on it
Run the following command to create an example project
Layout and style
Next copy the following part of hexo-cake-moon-menu in my project to your plugin project.
- default.yaml default configuration
- moon-menu.swig layout of the menu
- moon-menu.styl style of the menu
In the above use of Injects, you can understand that the focus is on js scripts. Styles layout etc are organized through it, so I ignore the style, if you want to study you can view those.
The main in package.json defines the script's entry file. The default is
index.js, so we create it and add the following
And you need to add
js-yaml dependency for parsing yaml
Run the preview again and you can see the button added to your example project.
Uploading and sharing
Remember to upload
yarn publish --access public after you finish, and then try to add
yarn add @jiangtj/hexo-moon-menu in your blog.
If you would like to more user use your plugin, please submit a PR to Awesome-NexT
We can also load other hexo plugins in the plugin, after adding the hexo plugin (
yarn add plugin-name). Load the script with the following code.
hexo.loadPluginneeds to be placed outside the filter, to ensure that it is executed at the first time. The above code comes from an example: [hexo-next-wapper-tag-cloud](https://github. Com/jiangtj-lab/hexo-next-wapper-tag-cloud)
Although this theme_inject has been merged, there are still many improvements that need to be made.
- It is necessary to make NexT more structured to provide more injection points.
- The refactoring PR of the comment system is closed, for various reasons, I plan to re-refactor it based on theme_inject (Done).