编写hexo主题,具体代码
时间: 2023-07-03 15:22:45 浏览: 178
编写 Hexo 主题需要掌握前端开发技术,主要包括 HTML、CSS、JavaScript 等。以下是一个简单的 Hexo 主题示例,供参考:
1. 创建主题目录
在 Hexo 的根目录下创建一个名为 `my-theme` 的目录,用来存放主题相关的文件。
2. 创建主题文件
在 `my-theme` 目录下创建以下文件:
- `layout/_partial/head.ejs`:页面头部信息,包括 `<head>` 标签和 CSS 样式文件引入。
- `layout/_partial/header.ejs`:页面头部,包括网站标题、导航栏等。
- `layout/_partial/footer.ejs`:页面底部,包括版权信息、友情链接等。
- `layout/_partial/sidebar.ejs`:侧边栏,包括分类、标签、归档等内容。
- `layout/_partial/pagination.ejs`:分页组件,用于文章列表分页。
- `layout/_partial/scripts.ejs`:页面底部的 JavaScript 脚本引入。
- `layout/index.ejs`:网站首页模板。
- `layout/post.ejs`:文章详情页面模板。
- `layout/page.ejs`:独立页面模板。
3. 编写模板文件
打开 `index.ejs` 文件,输入以下代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<%- partial('head') %>
<body>
<%- partial('header') %>
<main class="container">
<div class="row">
<div class="col-md-8">
<%- partial('article') %>
<%- partial('pagination') %>
</div>
<div class="col-md-4">
<%- partial('sidebar') %>
</div>
</div>
</main>
<%- partial('footer') %>
<%- partial('scripts') %>
</body>
</html>
```
以上代码是一个简单的页面布局模板,其中使用了 Bootstrap 作为页面样式框架。`<%- partial('head') %>`、`<%- partial('header') %>`、`<%- partial('article') %>` 等是 EJS 引擎的语法,用于引入模板中的其他文件。
4. 编写 CSS 样式
在 `my-theme` 目录下创建一个名为 `css` 的目录,用于存放 CSS 样式文件。在 `css` 目录下创建一个名为 `style.css` 的文件,输入以下代码:
```css
/* 导航栏样式 */
.navbar-brand {
font-size: 24px;
font-weight: bold;
}
.navbar-nav > li > a {
color: #333;
font-size: 16px;
font-weight: bold;
}
.navbar-nav > li.active > a {
color: #fff;
background-color: #333;
}
/* 文章列表样式 */
.article-title {
font-size: 24px;
margin-bottom: 10px;
}
.article-meta {
color: #999;
margin-bottom: 20px;
}
/* 分页组件样式 */
.pagination {
margin-top: 20px;
}
.pagination > li > a,
.pagination > li > span {
padding: 5px 10px;
border: 1px solid #ccc;
}
.pagination > li.active > a,
.pagination > li.active > span {
background-color: #333;
color: #fff;
border-color: #333;
}
/* 侧边栏样式 */
.sidebar-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-list > li > a {
color: #333;
}
```
以上代码定义了导航栏、文章列表、分页组件、侧边栏等样式。
5. 集成 JavaScript 脚本
在 `my-theme` 目录下创建一个名为 `js` 的目录,用于存放 JavaScript 脚本文件。在 `js` 目录下创建一个名为 `main.js` 的文件,输入以下代码:
```js
$(function () {
// 导航栏激活状态
$('.navbar-nav > li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
```
以上代码使用了 jQuery,用于实现导航栏点击激活状态。
6. 应用主题
将 `my-theme` 目录复制到 Hexo 的 `themes` 目录下,然后在 Hexo 的配置文件 `_config.yml` 中设置主题名称为 `my-theme`:
```
theme: my-theme
```
执行 `hexo generate` 命令重新生成静态文件,然后执行 `hexo server` 命令启动本地服务器,即可预览新主题。
阅读全文