博客编写攻略

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Vince
原文地址：https://i.vince.pub/p/fluid-write/

前言

Fluid 是一款很十分优雅的主题，那么写一篇优雅的文章搭配它呢？以下会从几个方面来简述，主要还是做几个推荐。

文章内容

熟悉 Markdown 语法

对于使用 Hexo 的大多数人来说，相信对 Markdown 的语法不会陌生。熟练掌握 Markdown 语法对我们的写作拥有极大的帮助，这里用少用的表格和脚注来举个例子。至于为什么有些公式、流程图无法渲染，是因为 Markdown 追求简洁式写作，默认渲染器不支持复杂渲染。

iframe 页面镶套

iframe 页面镶套可以帮助我们更好的展示一个页面。比如以下演示页面。

<iframe src="https://hexo.fluid-dev.com/" width="100%" height="500" name="topFrame" scrolling="yes"  noresize="noresize" frameborder="0" id="topFrame"></iframe>

一些参数说明:width="100%" 为宽度自适应，高度请根据实际需求跳转，注意移动端页面是否匹配。 scrolling 为滚动条参数。frameborder 为边框参数。noresize 属性规定用户无法调整框架的大小。

众所周知，博客好不好看，配图占一半。这里给大家推荐几个我常用找配图的地方。另外，请遵循相关网站的版权协议。**

Wallpaper Hub

Wallpaper Hub

点击跳转到 Wallpaper Hub

Wallhaven

Wallhaven

点击跳转到 Wallhaven

Unsplash

Unsplash

点击跳转到 Unsplash

Hexo Fluid 美化

来自：【Hwcoder】让你的 Hexo 博客更美观的 N 种配置（基于 Fluid 主题扩展）

行内代码颜色

默认的行内代码颜色和正文颜色是继承关系，且行内代码背景色也不明显，因此视觉上难以区分。 但是配置文件中又没有对应选项可以修改，查阅 GitHub 的 Issue 发现，有人曾提供过一个解决方案。

打开路径 /themes/fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置项，修改颜色为 #E05B35。

Mac 风格代码块

在 GitHub 的 Issue 发现有人提供了自定义样式实现 Mac 风格代码块的方法，遂尝试之。 首先在路径 /themes/fluid/source/css 下新建文件 mac.styl，复制以下代码：

.highlight
    background: #011627
    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 选项，加入 /css/mac.css 代码，注意这里后缀名依然使用 .css，不然无法识别！

Mathjax 懒加载

如果某些元素内部含有公式，但又要在公式真正加载之前确定大小，就必须设置该元素内部的公式不懒加载，而是直接渲染出来。这时候就需要使用 lazyAlwaysTypeset 选项。

themes/fluid/layout/_partials/plugins/math.ejs 的 mathjax 部分，添加 lazyAlwaysTypeset 选项。

<% if(theme.post.math.engine === 'mathjax') { %>
  <%
    var lazy = theme.lazyload.enable && require_version(theme.static_prefix.mathjax, '3.2.0')

    import_script(`
      <script>
        if (!window.MathJax) {
          window.MathJax = {
            tex    : {
              inlineMath: { '[+]': [['$', '$']] }
            },
            loader : {
              ${ lazy ? 'load: \[\'ui/lazy\'\]' : '' }
            },
            options: {
              renderActions: {
                insertedScript: [200, () => {
                  document.querySelectorAll('mjx-container').forEach(node => {
                    let target = node.parentNode;
                    if (target.nodeName.toLowerCase() === 'li') {
                      target.parentNode.classList.add('has-jax');
                    }
                  });
                }, '', false]
              },
              lazyAlwaysTypeset: (function() {
                // 检查页面上是否存在 'mydetails' 元素
                if (!document.querySelector('mydetails')) {
                  return null; // 如果不存在，返回 null
                } else {
                  return ['mydetails']; // 如果存在，返回包含 'mydetails' 的数组
                }
                // 如果你直接给一个列表，那么如果页面上不存在这个元素，MathJax 将会崩溃
              })(),
            }
          };
        } else {
          MathJax.startup.document.state(0);
          MathJax.texReset();
          MathJax.typeset();
          MathJax.typesetPromise();
        }

        Fluid.events.registerRefreshCallback(function() {
          if ('MathJax' in window && MathJax.startup.document && typeof MathJax.startup.document.state === 'function') {
            MathJax.startup.document.state(0);
            MathJax.texReset();
            MathJax.typeset();
            MathJax.typesetPromise();
          }
        });
      </script>
    `)

    import_js(theme.static_prefix.mathjax.replace('es5/', ''), 'es5/tex-mml-chtml.js')
  %>

<% } else if (theme.post.math.engine === 'katex') { %>
  <% import_css(theme.static_prefix.katex, 'katex.min.css') %>
<% } %>