Fluid优化

Fluid主题优化

本文原作者地址 https://www.cnblogs.com/wcisns/p/18706913

• 1-固定背景和透明度
• 2-添加运行时间
• 3-打字机渐变
• 4-优化版权声明
• 5-设置代码块主题
• 6-代码块美化

1-固定背景和透明度

1、在根目录下新建一个 scripts 目录，里面添加一个 bg.js 的文件

const {root: siteRoot = "/"} = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

2、在主题目录的 source/js/ 添加 backgroundize.js 文件

// 在电脑端显示的背景图片链接
const desktopBgImageUrl = "url('/img/default.webp')";
 
// 在电脑端设置背景图片
document.querySelector('#web_bg').setAttribute('style', `background-image: ${desktopBgImageUrl};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
 
// 设置 banner 的背景图片为空
document.querySelector("#banner").setAttribute('style', 'background-image: none');
 
// 设置 banner 的. mask 背景颜色透明
document.querySelector("#banner .mask").setAttribute('style', 'background-color: rgba(0,0,0,0)');

3、添加 glassBg.css 文件

#board {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
 
#toc {
padding: 10px;
top: 4rem;
background-color: var(--board-bg-color);
border-radius: 10px;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}

4、在 _config.fluid.yml 文件中找到 custom_js 和 custom_css 把上述文件添加进去

custom_js:
- /js/backgroundize.js
custom_css:
- /css/glassBg.css

5、在 _config.fluid.yml 文件中找到并替换

board_color: "#ffffff80"
board_color_dark: "#00000080"

6、使用 hexo clean && hexo g && hexo s 查看

2-添加运行时间

在主题目录下的 layout/_partials/footer.ejs 最后的 div 前面添加

<div>
<span id="timeDate"> 正在载入天数...</span>
<span id="times"> 载入时分秒...</span>
<script>
    var now = new Date();
    function createtime(){
        var grt= new Date("1/12/2025 01:15:00");
        now.setTime(now.getTime()+250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){
                mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){
                snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "🚀本网站已飞行 & nbsp"+dnum+"&nbsp 天";
        document.getElementById("times").innerHTML = hnum + "&nbsp 时 & nbsp" + mnum + "&nbsp 分 & nbsp" + snum + "&nbsp 秒";
    }
    setInterval("createtime()",250);
</script>
</div>

3-打字机渐变

在根目录的 _config.fluid.yml 文件中找到 custom_js 添加

custom_js:
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css # 头部打字机颜色效果渐变

4-优化版权声明

在主题目录下的 layout/_partials/post/copyright.ejs 文件添加一下内容

<p class="note note-primary">
<strong> 本文作者: </strong><a href="<%- url_for() %>"><%- config.author || theme.about.name || config.title %></a> <br>
<strong> 本文链接: </strong><a href="<%- full_url_for(page.path) %>"><%- full_url_for(page.path) %></a> <br>
<strong> 版权声明: </strong><% if (['BY', 'BY-SA', 'BY-ND', 'BY-NC', 'BY-NC-SA', 'BY-NC-ND'].indexOf(license) !== -1) { %>
    <% var items = license.split('-') %>
    <% for (var idx = 0; idx < items.length; idx++) { %>
        <a class="print-no-link" target="_blank" href="https://creativecommons.org/licenses/<%= license.toLowerCase() %>/4.0/">
        <span class="hint--top hint--rounded" aria-label="<%- __('post.copyright.'+ items[idx]) %>">
            <i class="iconfont icon-cc-<%= items[idx].toLowerCase() %>"></i>
        </span>
        </a>
    <%} %>
    <%} else if (license === 'ZERO') {  %>
    <a class="print-no-link" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
        <span class="hint--top hint--rounded" aria-label="<%- __('post.copyright.ZERO') %>">
        <i class="iconfont icon-cc-zero"></i>
        </span>
    </a>
    <%} else { %>
    <%- license %>
    <%} %>
</p>

将添加内容以下除了倒数第一行都注释掉

5-设置代码块主题

如果对 material 主题不满意, 可在 highlight js 网站挑选喜欢的

在 _config.fluid.yml 文件中找到 highlightjs 修改 style 和 style_dark

highlightjs:
    # 在链接中挑选 style 填入
    # Select a style in the link
    # See: https://highlightjs.org/demo/
    style: "base16/material"
    style_dark: "base16/material"

6-代码块美化

在主题文件themes\fluid\source\css目录下新建样式文件，如macpanel.styl，内容参考：

.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

修改主题配置文件_config.fluid.yml，找到custom_css配置项，引入刚刚新建的样式文件（此处引入.styl文件无需加后缀）：

custom_css:
  - /css/macpanel

继续修改_config.fluid.yml，找到code.highlightjs配置项，将代码高亮风格修改暗色风格（dark系列），如：

highlightjs:
  # 在链接中挑选 style 填入
  # Select a style in the link
  # See: https://highlightjs.org/static/demo/
  style: "github dark dimmed"
  style_dark: "dark"

注：如果选用其他代码高亮风格，有可能会造成代码背景是偏白色的，与黑色的Mac栏不搭。