Jekyll Kramdown # (H1) 没有格式化为标题

Question

我是 Jekyll 和 kramdown 的新手，所以我的问题可能需要帮助。

我在使用 H1 标题时遇到问题：因此 post（markdown 文件 download here）中的以下内容：

# H1 looks like this
## H2 looks like this
### H3 looks like this
#### H4 looks like this
##### H5 looks like this
###### H6 looks like this
Normal text looks like this

生成这个：

H2-H6 看起来不错，但我不知道 H1 有什么问题，但我希望它的格式正确。

Gemfile

source "https://rubygems.org"

gem "jekyll", ">= 3.8.5"

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-paginate", "~> 1.1.0"
  gem "jekyll-sitemap"
end

platforms :mingw, :x64_mingw, :mswin, :jruby do
  gem "tzinfo", "~> 1.2"
  gem "tzinfo-data"
end

gem "wdm", ">= 0.1.1" if Gem.win_platform?

gem "webrick"

_config.yml 文件

# Build settings
markdown: kramdown
permalink: pretty

highlighter: rouge
kramdown:
  input: GFM
  auto_ids: true
  syntax_highlighter: rouge

HTML是这样的。完整 HTML file download

<h1 id="h1-looks-like-this">H1 looks like this</h1>
<h2 id="h2-looks-like-this">H2 looks like this</h2>
<h3 id="h3-looks-like-this">H3 looks like this</h3>
<h4 id="h4-looks-like-this">H4 looks like this</h4>
<h5 id="h5-looks-like-this">H5 looks like this</h5>
<h6 id="h6-looks-like-this">H6 looks like this</h6>
<p>Normal text looks like this</p>

main.css 文件是 here。 h1多次出现，摘录于此：

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }

...

.home h1 { margin-bottom: 25px; }

...

.post-header h1 {
  font-size: 36px;
  letter-spacing: -1.75px;
  line-height: 1;
  font-weight: 300;
}

...

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  line-height: 1;
  font-weight: 300;
  margin: 40px 0 20px;

...

  .post-header h1 { font-size: 36px; }
  .post-content h2 { font-size: 28px; }
  .post-content h3 { font-size: 22px; }
  .post-content h4 { font-size: 18px; }
  .post-content blockquote { padding-left: 10px; }
  .post-content ul,
  .post-content ol { padding-left: 10px; }
}

Answer 1

您的问题出在 css，它指定了

.post-content h2 {
  font-size: 32px;
  letter-spacing: -1.25px;
}

适用于 H2、H3、H4，但不适用于 H1。

只需在 CSS 文件的 .post-content H1 中添加 font-size: 40px; 即可。

我建议学习使用浏览器的检查器来查找此类问题。只需 right-click 页面中的某个元素，然后 select“检查”。然后从那里开始。

Jekyll Kramdown # (H1) 没有格式化为标题

Jekyll Kramdown # (H1) not formatting as heading

html

ruby-on-rails

jekyll

github-pages

kramdown