关于Hexo理解


preface

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

Hexo + Github搭建Blog教程(2020)

装修教程hexo官方文档

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

Matery主题个性化修改

①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%);
}

②将导航栏变为透明

因为导航栏看着占位子,所以在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');

③设置独立的界面

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

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

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

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

④md文档中加入html语句

markdown中支持html语句。

<!-- 使用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" 可以更改位置 -->
<!-- 使用img来更改图片大小 -->
<img src="图片路径" style="zoom:50%">
<!-- 添加上下标 -->
H<sub>2</sub>O  CO<sub>2</sub>
爆米<sup>TM</sup>

⑤图标

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

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


⑥更多的区块样式

使用Hexo-admonition 插件

这是自带的,使用>

第一种类型

使用 note

第二种类型

使用 info todo

第三种类型

使用 warning attention caution

第四种类型

使用 error failure missing fail

⑨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') %>
    <% } %>

CNAME说明
由于更换了域名,hexo d之后总是要去github仓库的设置里改部署地址。
解决方法:hexo根目录的source文件夹下,新建CNAME(无后缀)写入url.

自定义字体
https://yafine-blog.cn/posts/49fb.html

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主题

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年。


文章作者: ╯晓~
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 ╯晓~ !
评论
  目录