Butterfly魔改8：添加文章搜索功能并调整导航位置

添加搜索功能

在根目录下安装插件 npm install hexo-generator-search --save

然后去_config.yml中启用local_search即可

search:
  use: local_search
  placeholder:

调整位置

buterfly的搜索添加之后是默认在最后的，以及这个是和导航分开来的（如下图所示）

所以我没法简单的把搜索图标弄到最后面去，以及我懒得去找.pug了（一些不好的回忆），索性直接用js来操作好了（这样还不用伤到模板文件）

请先完成魔改准备工作，然后在\themes\butterfly\source\js\custom.js最后添加如下代码：

document.addEventListener('DOMContentLoaded', function() {
  var searchButton = document.getElementById('search-button');
  var menusItems = document.querySelectorAll('.menus_items');

  if (searchButton && menusItems.length > 0) {
    // 获取 menusItems 的克隆节点
    var menusItemsClone = menusItems[0].cloneNode(true);

    // 将克隆节点插入到 searchButton 之前
    searchButton.parentNode.insertBefore(menusItemsClone, searchButton);

    // 删除所有的 menusItems 元素
    menusItems.forEach(function(item) {
      item.parentNode.removeChild(item);
    });
  }
});

这段代码的目的是将页面上第一个 class 为 menus_items 的元素克隆一份，插入到 id 为 search-button 的元素之前，然后删除所有 class 为 menus_items 的元素。 这可以用来改变页面上元素的排列顺序，并且避免出现重复的元素。

哎哎，上面这个代码在手机端会出现bug，改为下面不交换就好：

document.addEventListener('DOMContentLoaded', function() {
  // 检查屏幕宽度是否大于某个值（例如768px，通常认为是平板/手机与桌面设备的分界点）
  if (window.matchMedia("(min-width: 768px)").matches) {
    var searchButton = document.getElementById('search-button');
    var menusItems = document.querySelectorAll('.menus_items');

    if (searchButton && menusItems.length > 0) {
      // 获取 menusItems 的克隆节点
      var menusItemsClone = menusItems[0].cloneNode(true);

      // 将克隆节点插入到 searchButton 之前
      searchButton.parentNode.insertBefore(menusItemsClone, searchButton);

      // 删除所有的 menusItems 元素
      menusItems.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  }
});