Unable to initial search

[evalexp]

The local search could not be initial on my website, it works on local service.

When I click search, nothing happend.

I think this may be a bug.

By the way, I use a windows PC to preview and write the blog, but I use linux docker container to build my blog, I could not ensure that if this cause this problem.

The Docker image is node:16-alpine, and the build command as :

  | - npm install hexo -g
  | - npm install
  | - hexo g
  | - tar -czvf publish.tar.gz -C public .

And my blog is behind Cloudflare, hope could solve this problem soon.

[evalexp]

OK, I debug the public static website myself, and I find that the event DOMContentLoaded handler was registered after the event.

And because of this, the handler function was not called as expected.

I migrate the handler call-time from "window.DOMContentLoaded" to "window.load", and that works for my website.

And here's the fix script, if someone met the same problem as me, the script might work:

// fix-search.js
const fs = require("fs");

const file_name = __dirname + "/public/index.html";
const origin_event_name = "DOMContentLoaded";
const new_event_name = "load";

if (fs.existsSync(file_name)) {
  let content = fs.readFileSync(file_name).toString();
  content = content.replace(origin_event_name, new_event_name);
  fs.writeFileSync(file_name, content);
  console.log(
    `Your search engine initial time has been changed from "window.${origin_event_name}" to "window.${new_event_name}"`
  );
} else {
  console.error("Please generate your blog static file fiest.");
}

But please pay attention, this script would NOT execute automatically, so you build step might consider to add a command:

node fix-search.js

If you also use drone to automatically build, you can refer to my profile:

steps:
// some steps before
  - name: build
    image: node:16-alpine
    commands:
      - npm install hexo -g
      - npm install
      - hexo g
      - node fix-search.js
      - tar -czvf publish.tar.gz -C public .
// some steps after

[evalexp]

OK, I debug the public static website myself, and I find that the event DOMContentLoaded handler was registered after the event.

And because of this, the handler function was not called as expected.

I migrate the handler call-time from "window.DOMContentLoaded" to "window.load", and that works for my website.

And here's the fix script, if someone met the same problem as me, the script might work:

// fix-search.js
const fs = require("fs");

const file_name = __dirname + "/public/index.html";
const origin_event_name = "DOMContentLoaded";
const new_event_name = "load";

if (fs.existsSync(file_name)) {
  let content = fs.readFileSync(file_name).toString();
  content = content.replace(origin_event_name, new_event_name);
  fs.writeFileSync(file_name, content);
  console.log(
    `Your search engine initial time has been changed from "window.${origin_event_name}" to "window.${new_event_name}"`
  );
} else {
  console.error("Please generate your blog static file fiest.");
}

But please pay attention, this script would NOT execute automatically, so you build step might consider to add a command:

node fix-search.js

If you also use drone to automatically build, you can refer to my profile:

steps:
// some steps before
  - name: build
    image: node:16-alpine
    commands:
      - npm install hexo -g
      - npm install
      - hexo g
      - node fix-search.js
      - tar -czvf publish.tar.gz -C public .
// some steps after

[dccif]

I met the same problem, but I think your solution hasn't solved the search button click event in the post.
It only solves the home page. When in post page, the problem is still there.
I think some solution to this problem requires traversing all index.html files, but I don't think this is a good solution.

[evalexp]

I met the same problem, but I think your solution hasn't solved the search button click event in the post. It only solves the home page. When in post page, the problem is still there. I think some solution to this problem requires traversing all index.html files, but I don't think this is a good solution.

Yes, you are right, the solution didn't solve the search button click event in the post pages.
And of cause, traversing all index.html files is not good.
So I try to fix this problem by editing the template file.
In your themes/stun folder(your hexo-theme-stun folder), try to find this file: layout/_third-party/search/localsearch.pug, and find out the code:

window.addEventListener('DOMContentLoaded', function () {
// some code here
}, false);

And replace the event name, DOMContentLoaded => load, just like this:

window.addEventListener('load', function () {
// some code here
}, false);

Now, remove all the fix script and try to rebuild your blog, everything now work.
By the way, if you use drone, please edit your .drone.yml again.