7、Fluid如何优雅写文章

一、iframe页面嵌套展示

1
<iframe src="https://mogullzr.github.io/" width="100%" height="700" name="Mogullzr" scrolling="yes"  noresize="noresize" frameborder="5" id="Mogullzr"></iframe>

参数说明： width="100%" 为宽度自适；scrolling="yes" 为允许滚动；frameborder 为边框宽度；noresize 规是否允许调整框的大小

二、details标签的使用

​ 可以用于折叠代码量长的内容，<sumamary> </sumamary> 中间填写名称

​ 对应代码如下：

1
2
3
4
5
6
<details>
    <summary>Test</summary>

    <iframe src="https://mogullzr.github.io/" width="100%" height="700" name="Mogullzr" scrolling="yes"  noresize="noresize" frameborder="5" id="Mogullzr"></iframe>

</details>
Test 
<iframe src="https://mogullzr.github.io/" width="100%" height="700" name="Mogullzr" scrolling="yes"  noresize="noresize" frameborder="5" id="Mogullzr"></iframe>

三、配图

修改主题的_config.yml的banner_img属性配置背景图片：

1
banner_img: /img/bg/example.jpg

修改主题的_config.yml的banner_img_height属性：有效值为 0 - 100，100 即为全屏。

配置透明度banner_mask_alpha：有效值为 0 - 1.0， 0 是完全透明（无蒙版），1 是完全不透明

四、懒加载设置（默认开启）

​ 想必大家对于懒加载已经有了一定的了解，开启懒加载之后就可以在一定程度上加快页面的打开速度（懒加载简述：图片只加载当前页面出现的图片，没有出现的图片暂不加载）

1
2
3
4
5
lazyload:
  enable: true
  loading_img: /img/loading.gif
  onlypost: false
  offset_factor: 2

五、代码块设置

copy_btn: 是否开启复制代码的按钮

line_number: 是否开启行号

highlight: 是否开启代码高亮

lib: 选择生成高亮的库，可选项: highlightjs、prismjs，对应下面两组配置，高亮的配置说明具体见主题配置中的注释`

1
2
3
4
5
6
7
8
9
10
11
12
code:
  copy_btn: true
  highlight:
    enable: true
    line_number: true
    lib: "highlightjs"
    highlightjs:
      style: 'Github Gist'
      bg_color: false
    prismjs:
      style: "default"
      preprocess: true

六、给文章添加封面页

样式如下图所示

image-20240127005605812

只需要给每篇文章的最前面按照下列模式添加图片即可

1
2
3
4
5
6
7
---
title: 1、搭建流程-预配知识
index_img: https://cdn.jsdelivr.net/gh/mogullzr/Typora_img@main/202401270033668.webp
date: 2024-01-22 22:36:52
categories: Hexo-Fluid搭建个人博客
---
## Node.js、Git、Github账号