自定义Hexo主题

最新推荐文章于 2024-05-18 11:09:56 发布

王郁的小站

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量43

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_51426778/article/details/134172060

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

刚刚完成了Hexo博客主题的自定义，现在总结如下，让我们一起来看看如何打造一款属于自己的Hexo主题。

如何创建一个新主题以及如何切换主题在官网的doc中有说明，这里我们只讨论如何打造一个新的属于自己的模版。

方法

Hexo使用了模版进行渲染的方式来实现网页风格的自定义。其核心是一种嵌套、引用的风格实现对网页内容模块化管理。所以我也采取从外向里，抽丝剥茧，剥洋葱式的一层层展开来看其中的原理及如何去自定义。此文需要基本的HTML知识。

模版文件

所有的模版文件都放置在layout文件夹中，所有用到的资源（CSS，JavaScript，图片等）都放置在source文件夹中。

模版的根入口文件是layout下的layout.ejs文件。

这里的.ejs是模版采用的引擎，除了EJS，还有Haml和Jade，我大概看过Jade，比EJS更简洁，EJS更像HTML，我自己选择了EJS，原因是无需新学规则，还有就是官方提供的landscape也是采用的EJS，我的模版就是根据官方的landscape修改而来。

layout.ejs

我们先来看看这个layout.ejs的内容：

<!DOCTYPE html>
<html>
<%- partial('_partial/head') %>
<body>
<%- partial('_partial/wycode-nav') %>
<%- partial('_partial/blog-nav') %>
<div class="container">
    <div class="row">
        <div class="content"><%- body %></div>
    </div>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<%- partial('_partial/after-footer') %>
</body>
</html>

可以看到以上就是典型的HTML文件框架。

重点来了：

这里唯一的区别就是多了很多<%- %>，凡是在这个<%- %>里面的部分就是EJS模版的代码部分，而partial('_partial/head')的意思就是引用了一个模块，位置是_partial文件夹的head.ejs。

head.ejs

然后我们看看这个head.ejs的内容：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%
    var title = page.title;

    if (is_archive()) {
        title = __('archive_a');

        if (is_month()) {
            title += ': ' + page.year + '/' + page.month;
        } else if (is_year()) {
            title += ': ' + page.year;
        }
    } else if (is_category()) {
        title = __('category') + ': ' + page.category;
    } else if (is_tag()) {
        title = __('tag') + ': ' + page.tag;
    }
    %>
    <title>
        <% if (title){ %>
        <%= title %> |
        <% } %>
        <%= config.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <% if (theme.rss){ %>
    <link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
    <% } %>
    <% if (theme.favicon){ %>
    <link rel="icon" href="<%- url_for(theme.favicon) %>">
    <% } %>
    <!-- Bootstrap -->
    <%- css('flat/dist/css/vendor/bootstrap.min.css') %>
    <%- css('flat/dist/css/flat-ui.min') %>
    <%- css('font-awesome-4.7.0/css/font-awesome.min') %>
    <%- css('highlight/styles/monokai-sublime') %>
    <%- css('css/blog') %>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <%- js('flat/dist/js/vendor/html5shiv') %>
    <%- js('flat/dist/js/vendor/respond.min') %>
    <![endif]-->
</head>

可以看到这个head.ejs就是HTML中<head></head>标签的内容，这里我替换了原有的CSS，使用了Bootstrap框架。

剩下的就是依次类推了。

附：layout文件结构

layout
│  archive.ejs
│  category.ejs
│  index.ejs
│  layout.ejs
│  page.ejs
│  post.ejs
│  tag.ejs
│
├─_partial
│  │  after-footer.ejs
│  │  archive-post.ejs
│  │  archive.ejs
│  │  article.ejs
│  │  blog-nav.ejs
│  │  footer.ejs
│  │  head.ejs
│  │  sidebar.ejs
│  │  wycode-nav.ejs
│  │
│  └─post
│          category.ejs
│          date.ejs
│          nav.ejs
│          tag.ejs
│          title.ejs
│
└─_widget
        archive.ejs
        category.ejs
        recent_posts.ejs
        tag.ejs
        tagcloud.ejs

本文原始发表于: https://wycode.cn/blog/theme, 转载请注明出处