Hexo基础

preface

HEXO 是一个由 node.js 提供动力的静态站点生成器。它为 web 开发提供了强大的 API 来集成现有的 npm 包，并通过编程将某些内容插入到文章中。

简单来说，hexo 是一个博客的框架，相当于房子的结构。matery 是一个 hexo 下的主题，相当于房子的样式。

参考资料：

• hexo官方文档
• Hexo + Github搭建Blog教程（2020）
• hexo 安装教程
• 装修教程
• awesome-hexo

嗯，看上面几个文档，就应该可以搭建出一个免费的静态网页了。

主题修改

说明：主题为 Matery

1. TOC目录的展开

2021.3.7更新

在 matery 目录下的_config.yml文件中,将 showToggleBtn 设为 true
参考：GITHUB中的修改

toc:
  enable: true
  heading: h1,h2, h3, h4
  collapseDepth: 2 
  showToggleBtn: true #是否展开目录

颜色不太好看，去matery/layout/_partial/post-detail-toc.ejs中，

找到：

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>

因为bg-color是一个已经定义了的颜色样式，所以
将 bg-color 改为 toc-color，然后在 matery.css 中加入颜色样式

.toc-color {
    background-image: linear-gradient(to right, #C471ED 0%, #F64F59 100%);
}

2. 将导航栏变为透明

因为导航栏看着占位子，所以在matery.js中

    /*回到顶部*/
    $('#backTop').click(function () {
        $('body,html').animate({scrollTop: 0}, 400);
        return false;
    });

    /*监听滚动条位置*/
    let $nav = $('#headNav');
    let $backTop = $('.top-scroll');
    // 当页面处于文章中部的时候刷新页面，因为此时无滚动，所以需要判断位置,给导航加上绿色。
    showOrHideNavBg($(window).scrollTop());
    $(window).scroll(function () {
        /* 回到顶部按钮根据滚动条的位置的显示和隐藏.*/
        let scroll = $(window).scrollTop();
        showOrHideNavBg(scroll);
    });

    function showOrHideNavBg(position) {
        let showPosition = 100;
        if (position < showPosition) {
            $nav.addClass('nav-transparent');
            $backTop.slideUp(300);
        } else {
            $nav.removeClass('nav-transparent');
            $backTop.slideDown(300);
        }
    }

将这三条语句删去：

let $nav = $('#headNav');

$nav.addClass('nav-transparent');

$nav.removeClass('nav-transparent');

3. 设置独立的界面

• 在根目录sourse中新建zone文件夹
• 找到hexo的配置文件_config.yml
• 跳过zone文件夹的渲染，即 skip_render: zone/**

效果：独立的html界面可以直接使用了

[超级按钮](/zone/mouseover)

这是一个跳转，至本站根文件下的zone/mouseover
注释：mouseover中含有index.html，即完整独立的界面

4. md文档中加入html语句

markdown中支持html语句。

4.1 更改字体样式

<!-- 使用font -->
<font size="2" face="verdana" color="green">content</font>


<!-- 使用p -->
<p style="font-family:verdana;font-size:80%;color:green">
This is a paragraph with some text in it.</p>

<!-- p 中 align="right" 可以更改位置 -->

4.2 更改图片大小

<img src="图片路径" style="zoom:50%">

4.3 添加上下标

H<sub>2</sub>O  CO<sub>2</sub>
爆米<sup>TM</sup>

4.4 用于描述文档或文档某个部分的细节

<details>
<summary>Where are you from?</summary>
I'm from the Earth. Water Planet!
</details>

5. 图标

http://www.fontawesome.com.cn/faicons/

直接 fas fa-name 可以使用配置好的图标

6. 更多的区块样式

使用Hexo-admonition 插件

这是自带的，使用>

第一种类型

使用 note

第二种类型

使用 info todo

第三种类型

使用 warning attention caution

第四种类型

使用 error failure missing fail

7. 自定义字体

https://yafine-blog.cn/posts/49fb.html

8. EJS

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

代码实例：

    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

    <% if (site.tags && site.tags.length > 0) { %>
    <%- partial('_widget/tag-wordcloud') %>
    <% } %>

rebuild

//2020.11.30

hexo更新，改动改崩了，所以重新弄一个，wuwuwu~

以后好好写博客，不再整了，够用就行。

做事之前先备份

步骤：

1. nodejs，git准备
2. npm install hexo-cli -g
3. hexo init blog hexo初始化你的blog文件夹（需新建）
4. cd blog
5. npm install
6. hexo s 开启本地服务
7. 添加matery主题
8. 修改自己的matery主题
9. 与 github 服务器连通

other

关于butterfly主题

2021.03.10体验了一下butterfly主题，还好，（想去搬运些与matery不同的样式）但要求hexo>5.0.0，更改hexo的package.json中的dependencies中的hexo版本号，再管理员模式npm update即可。

但5.4.0版本与matery主题还是出错，{ }无法正常显示。最后还是降低hexo版本至4.2.1，毕竟matery主题陪伴了这么久，要一直走下去。

如何查看网站字体

F12 -> ELEMENTS -> Computed

关于域名

查了一下，域名不可以买断，com域名买的时候45，2021年续费68，最多买10年。