Jekyll博客

Hyde-Blogger-Template — Jekyll 博客模板

作者 zaferzent

将 Jekyll 的 Hyde 主题移植到 Blogger/Blogspot 平台的双栏博客模板，带突出侧边栏与可切换配色。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

将 Jekyll 的 Hyde 主题适配到 Blogger/Blogspot 平台

两栏布局，突出侧边栏搭配简洁内容区

内置八种基于 base16 配色的可选主题

支持通过 layout-reverse 类把侧边栏切换到右侧

侧边栏内容默认吸底，可通过移除 .sidebar-sticky 改为正常流式排列

附带 jQuery Cookie 配色切换器，刷新页面后不保留选择

模板详细介绍

Hyde-Blogger-Template 是把 Jekyll 主题 Hyde 适配到 Blogger（Blogspot）平台的版本，原 Jekyll 版本由 poole 维护。模板采用两栏布局，一侧是醒目的侧边栏，另一侧是内容区，整体风格简洁。

模板提供若干可配置项，主要通过 <body> 元素上的 class 控制：侧边栏导航链接列表、侧边栏内容吸底（.sidebar-sticky，移除后内容自上而下正常排列）、八种基于 base16 配色方案的主题、以及用单个 class 将页面方向反转（layout-reverse，侧边栏移到右侧）。主题与反转布局可以叠加使用。此外还包含一个基于 jQuery Cookie 的配色切换器，但刷新页面后不会保留所选配色。

使用范围限于 Blogger/Blogspot 博客，安装方式为在 Blogger 后台的“模板 > 修改 HTML”或“模板 > 备份/恢复”中导入。仓库有两个分支，master 用于开发并接收 pull request，gh-pages 用于托管站点且含分析代码，README 建议避免使用后者。代码以 MIT 许可开源。

Jekyll博客

适合你的项目吗？

适用场景

在 Blogger 上搭建以文字内容为主的双栏博客
需要侧边栏放置导航链接或个人简介的博客
希望通过切换 class 快速更换配色方案或左右布局
从 Jekyll Hyde 迁移到 Blogger 并保持相近外观

适合人群

使用 Blogger/Blogspot 平台的博主
偏好两栏、侧边栏突出的简洁排版
需要少量主题配色与布局开关的用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
仅适用于 Blogger/Blogspot 博客，无法直接用于其他静态站点生成器
2
安装方式：Blogger 后台“模板 > 修改 HTML”或“模板 > 备份/恢复”导入
3
主题、反转布局等选项通过 <body> 元素的 class 设置
4
仓库 master 分支用于开发并接收 pull request，gh-pages 分支含分析代码，建议避免使用
5
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

该模板仅能在 Blogger/Blogspot 平台使用，无法直接用于其他静态站点生成器或自建站点。
gh-pages 分支用于托管站点并包含分析跟踪代码，README 明确建议避免使用该分支。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Only available on Blogger / Blogspot based blogs.
README 原文

`gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
README 原文

https://github.com/zaferzent/Hyde-Blogger-Template/blob/master/LICENSE.md https://github.com/zaferzent/Hyde-Blogger-Template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 72 / 100
技术栈: Jekyll
网站类型: 博客

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2024-01-11
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Jekyll。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 3bc71d9610e307c8858aa473bf32ea6527468ea018c35fc748d374e61af671ec

2026-10-02T10:50:10.886Z

来源文件 / 仓库

# Hyde Blogger Template

Hyde adapted into the Blogger from Jekyll. The Jekyll version is [here](https://github.com/poole/hyde). 


Hyde is a brazen two-column [Blogger](http://blogger.com) template that pairs a prominent sidebar with uncomplicated content.

[Demo](http://hydebloggertemplate.blogspot.com/) 

![Hyde screenshot](https://3.bp.blogspot.com/-DFxQYS5Of-g/WSCaKbv_-FI/AAAAAAAAGEE/3sjeS38qsmYIDicil3PSDdKxmA4RRiLlACPcB/s1600/hyde-blogger-template.png)


## Contents

- [Usage](#usage)
- [Options](#options)
  - [Sidebar menu](#sidebar-menu)
  - [Sticky sidebar content](#sticky-sidebar-content)
  - [Themes](#themes)
  - [Jquery Cookie Theme Switcher](#jquery-cookie-theme-switcher)
  - [Reverse layout](#reverse-layout)
- [Development](#development)
- [Author](#author)
- [License](#license)


## Usage

Only available on Blogger / Blogspot based blogs. Install `Blogger dashboard > Template > Edit HTML` or `Blogger dashboard > Template > Backup / Restore`

## Options

Hyde includes some customizable options, typically applied via classes on the `<body>` element.


### Sidebar menu

Create a list of links in the sidebar.

```html
<nav class='sidebar-nav'>
    <a class='sidebar-nav-item active' href='/'>Home</a>
    <a class='sidebar-nav-item' href='/p/example-page.html'>Example Page</a>
    <a class='sidebar-nav-item' href=''>Download</a>
    <a class='sidebar-nav-item' href=''>GitHub project</a>
</nav>
```

### Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom.

```html
<!-- Default sidebar -->
<div class="sidebar">
  <div class="container sidebar-sticky">
    ...
  </div>
</div>

<!-- Modified sidebar -->
<div class="sidebar">
  <div class="container">
    ...
  </div>
</div>
```


### Themes

Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).

![Hyde in red](https://3.bp.blogspot.com/-ozes_qXvKRI/WSCfgfbQ8gI/AAAAAAAAGEU/i3zlhQv6t6MRx7WmPR0u1NeVJW9hU-AfwCLcB/s1600/hyde-other-theme.png)

There are eight themes available at this time.

![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)

To use a theme, add anyone of the available theme classes to the `<body>` element.

```html
<body class="theme-base-08">
  ...
</body>
```

### Jquery Cookie Theme Switcher

Use the jQuery Cookie Theme Switcher on Blogger. *Does not change when the page is refreshed

![Jquery Theme Switcher](https://1.bp.blogspot.com/-XAa7vuTEeB0/WSCh2ir-p0I/AAAAAAAAGEo/XP-SIE-J158OEtoHgHW33puZUh5tEdJNgCLcB/s1600/jquery-theme-switcher.png)

If you want to remove.
```html
<ul class='cscheme'>
    <li class='default' id='default'><a href=''/></li>
    <li class='red' id='orange'><a href=''/></li>
    <li class='yellow' id='blue'><a href=''/></li>
    <li class='orange' id='green'><a href=''/></li>
    <li class='green' id='rosse'><a href=''/></li>
    <li class='cyan' id='dark'><a href=''/></li>
    <li class='blue' id='mavi'><a href=''/></li>
    <li class='magenta' id='mor'><a href=''/></li>
    <li class='brown' id='kahve'><a href=''/></li>
</ul>
<a class='color-div' id='sright' value='s'>Sidebar Right</a>
```

Using together optional theme and reverse layout.

```html
<body class="theme-base-08 layout-reverse">
...
</body>
```

### Reverse layout

![Hyde with reverse layout](https://3.bp.blogspot.com/-x5_0S9nCk5s/WSCfqUFac5I/AAAAAAAAGEc/77-W0EBjlzkjwGcg_j9bfnpQAvY31D6zQCLcB/s1600/hyde-sidebar-right.png)

Hyde's page orientation can be reversed with a single class.

```html
<body class="layout-reverse">
  ...
</body>
```



## Development

Hyde has two branches, but only one is used for active development.

- `master` for development.  **All pull requests should be submitted against `master`.**
- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**


## Author

**Zafer Zent**
- <https://github.com/zaferzent>
- <https://twitter.com/zaferzent>


## License

Open sourced under the [MIT license](LICENSE.md).

<3

反馈内容错误