HTML启动器

club-website-template — HTML 启动器模板

作者 James471

基于 Jekyll 的社团网站模板,通过修改 Markdown 前置数据和 YAML 数据文件定制背景、字体、活动与成员信息,无需改动布局文件。

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

Jekyll 模板,含 5 个布局与 3 个 include,README 称定制无需改动布局文件

02

背景、字体与字体颜色通过 _config.yml 和 Markdown front matter 配置

03

活动内容放在 _events 文件夹,pastEvents 页面自动列出并支持子文件夹组织

04

成员信息由 people.md 与 _data/people.yml 驱动,展示姓名和照片

05

社交链接集中在 _data/social.yml,由 footer 引入 socialLinks.html 渲染

06

提供透明 logo 占位图和社交图标资源,采用 MIT 许可证

模板详细介绍

这是一个面向社团的 Jekyll 网站模板,README 说明其特点是无需编写代码即可定制:背景、字体和字体颜色均可配置,使用者只需提供图片并写明文件路径、font-family 与字体颜色。模板包含 5 个布局(indexLayout、homeLayout、eventsLayout、pastEventsLayout、peopleLayout)和 3 个 include(header、footer、socialLinks)。首页展示社团名称、logo 与其他页面链接,名称和链接在 _config.yml 中配置,背景与字体在 index.md 的 front matter 中设置;home.md 控制主页除页眉页脚外的内容;活动页字体与背景在 _config.yml 中配置,_events 文件夹存放活动 Markdown,可建子文件夹组织且不影响代码;pastEvents.md 自动列出 _events 中的活动作为归档;people.md 配合 _data/people.yml 列出历任负责人或成员的姓名与照片。社交链接由 footer 引入 socialLinks.html,链接在 _data/social.yml 中增删改。模板提供透明 logo 占位图 assets/img/logo.png 以及 assets/img/social/ 下的社交图标。README 未提供具体框架版本号、性能或生产环境适用性的说明。

HTML启动器

适合你的项目吗?

适用场景

  • 为学校或社区社团搭建包含首页、主页、活动归档和成员介绍的静态网站
  • 用 Markdown 维护活动记录,并让归档页面自动汇总 _events 中的内容
  • 在不修改布局代码的前提下,通过配置调整网站背景、字体和社交链接

适合人群

  • 熟悉或愿意使用 Jekyll 与 Ruby 工具链的社团维护者
  • 希望以 Markdown 和 YAML 数据文件管理内容的非前端开发者
  • 需要活动归档与历任成员展示页面的社团组织

上手与定制指南

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

  1. 1

    需先安装 Ruby,在 Ruby 命令行中执行 gem install jekyll

  2. 2

    通过仓库的 Use this template 按钮创建公开 fork,再克隆到本地并运行 bundle install

  3. 3

    本地测试前需在 _config.yml 中注释掉 baseurl 变量

  4. 4

    本地预览执行 bundle exec jekyll serve,浏览器访问 http://localhost:4000

  5. 5

    README 建议可托管在 GitHub Pages,或托管于 IISERM;具体托管步骤需联系作者

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 使用该模板需要先安装 Ruby 环境,并从 Ruby 官网下载安装。
  • 需要安装 Jekyll,在 Ruby 命令行中执行 gem install jekyll。
  • 需通过仓库的 Use this template 按钮创建 fork,克隆到本地后运行 bundle install 才能使用。
  • 本地测试前必须在 _config.yml 中注释掉 baseurl 变量,否则无法正常本地预览。
  • 托管方面,README 建议使用社团的 GitHub 账号部署到 GitHub Pages,或托管在 IISERM;具体托管步骤需联系作者或 Turing Club 负责人。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Install ruby. You can download ruby from its [official website](https://rubyinstaller.org/downloads/)

README 原文

Go to start and search 'ruby'. You will find ```start command prompt with ruby```. Open it and type ```gem install jekyll``` and press enter. If you use mac or linux, I assume you know what to do.

README 原文

Click on ```Use this template button``` on the page of this repository. You will get the option to fork this repo. Make a public fork if you want to receive pull requests(i.e., receive the changes that I might make in future in this template). Next, clone your fork locally. Then, open ruby command prompt and cd to the directory of this repo. Run ```bundle install```. Now you should be set.

README 原文

You must comment the variable ```baseurl``` in your ```_config.yml``` file before testing this locally. To test locally, cd to the directory and run ```bundle exec jekyll serve```. To make more changes, see the usage section.

README 原文

Contact [me](mailto:[email protected]) or the convenor of Turing Club. You can host your website on Github Pages using the github account of your club or you can host it at [IISERM](https://iiserm.github.io).

README 原文
https://github.com/James471/club-website-template/blob/master/LICENSE.txthttps://github.com/James471/club-website-template/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 57 / 100
技术栈
HTML
网站类型
启动器
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2022-05-25
截图检查日期
2026-10-15

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: c5471b2b12d18f3e70be898e15960dcd2fd3e2c2c45372e53fdae116ae7a683a

2026-10-15T17:44:58.951Z

来源文件 / 仓库
# club-website-template

This is an easily customizable template for club websites. Here is a [website built using this template.](https://James471.github.io/club-website-template)

The good thing about this theme is that you don't have to code for anything. All the backgrounds and fonts are customizable. You just need to provide the images(and write down the paths to the files you have provided), font-families and font-colour. Continue reading to understand the details. If you are confused, contact [me](mailto:[email protected]) or find me in the library.

## Using the theme

Install ruby. You can download ruby from its [official website](https://rubyinstaller.org/downloads/)

Go to start and search 'ruby'. You will find ```start command prompt with ruby```. Open it and type ```gem install jekyll``` and press enter. If you use mac or linux, I assume you know what to do.

Click on ```Use this template button``` on the page of this repository. You will get the option to fork this repo. Make a public fork if you want to receive pull requests(i.e., receive the changes that I might make in future in this template). Next, clone your fork locally. Then, open ruby command prompt and cd to the directory of this repo. Run ```bundle install```. Now you should be set.

**Here comes the tricky part**

You must comment the variable ```baseurl``` in your ```_config.yml``` file before testing this locally. To test locally, cd to the directory and run ```bundle exec jekyll serve```. To make more changes, see the usage section. 

## Usage

This theme has 5 layouts and 3 includes.

### Available layouts

**Move to the markdown files as mentioned in the description of each layout below for further instructions on customization. You don't need to change any of the layout files. Just change their markdown files.**
1. indexLayout.html → It is the front page your website. The name of your club, its logo and the links to other pages can be customized in _config.yml while the background and fonts can be changed in the front matter of ```index.md```. For customizing the social links, see the includes section.
3. homeLayout.html → It is the home page of your website. All the customization for this page except the header and footer can be made in the front matter of ```home.md```
4. eventsLayout.html → It is used by all the events. The font and background can be customized in _config.yml. A sample markdown file for an example event is provided in _events/Example. It contains further details.
5. pastEventsLayout.html → It's the archive of all the events conducted by your club. It can be customized in the front matter of ```pastEvents.md```. It automatically lists your posts from the _events  folder. You can have subfolders in _events for organization purposes. It won't have any effect on the code.
6. peopleLayout.html → It lists the names and a photograph of each convenor/co-convenor/anyone who has held any role in the past. It can be customised in the front matter of ```people.md```. In order to add the names of more people, head to _data/people.yml

### Includes
1. header.html → It's the header which appears on every page of your website except the front page. It's font and background can be customised in _config.yml
2. footer.html → It's the footer which appears on every page of your website except the front page. It's font and background can be customised in _config.yml. The social media links are included from socialLinks.html
3. socialLinks.html → It contains the links to various social media/github pages of your club. It's included by the footer to display the links. You can add/remove/update these links in ```_data/social.yml```

### Assets
1. Some of the clubs don't have a logo. So, we have provided ```assets/img/logo.png``` which is a transparent image. You can use it or provide a logo for your club. This logo will appear above the club name on the front page.
2. Icons for several social media sites have been provided in ```assets/img/social/``` for use in socialLinks.html

So, all in all, you have to edit the following files
1. ```_config.yml```
2. ```index.md```
3. ```home.md```
4. ```pastEvents.md```
5. ```people.md```
6. ```_data/social.yml```
7. ```people.yml```
8. Provide all images you are gonna use.

**Need help?**
Contact [me.](mailto:[email protected])

**Need help with hosting?**
Contact [me](mailto:[email protected]) or the convenor of Turing Club. You can host your website on Github Pages using the github account of your club or you can host it at [IISERM](https://iiserm.github.io).

## Contributing

Bug reports are welcome on GitHub at https://github.com/James471/club-website-template/issues. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

Please discuss any changes before sending pull requests. I can be found somewhere in the library or at my [email address.](mailto:[email protected]) Or, you can always fork this repo, customize it the way you want and use it for your website. I will be glad to help if I can.

## Development

To set up your environment to develop this theme, run `bundle install`.

Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
To add a custom directory to your theme-gem, please edit the regexp in `club-website-template.gemspec` accordingly.

## License

The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。