Decorate Your Blog

Once you’ve built a blog with Hexo and Fluid themes, you can’t wait to spruce it up a bit. Here are some ways to modify ICONS, backgrounds, and loading GIFs

change the img

First, you can put the image you want to replace into the fluid/source/img directory and change the location of the image reference in the _config.yml file in the fluid directory

For example, I replaced fluid.png with moca.png, and replaced loading.gif with xiaobai.gif

"Why this image still loading?"

Random background picture

Create a new random-bg directory under fluid\source\img, and put your favorite background images in it

Edit the banner.ejs file in the blog\themes\fluid\layout_partials\header path

Add the following code at the end of the file

<script>
  function getRandomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


var randomNum = getRandomNumber(0, 8).toString();
var banner_img = "/img/random-bg/" + randomNum + ".avif";
document.getElementById('banner').removeAttribute('style')
document.getElementById('banner').setAttribute('style',`background: url('${banner_img}') no-repeat center center; background-size: cover;`)
</script>