为Hexo Fluid的文章设置网格背景

效果图：两种方法，推荐第一种

使用自定义CSS实现#

~~代码是从Gridzzly.com抄的~~
推荐为暗色模式进行适配 ~~不然根本看不清~~

新建CSS文件(不要通过自定义CSS导入)

#board {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226mm%22%20height%3D%226mm%22%20viewPort%3D%220%200%205mm%205mm%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cline%20x1%3D%220mm%22%20y1%3D%225mm%22%20x2%3D%226mm%22%20y2%3D%225mm%22%20stroke-width%3D%220.3mm%22%20stroke%3D%22%23d4d4d4%22%2F%3E%20%3Cline%20x1%3D%225mm%22%20y1%3D%220mm%22%20x2%3D%225mm%22%20y2%3D%226mm%22%20stroke-width%3D%220.3mm%22%20stroke%3D%22%23d4d4d4%22%2F%3E%20%3C%2Fsvg%3E");
    background-position: 2px 2px;
}

引入CSS

<link id="custom-css" rel="stylesheet" type="text/css" href="/css/divback.css">

建议通过Hexo注入器进行引入

修改Blog\themes\fluid\layout\_partials\header\navigation.ejs 目前是第62行，为了给a标签绑定onclick="toggleCSS()"

<a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle" onclick="toggleCSS()">

导入自定义js

function toggleCSS() {
      var linkElement = document.getElementById("custom-css");
      if (linkElement.disabled) {
        linkElement.disabled = false; // 启用CSS文件
      } else {
        linkElement.disabled = true; // 禁用CSS文件
      }
    }

使用Pattern.css实现#

在layout.ejs引入Pattern.css

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

将layout.ejs和post.ejs两个文件中的<div id="board"(没有向右的尖括号)改为<div id="board" class="pattern-dots-xl"(以.pattern-dots-xl为例，可以自己修改class的内容)