Skip to content

Latest commit

 

History

History
188 lines (151 loc) · 7.78 KB

README_zh.md

File metadata and controls

188 lines (151 loc) · 7.78 KB
Raw

Future-Imperfect Jekyll Template

一个基于Future Imperfect制作的Jekyll模板.

我很喜欢它的风格，但是目前GitHub上关于它的Jekyll模板并不够好用，所以有了这个repo。

语言 开源协议 上次提交 仓库大小

构建环境

  • Windows 11 22H2 (x64) / Ubuntu 23.10 (x64)

  • Ruby 3.2.2 (Windows) / Ruby 3.1.2p20 (Ubuntu)

  • Jekyll 4.3.2

    • addressable 2.8.6
    • concurrent-ruby 1.2.2
    • em-websocket 0.5.3
    • ffi 1.16.3-x64-mingw-ucrt
    • google-protobuf 3.25.1-x64-mingw-ucrt
    • http_parser.rb 0.8.0
    • i18n 1.14.1
    • jekyll-feed 0.17.0
    • jekyll-paginate 1.1.0
    • jekyll-sass-converter 3.0.0
      • sass-embedded ~> 1.54
    • jekyll-seo-tag 2.8.0
    • listen 3.8.0
      • rb-fsevent ~> 0.10, >= 0.10.3
    • minima 2.5.1
    • pathutil 0.16.2
      • forwardable-extended ~> 2.6
    • public_suffix 5.0.4
    • rb-fsevent 0.11.2
    • rexml 3.2.6
    • rouge 4.2.0
    • sass-embedded 1.69.5-x64-mingw-ucrt
      • google-protobuf ~> 3.23
    • unicode-display_width 1.6.1
    • webrick 1.8.1
    • tzinfo 2.0.6
      • concurrent-ruby ~> 1.0
    • tzinfo-data 1.2023.3
      • tzinfo >= 1.0.0
    • unicode-display_width 2.5.0
    • wdm (0.1.1)

  • Bundle 2.5.1

  • Gem 3.5.1

  • simple-jekyll-search 1.10.0

功能

使用

(1) 配置

  1. 通过git clone或通过下载压缩包保存到本地

  2. 通过gem安装Jekyll及其依赖

    apt install ruby ruby-dev gem -y # Ubuntu，其他发行版请自行安装
gem install bundler jekyll # 安装Jekyll及基本组件

# 安装其他Jekyll插件
bundle install

  3. 修改_config.yml，使之符合你的需求

建议在部署前先在本地运行一下jekyll serve，检查是否有问题

(2) 部署(GitHub Pages)

  • 撰写文章(请保存在_posts文件夹中)
  • 将整个项目上传到Github，仓库名为<username>.github.io
  • 在仓库设置中找到Pages，点击。
    1. 在Source的选项中选择Action
    2. 在跳转页面中点击GitHub Pages Jekyll的Configuration按钮
    3. 随后会请求添加一个.yml文件，不用修改直接添加即可
    4. 稍等片刻，Github Pages将会完成部署，之后就可以通过https://<username>.github.io访问。

(3) 关于头信息

哪怕你已经十分熟悉Jekyll了，也建议你看看这一部分，本项目的头信息根据Future-Imperfect和Jekyll-Feed的要求有所改动，可能与通常的Jekyll模板的习惯有所不同。

  • 本项目中，一个典型的头信息如下所示：

    ---
layout: post
title: "Test"
description: "This is a test article"
author: "Your name"
date: 2023-07-05 10:00:00 +0800
image: "/images/test_cover.jpg"
stick: true
tags:
  - test
  - article
category: test
mathjax: true
mermaid: false
---

以下是各字段的说明，标记为[选填]的字段可以留空或直接删除(允许不存在这一字段)

  • layout：[必填]布局样式，请填post，表示让这篇文章应用“post”布局。
  • title：[必填]本篇文章的标题。
  • description：[选填]本篇文章的描述。
  • author：[选填]作者，留空或直接删除时，显示_config.yml中的username字段；若存在且与username不同，则使用所填的内容。
  • date：[必填]发布日期，请按照示例的格式来写，最后的+0800表示时区为GMT+8(北京时间)
  • image：[选填]文章封面，留空或直接删除时会使用默认封面/images/default_cover.jpg
  • stick：[选填]是否固定到首页左侧，留空或删除等同于false，不建议stick的文章过多。
  • tags：[选填]标签，用于筛选文章，允许多个tag。
  • category：[选填]类别，用于筛选文章，仅允许一个category。
  • mathjax：[选填]是否启用MathJax渲染公式，未配置则遵循_config.yml中的全局配置(mathjax.enable)。
  • mermaid：[选填]是否启用Mermaid渲染图表，未配置则遵循_config.yml中的全局配置(jekyll-mermaid.enable)。

问题

  • 部分情况下，顶栏可能不会固定在顶部而是出现在页面侧边，导致整个页面的样式出现问题

    已解决，详见注意事项第1项

  • 页面中“统计信息”部分的标签未能按照预想的效果，分别按照“最新”和“最多”排序，也许是Liquid语法的问题，暂时无法解决。

注意事项

  1. 在使用AdGuard或同类浏览器插件时，不要启用Web Annoyances Ultralist(过滤器 > 扰人的 > Web Annoyances Ultralist) 规则集，该规则会使部分样式被浏览器默认样式覆盖，导致页面样式异常。
  2. 可优化的细节：
    • 目前图片资源都是jpg格式，但对网页来说jpg并不是最优解——它的兼容性很好，但压缩率不高，鉴于当前的主流浏览器都已支持压缩率更高的webp格式的图片，您可以考虑使用webp代替jpg，以提高加载速度，同时节省流量。
      • 对于未指定封面路径的文章，会使用默认封面。您可以通过修改_config.yml的default_cover_path值来修改默认封面的路径。
    • 在目前的main.css中，Source Sans Pro字体使用Google Fonts的cdn加载，但通常来说谷歌的cdn在国内并不稳定。若您将该模板用于国内网站，您可以考虑换用其他cdn或直接下载到本地导入使用。

来自HTML5 UP的原始README

原始项目基于CCA 3.0 license (Creative Cloud Attribution)开源。

Future Imperfect by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

It's been a long time coming, but I've finally gotten around to creating a brand new
blog-style template (and the first since Striped, which came out waaaaay back in 2013).
Anyway, Future Imperfect features a clean, expansive layout, a toggleable search box,
and -- because pretty much all modern browsers can use it now -- a whole lot of flexbox
action. Enjoy it :)

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.

(* = not included)

AJ
<aj@lkn.io> | @ajlkn

Credits:

Demo Images:
Unsplash (unsplash.com)

Icons:
Font Awesome (fortawesome.github.com/Font-Awesome)

Other:
jQuery (jquery.com)
html5shiv.js (@afarkas @jdalton @jon_neal @rem)
Misc. Sass functions (@HugoGiraudel)
Respond.js (j.mp/respondjs)
Skel (skel.io)