魔改Hexo Fluid

整理一下本少女在使用hexo fluid时用到的代码

将themes/fluid/layout/_partials/header/banner.ejs修改为以下内容：

<%
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha)
var subtitle = page.subtitle || page.title
%>

<div id="banner" class="banner" style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <video autoplay loop muted playsinline poster="<%- url_for(banner_img) %>"
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
    <source src="[你的视频背景地址]" type="video/mp4">
  </video>
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>

        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>
      </div>

      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

添加自定义字体#

通过自定义CSS引入字体

@font-face {
  font-family: 'FontName';  /*换成你自己的字体名及路径*/
  src: url('/font/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

修改Blog/_config.fluid.yml

font:
  font_size: 18px   # 按需要自定义
  font_family: FontName  # 换成你自己的字体名
  letter_spacing: 0.02em
  code_font_size: 85%

添加网页背景图片#

使用自定义CSS实现
用上面的方法添加自定义CSS

body {
  background: url(/img/background.jpg);  /*换成你自己的背景图*/
  background-attachment: fixed;
  background-size: cover;  
}

可以使用图片的api，个人感觉会拖慢加载速度

复制变色#

自定义CSS添加以下内容

::selection {
    color: #66ccff; /* 设置选中文字的颜色 */
    background: transparent; /* 设置选中文字的背景为透明 */
}

Hexo Fluid，随着网页的滑动，Banner图会逐渐变透明
打字机也会变透明

自定义js

// 获取图片元素
var image = document.getElementById("banner");
var targetDistance = 695; // 设置滑动695px后完全透明
window.addEventListener("scroll", function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var opacity = 1 - (scrollDistance / targetDistance);
  if(opacity < 0) {
    opacity = 0;
  }
  image.style.opacity = opacity.toString();
});

或者根据滑动网页的百分比减少不透明度

var image = document.getElementById("banner");
var pageHeight = document.body.scrollHeight - window.innerHeight;
window.addEventListener("scroll", function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var opacity = 1 - (scrollDistance / pageHeight);
  if(opacity < 0) {
    opacity = 0;
  } else if(opacity > 1) {
    opacity = 1;
  }
  image.style.opacity = opacity.toString();
});

设置banner的淡出样式

#banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

文章中代码的字体及背景色#

自定义CSS添加以下内容

.markdown-body code {
    tab-size: 4;
    background-color: rgb(251 253 83 / 50%);
    transition: background-color 0.2s ease-in-out;
    font-family: "FontName";  /*改为你自己的字体名*/
}

background-color用于设置背景色
font-family用于设置字体

滚动条#

自定义CSS

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #e58a8a;
    background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 2em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: #fff;
    background-color: #e58a8a;
}

关于Hexo Fluid的评论#

因为出了一点Bug，本站的评论通过修改Blog/themes/fluid/layout/post.ejs实现。
将post.ejs中的<%- inject_point('postComments') %>替换为你使用的评论系统提供的html代码
以Utterance为例:

<script src="https://utteranc.es/client.js"
        repo="用户名/仓库地址"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

关于网站图标#

在_config.fluid.yml设置没反应，手动将网页图标重命名为favicon.ico，复制到public文件夹下

关于Valine#

测试时发现LeanCloud提供的域名会屏蔽中国大陆的访问…
绑定自己的域名后就能正常访问…

在LeanCloud的设置-域名绑定选项绑定自己的子域名，然后在子域名的DNS上设置CNAME记录，解析到LeanCloud提供的域名，之后配置Valine时,使用绑定的子域名

~~不想打字了~~

视频Banner#