当前位置: 首页 > 后端技术 > Node.js

Hexo原理分析

时间:2023-04-03 18:27:00 Node.js

是昨天早上让学长投阿里简历的时候写的,没想到晚上接到了电话面试。..从早到晚。..只有十个小时。..为阿里的效率跪下。..我真的一点准备都没有,全程都在发呆,感觉自己表现的很差。..今天回想起来,仔细想想昨天的问题,觉得其实问的问题很基础。大部分都是我以前做东西的时候遇到的问题。回答不流畅,一方面是因为紧张,另一方面是对技术没有深入的了解。昨天面试官看到我有个人网站,简单说一下hexo的原理和机制。我觉得hexo就是markdown文件的重新渲染和排列。今日想想,感觉他想问的不止于此。所以我决定尝试分析从页面创建到部署的整个过程。还有很多东西要学!我之所以回答hexo是markdown文件的重新渲染和排列。我想我不会出错,这是hexo的官方介绍:Hexo是一个快速、简洁、高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,秒级生成主题精美的静态网页。然而,我感到不满意。原因是我的关注点很小,只停留在博客内容本身。这和我最近一直在做的页面美观度有关系。但是如果你看看整个博客环境,有很多东西需要研究和学习。本文将尝试从以下几个方面进行分析。内容hexo文件夹结构markdown写的博客文章使用yaml写的配置文件来表达hexo的模板引擎独立的hexo主题个性化主页调整细节发布Git版本控制系统GitHubPages部署到你自己的域名称内容内容是博客的灵魂。hexo的文件夹结构├──_config.yml├──db.json├──node_modules├──package.json├──public├──scaffolds├──source#所有文章文件都放在这里└──themes#themefolder_config.yml站点的配置文件。db.json缓存文件node_modules安装插件和hexo需要的一些node.js模块。package.json应用信息,配置hexo运行所需的js包。public最后页面看到的所有内容scaffoldsTemplate文件夹。创建新文章时,默认包含相应模板的内容。source资源文件夹是存放用户资源的地方。所有源文件都将保存在_post文件夹中。以(下划线)开头的文件/文件夹和隐藏文件将被忽略,posts文件夹除外。Markdown和HTML文件被解析并放在public文件夹中,而其他文件被复制过来。themes存放主题文件,hexo会根据主题生成静态页面。用markdown写的博文选择hexo的原因之一就是它支持markdown。用markdown写文章的感觉真的很爽。你只需要记住几个简单的语法,就可以把所有的注意力都放在文字本身上,而不必过多关注排版。yaml编写的配置文件yaml是一种专门用来编写配置文件的语言。它使用首行的缩进来表示层级关系,方便阅读和书写。配置文件一般用于设置所需的环境。hexo涉及的配置文件有两个,一个位于主目录下,一个位于主题目录下。通常主目录下的配置文件是用来配置整个站点的,比如站点的基本信息、文章的布局、写作格式、部署到github的参数等等。theme目录下的配置文件是用来配置主题的,比如站点导航栏的设置,一些插件的设置等。表现表现是博主的个性。Hexo的模板引擎模板引擎的作用是将界面和数据分离。最简单的原理就是用数据替换模板内容中指定的地方,实现业务代码和逻辑代码的分离。Hexo默认使用的是ejs,同类型的还有很多,比如jade,swig。我选择的主题是用翡翠。Hexo首先解析md文件,然后根据布局判断布局类型,再调用其他文件,这样每个块的内容都是独立的,提高了代码的复用性。最终会生成一个html页面。Jade采用缩进语法格式,类似python,看起来很舒服。我比较喜欢这种风格。在hexo中使用jade需要安装相应的模块,否则无法使用。一个独立于hexo主题的个性化主页如果你的博客使用一个主题,你会觉得很单调。可以自己写一个独立于主题风格的主页。在这里,有必要了解一下hexo每次部署的过程。每次执行hexog命令时,hexo都会遍历主题文件中的source目录。这里的源码主要包括css、fonts、js等文件建立索引。根据索引,主题文件将生成到公共文件中。此时的public文件就是一个由html、js、css等内容组成的blog,也就是网页的根目录。hexod通过部署,将public文件夹的内容以git方式推送到github指定项目的指定分支,由github展示。当然你也可以部署在自己的域名上。node_modules中有一系列文件,用于hexo中各个页面的默认渲染。如果要开启个性化主页,需要删除hexo-generator-index。同时将主题目录下的source目录作为你的个性化页面根目录。细节的调整以28原则为基础,细节调整80%。我花了很长时间来调整布局、颜色和整体效果。有一个功能,你要不要,放在哪里,你要考虑很久。我做了三个版本的导航栏,一个是折叠式汉堡包按钮,一个是定宽自适应屏,不过最后还是选择了这个样子。并且去掉了hexo自带的分类和标签云。只剩下首页,文章,大概三个内容。文字的排版也很头疼。我还是觉得首页上庄子的那句话很别扭。应该做成竖版的,效果可能会更好。还有一点要注意,面试的时候要求你解释cssbox模型。我想我对盒子模型还是比较熟悉的,它抽象地定义了网页中元素的布局和排版,他犹豫了一下,说到内边距、外边距和边框。回顾一下定义,CSScss盒模型,也称为盒模型(BoxModel),包括元素内容(content)、内边距(padding)、边框(border)、外边距(margin)等几个元素).这就是定义。..只是觉得学东西太浮躁,学了就想用,忽略了对基本概念的准确记忆和理解。发布发布使博客栩栩如生。Git版本控制系统这是我第一次正视git。面试官问我项目部署在哪里,我脱口而出是github。他问我怎么部署,我说我用客户端。..他又问我你不会用git,我没法接受。..以前确实见过git版本控制系统,安装在电脑上,但毕竟是做东西,放在本地也没问题。GitHub也有专为我这种懒人设计的客户端,所以基本没什么用。到达。但是想到在一个企业里,很多人同时在做一个项目,它的变化和突发情况是不可预知的。如果没有有效的版本控制工具,肯定会给企业带来很大的损失。以后会练习使用git部署。网上的GitHubPages部分有很多傻瓜教程,我也是一步步照着做的,没有遇到什么问题。但仔细一问,原理是什么,机制是什么?真不知道,像远程部署,这部分才是我应该重点学习的。要部署到您自己的域名,首先要购买域名、服务器或虚拟主机。我在hostpark上买的虚拟主机,加上域名,200+一年,不算很贵。域名和服务器都可用,需要解析。网上有教程。部署好后开始尝试直接在hostpark上添加WordPress,主要是分析网站的文件夹结构。搞清楚后。因为之前用过filezilla给远程主机传输文件,所以觉得原理是一样的。因为部署在github上的页面都在public文件夹下,所以只需要将文件传到虚拟主机的public即可。但是我发现一个问题,这太傻了。为什么没有自动化部署的工具,于是想起之前看过的技术帖,突然明白了一些工具的用处。总结当我只关注如何让页面看起来好看时,我根本不关心更大的问题。部署和后台数据优化都是应该深挖的东西,我草草跳过了。还有一个问题,有没有更好的逐帧渲染页面的方法,暂时没关注比较流行的方法。还是要多看社区博客,仔细看问题,稍微了解一下。练习时,不能忽视基本概念的记忆和准确表达。关于面试,调整心态。记得孔子说过:“无患则无位,有患则立”。机会总是有的,就看你能不能把握住了。我的个人网站:http://www.changshunwang.com