hexo配置教程、主题使用及涉及的技术学习

赫萝的红苹果

已于 2024-04-19 11:02:47 修改

阅读量668

点赞数 19

文章标签：学习前端

于 2024-04-18 20:52:23 首次发布

本文链接：https://blog.csdn.net/weixin_43975276/article/details/137745063

版权

一、背景

最近,一直想做一个属于自己的网站.可以从零开始搭建一个网站,顺便可以把日常中学到的技术用于实战,还可以顺便记录自己的所思所感,记录成长的过程.

方案

一开始的方案是从零开始,模仿常见个人博客的设计,基于vue+Springboot+MySQL的去实现网站.

新建项目之后,发现vue项目的页面UI设计比想象中要麻烦得多.考虑到时间成本,于是打算在github上面找合适的项目做二次开发.

hexo算是目前比较火的一款个人博客开源项目,并且里面好看的主题也很多,刚好契合我的需求.虽然hexo是一款纯前端的项目,没有自己的数据库,但可以稍微学习一下语法,给它配上服务器来进一步拓展功能.

在众多的主题中,看上了一款名叫livemylife的主题.决定就用这款主题来二次开发.

二、配置(windows)

github就有详细的配置教程

2.1、安装node.js

node官网,推荐下载14.21.3版本的,版本不能太低.下载msi文件,无脑点点点安装就好了.

2.2、安装hexo

打开命令行,执行命令安装脚手架

npm install hexo-cli -g

2.3、创建初始化项目

hexo init blog

等待完成就创建了一个项目名为blog的hexo项目.

2.4、拉取LiveMyLife主题项目(另开一个项目)

git clone https://github.com/V-Vincen/hexo-theme-livemylife.git

2.5、替换初始化项目配置文件夹

打开一开始创建的项目,用LiveMyLife主题项目的文件替换初始化项目的以下文件或文件夹(存在的话).

scaffolds source themes _config.landscape.yml _config.yml package.json yarn.lock

2.6、启动项目

命令行打开初始化项目的目录,先后执行执行以下命令,等待项目启动完毕.

npm install
hexo server

2.7、配置配置文件

然后对着最前面提到的github配置教程,就可以将配置的一些信息替换成自己想要的内容.

2.8、启动效果

三、涉及技术的语法

想要二次开发项目,就想要学习项目使用到的技术栈.

项目中主要用到的不常见的一种语言是ejs,这是一种模板语言,可以将ejs文件当成一块块的代码模块进行使用,这样同样的代码就不需要重复写.和java中的jsp差不多,可以根据配置灵活地判断生成所需的前端代码.

不过,本质上还是前端三件套.通过ejs来生成前端代码.

3.1、ejs语法

在ejs文件中引入ejs模板。

方式一将当前ejs文件的代码插入到模板ejs文件

ejs文件采用如下语法引入page.ejs的文件

---
layout: page
---

在该ejs文件下方可以加入各种html标签。如下

---
layout: page
---
<div class="add-dix">
    <p>add dev</p>
</div>

下方加入的html代码会默认替换到模板文件page,ejs的<%- body %>标签，如下

<!DOCTYPE html>
<html lang="en">
	<body class="body--light>
		<%- body %>
	</body>
</html>

最终生成的html文件如下

<!DOCTYPE html>
<html lang="en">
	<body class="body--light>
		<div class="add-dix">
            <p>add dev</p>
        </div>
	</body>
</html>

方式二在当前ejs文件引入ejs文件

在_partial目录下有一个anchorjs.ejs文件

        <div class="add-dix">
            <p>add dev</p>
        </div>

在新文件中引入该文件

<!DOCTYPE html>
<html lang="en">
	<body class="body--light>
		<div class="add-dix">
            <%- partial('_partial/anchorjs') %>
        </div>
	</body>
</html>

最终会生成如下前端代码

<!DOCTYPE html>
<html lang="en">
	<body class="body--light>
		<div class="add-dix">
            <div class="add-dix">
              <p>add dev</p>
            </div>
        </div>
	</body>
</html>

读取配置文件的值

有两种读取配置文件的方式config.xxx的方式，或者config['xxx']。

_config.yml文件

themecolor:
  enable: true
  mode: dark # themecolor mode light or dark, default light

ejs文件中要使用对象的属性，需要先判空，和java中的对象差不多

<% if (config.themecolor && config['themecolor']['enable']) { %>

参数嵌入前端代码

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

<%- ... %>

如下，会读取config.yml文件的config.root配置嵌入代码中。同时这个标签采用非转义的方式嵌入html标签，比如<%- <h1>hello</h1> %>，会网页中输出标题1格式的hello。

<%- config.root %>

<%= ... %>

和<%- ... %>一样，也是嵌入配置文件的内容，但和上面不一样的是，这个标签输出的是转义的html标签，比如代码里面有<%= <h1>hello</h1> %>，网页中会把这个内容当成字符串全部输出，输出<h>hello</h>

四、前端的小知识

ejs中的if语句，判断条件为0，false，空这几种情况才不符合条件，其他的如正数，字符串，true都是符合条件。