hexo的常用指令

  • hexo s //运行项目
  • hexo s -p 9090 //运行项目并将默认的4000端口改成9090
  • hexo clean // 清除项目中的public文件(由hexo g生成)
  • hexo g // 将项目资源生成静态相对public文件
  • hexo d //将项目上的public部署上github (注意:是已经绑定了github相关仓库的)

标签插件raw的应用

raw主要是在md文件中可用html语法,这样更加方便扩展一些我们自己想要的样式,是页面更加丰富多彩
下面我简单举例修改文字的样式

我要改样式

先在自己要修改的md文件中加上

{% raw %}
<div class='my_div_style'>
我要改样式
</div>
{% endraw %}

然后在自定义的css文件中加上如下代码,文件目录在 这个文件是我自己定义的,你们可以自己修改
.my_div_style{ // 这里的类名要和md文件中 class="my_div_style"的一致,可以自定义(注意最好要特殊复杂一点不然容易类名重名污染其它内置的样式)
  color:#5246e2;
  background-color: #ef50a8;
}

然后在主题配置文件中_config_butterfly.yml下加入这个配置
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/background.css">

常用便签插件

 {% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

hexo中优化js的引入和css的引入

js中的defer和async

在博客魔改过程中，不可避免的会引入大量的第三方脚本（js），而基于页面读取js的加载顺序，每当浏览器在加载html的过程中遇到这样的标签时，浏览器会暂停继续构建html，而是优先执行当前的js脚本，等执行完毕后再继续加载后面的html。
至于外部脚本 这样的写法，更是要先下载脚本，然后再执行，之后才能继续处理剩余的页面。
无形中，多出了一大把的加载时间。这也是我们常说魔改是对博客速度的负优化的原因之一。

因此可以通过给添加defer和ansyc属性来实现异步加载，调整js的加载时间和顺序，确保浏览器构建HTML的过程一切顺利。

  • 1.具有defer特性的脚本不会阻塞页面。

  • 2.具有defer特性的脚本总是要等到DOM解析完毕，但在DOMContentLoaded事件之前执行。
    下面这个示例演示了上面所说的第二句话：

    <p>...content before scripts...</p>

    <script>
      document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
    </script>

    <script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

    <p>...content after scripts...</p>

    可以看出，先渲染html页面，然后再执行defer特性的js脚本执行完成，然后才执行DOMContenetLoaded事件,它会在defer特性的脚本下载且执行结束后才会被触发

    具有defer特性的脚本保持其相对顺序，就像常规脚本一样
    假如，我们有二个具有defer特性的脚本：long.js在前，small.js在后

    <script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
    <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>

    浏览器扫描页面寻找脚本，然后并行下载它们，以提高性能。因此，在上面的示例中，两个脚本是并行下载的。假如small.js可能会先下载完成。但是，defer特性除了告诉浏览器不要阻塞页面之外，还可以确保脚本执行的相对顺序。因此，即使 small.js先加载完成，它也需要等到long.js执行结束才会被执行。
    当我们需要先加载JavaScript库，然后再加载依赖于它的脚本时，这可能会很有用

    defer特性仅适用于外部脚本
    如果<script>脚本没有src，则会忽略defer特性。

async特性与defer有些类似。它也能够让脚本不阻塞页面。但是，在行为上二者有着重要的区别。
async特性意味着脚本是完全独立的：
1.浏览器不会因async脚本而阻塞（与defer类似）。
2.其他脚本不会等待async脚本加载完成，同样,async脚本也不会等待其他脚本。
3.DOMContentLoaded和异步脚本不会彼此等待：

  • DOMContentLoaded可能会发生在异步脚本之前（如果异步脚本在页面完成后才加载完成）
  • DOMContentLoaded也可能发生在异步脚本之后（如果异步脚本很短，或者是从HTTP缓存中加载的）
    换句话说，async脚本会在后台加载，并在加载就绪时运行。DOM和其他脚本不会等待它们，它们也不会等待其它的东西。async脚本就是一个会在加载完成时执行的完全独立的脚本。就这么简单，现在明白了吧
<p>...content before scripts...</p>

<script>
  document.addEventListener('DOMContentLoaded', () => alert("DOM ready!"));
</script>

<script async src="https://javascript.info/article/script-async-defer/long.js"></script>
<script async src="https://javascript.info/article/script-async-defer/small.js"></script>

<p>...content after scripts...</p>

1.页面内容立刻显示出来：加载写有async的脚本不会阻塞页面渲染。
2.DOMContentLoaded可能在async之前或之后触发，不能保证谁先谁后。
3.较小的脚本small.js排在第二位，但可能会比long.js这个长脚本先加载完成，所以small.js会先执行。虽然，可能是long.js先加载完成，如果它被缓存了的话，那么它就会先执行。换句话说，异步脚本以加载优先的顺序执行。
当我们将独立的第三方脚本集成到页面时，此时采用异步加载方式是非常棒的：计数器，广告等，因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：

<!-- Google Analytics 脚本通常是这样嵌入页面的 -->
<script async src="https://google-analytics.com/analytics.js"></script>

async和defer的适应内容

然后，必须考虑到页面加载时间和脚本加载顺序，以及各个脚本直接存在的依赖关系。
从参考文档来看，
1.defer特性除了告诉浏览器不要阻塞页面之外，还可以确保脚本执行的相对顺序。

  • 这个很适合使用到Vue和jquery等js框架的js脚本，给它们添加defer属性以后，可以确保HTML加载完毕，且js下载完毕后，各个js脚本继续按照引入的顺序执行，从而确保不会因为依赖缺失而报错。
    2.其他脚本不会等待async脚本加载完成，同样,async脚本也不会等待其他脚本。
  • 这个适合使用原生js，没有引用任何js框架，自己独立就能运行，且体量相对较小的js脚本，随页面加载同步下载执行。

css的异步加载

页面载入并渲染的流程可以简单理解为以下情况：

加载HTML资源->解析HTML->加载CSS资源，同时构建DOM树->解析CSS，同时渲染DOM树


与js的加载执行过程十分相似，加载CSS时也会造成HTML加载阻塞。
既然js可以异步加载，那CSS理论上应该也可以。虽然不能像js一样直接通过async和defer来定义加载顺序那么方便。

目前有效手段有两种，一种是通过定义一个无效media，使得该CSS引入优先级最低，再用onload="this.media='all'"在页面加载完成后纠正media，并加载CSS。
写法如下:
未加入异步加载：

<link rel="stylesheet" href="/example.css">

加入异步加载后：

<link rel="stylesheet" href="/example.css" media="defer" onload="this.media='all'">

注意此处的media=”defer”中的defer并无意义，是个无效media（只是方便理解才这么写）,目的是让浏览器认为这个CSS文件优先级非常低，从而在不阻塞的情况下进行加载。

加载完成以后，样式转为对所有设备生效是onload=”this.media=’all’”,但是其实还有其他的设备可供选择。

值 描述
screen 计算机屏幕（默认）。
tty 电传打字机以及类似的使用等宽字符网格的媒介
tv 电视机类型设备（低分辨率、有限的滚屏能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限带宽）。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

还有一种利用rel="preload"属性的方案，但是目前只有Chrome浏览器可以完美支持，等推广还需要很长一段时间，写法如下：

<link rel="preload" href="cssfile.css" as="style" onload="this.rel='stylesheet'">
CSS整合