Hexo自定义页面方法


网上都是这两种方法,但是会导致网页只有body里面的内容,即hexo处理后有一些标签消失了,这里将介绍第三种方法解决。

网上常见的两种方法

第一种方法是使用Hexo提供的跳过渲染配置,适用于整个目录的设置。具体步骤,打开博客根目录_config.yml,找到其中skip_render项,这个项目用来配置/source/中需要跳过渲染的文件或目录,例如希望跳过/source/test/里的所有文件渲染,可以配置为:

skip_render: test/**

匹配规则是一种类似正则的规则,官方给出的参考是这个。另外在测试这个功能的时候发现,Hexo的内部缓存不是特别好用,有时候你修改了配置但生成出来的内容不一定及时应用了新配置,最好在生成之前执行一下hexo clean命令,清除掉旧的生成文件和缓存。

第二种方法是给单个文件添加不应用模板的标记,适用于个别特殊文件的处理。例如我们的网站如果要使用百度统计,往往需要在根目录放一个html格式的验证文件,这个文件默认也会经过用主题模板渲染,避免渲染的办法就是在文件头部添加如下内容:

---
layout: false
---
我的方案

可是我实践以后发现hexo还是对网页进行了改动,<body><html>等标签都不见了,只剩下下面的内容。

<section class="error-page">
<div class="covers-main w3layouts">
<div class="wrapper">
<div class="main-cover w3">
<h1>
<a href="index.html" class="logo">Web Error Page</a>
</h1>
<h4 class="cover-para w3ls">404</h4>
<h5 class="form-title">UH OH! You're lost.</h5>
<p class="form-text">The page you are looking for does not exist. How you got here is a mystery. But you can click the button below to go back to the previous page </p>
<a href="javascript:history.go(-1);" class="back-button">Go Back</a>
<a href="/" class="back-button">Back to Home</a>
</div>
</div>
</div>
</section>

后来发现只要放在主题文件夹的source就能输出完整页面了,如\themes\xxxxxx\source,如下代码所示,消失的标签又回来了。

<!DOCTYPE html>
<html lang="en">
<head>
<title>404</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="The page you are looking for does not exist." />

<link rel="stylesheet" href="/404/css/style.css" type="text/css" media="all" />
<link href="/404/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<section class="error-page">
<div class="covers-main w3layouts">
<div class="wrapper">
<div class="main-cover w3">
<h1>
<a href="index.html" class="logo">Web Error Page</a>
</h1>
<h4 class="cover-para w3ls">404</h4>
<h5 class="form-title">UH OH! You're lost.</h5>
<p class="form-text">The page you are looking for does not exist. How you got here is a mystery. But you can click the button below to go back to the previous page </p>
<a href="javascript:history.go(-1);" class="back-button">Go Back</a>
<a href="/" class="back-button">Back to Home</a>
</div>
</div>
</div>
</section>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"rayId":"69596e22ad08eb79","version":"2021.8.1","r":1,"token":"4c34ab8739eb4bf09573777b5c48b854","si":10}'></script>
</body>
</html>

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