Question

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

我对jekyll很新，在这里或任何地方找不到任何可以帮助我的东西。我整理页面标题已整理好，但似乎无法在帖子（白色矩形）中正确定位。例如：顶部的引号与帖子的其余部分具有不同的css，帖子的一些位具有用于文本/图像的2列布局，并且背景蓝色轮廓图像稍微低于帖子。如果有人能帮助你，那就太棒了。

Answer 1

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>

你的帖子/ 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;}

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

Jekyll发布特定样式（添加图像，某些段落的文本列等）

1 个答案: