Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any official way to insert HTML codes once per file? #3086

Closed
xiazeyu opened this issue Mar 24, 2018 · 4 comments · Fixed by #4049
Closed

Any official way to insert HTML codes once per file? #3086

xiazeyu opened this issue Mar 24, 2018 · 4 comments · Fixed by #4049

Comments

@xiazeyu
Copy link
Contributor

xiazeyu commented Mar 24, 2018

Environment Info

Node version(node -v): v9.7.1

Hexo and Plugin version(npm ls --depth 0): hexo@3.6.0

For feature request

Our plugin wants to inject some HTML codes into every pages once:

<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"}});</script></body>

Our current code is to use hexo.extend.filter.register('after_render:html', (str, data) and (/<\/body>/gi.test(htmlContent)) or s.replace(/<\/head>/, tag + '</head>') to inject it into HTML:
https://github.com/MoePlayer/hexo-tag-dplayer/blob/master/index.js#L64
https://github.com/EYHN/hexo-helper-live2d/blob/master/index.js#L188

We are discussing whether it is the hacking way, or it is just the correct way.

We need to test the content for <body> because the filter will offer all the files(including all kings of HTML fragment), if we don't test for it, all the fragment will be insert a code, and the finally page will be like:(eg. index.html)

<html>
<head>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"}});</script></body>
</head>
<body>
<div class=sidebar>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"}});</script></body>
</div>
<div class=footer>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"}});</script></body>
</div>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"}});</script></body>
</body>
</html>

We just want it be added once, but I'm not sure even (/<\/body>/gi.test(htmlContent)) can promise it.

Is there any API or ways to make it directly?

Related:
MoePlayer/hexo-tag-dplayer#18 (comment)

@xiazeyu
Copy link
Contributor Author

xiazeyu commented Mar 31, 2018

I found a plugin:
hexo-inject, but it is now deprecated, and not workable.

@SukkaW
Copy link
Member

SukkaW commented Dec 23, 2019

The current way you did in your plugin (by registering a filter) is the right way.

Although I know you want to insert custom code in the page, I don't know what you want this feature to be: A filter that replace <!-- hexo_inject_[id] --> to custom HTML element? Or a helper that output configured custom code?

@tomap
Copy link
Contributor

tomap commented Dec 23, 2019

Why not do it in your theme's code directly?

@SukkaW
Copy link
Member

SukkaW commented Dec 23, 2019

@tomap

For plugins (like player) require third-party library, there is no better way to insert custom HTML element.

Themes can not handle this as well. For my own theme, I have to write custom HTML inside _config.yml; and for NexT theme, it requires manually add a head.swig to be placed under /source/_data/ directory.

I wonder if Hexo could provide a API to do this (by utilizing filter).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants