html - Jekyll 发布特定样式(添加图像、某些段落的文本列等)

标签 html css jekyll

我希望能够实现这个:https://d13yacurqjgara.cloudfront.net/users/1052576/screenshots/2524013/attachments/497842/loylecarnerfeature.jpg

我是 jekyll 的新手,在这里或任何地方都找不到任何对我有帮助的东西。我整理了整页标题,但似乎无法正确设置帖子(白色矩形)中的样式。例如:顶部的引用与帖子的其余部分具有不同的 css,帖子的某些部分具有用于文本/图像的 2 列布局,并且背景蓝色轮廓图像位于帖子下方。如果有人能帮助您,那就太好了。

最佳答案

HTML 结构应该是这样的:

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
{% include menu.html %}
<div class="title">{{ page.title }}</div>
<div class="subtitle">{{ page.title }}</div>
<div class="meta">Posted on {{ page.date }} by {{ page.author }}</div>
<div class="page">{{ content }}{% include footer.html %}</div>
</body>
</html>

你的 post/index.md 应该是这样的:

----
title: 'Loyle Carner: Benjamin Coyle-Larner'
subtitle: 'Lorem ipsum dolor...'
date: 2016-02-27
author: 'Your Name'
----

Lorem ipsum dolor...

Sit amet.

你的 CSS 应该是这样的:

body {
  background: white url(header_image.jpg) center top no-repeat;
  background-size: 100%;   /* set header image width */
  color: black;            /* set text color */
  text-align: center;      /* make sure everything is centered */
}
.page, .title, subtitle {
  background: white;       /* set background color on text */
  display: inline-block;   /* boxes that follow text-align: center; */
}
.page {
  width: 900px;            /* fixed width of the text */
  max-width: 100%;         /* make it responsive */
  text-align: left;        /* left align text in page */
}
.meta {color: white;}

我希望这会给你一个好的起点。

关于html - Jekyll 发布特定样式(添加图像、某些段落的文本列等),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35560864/

相关文章:

python - Tornado 中的局部变量作用域(python)

markdown - GitHub 页面上的 Jekyll : include markdown in another markdown file

ruby - gem 更新显示 WSL2 上的权限错误

Jekyll:将 kramdown 目录放入 _include 中以进行哈希导航

javascript - d3 条形图,具有固定条形宽度和固定间距以在中心轴线上对齐

jquery - 为什么我的 Accordion 没有这样显示?

javascript - Vue JS 模板 - 在登录表单和注册表单之间切换

css - 无法点击超链接

html - 如何在 SVG 中为一组对象制作动画?

javascript - 要在输入键上将焦点设置在锚定标签上