Ghost Casper 主题 v2 的 Publish 移植版本,使用了 Tailwind CSS。
您可以在 Paraside.in 上查看此主题的在线示例。
要将其安装到您的 Publish 包中,请将其作为依赖项添加到您的 Package.swift
清单文件中
let package = Package(
…
dependencies: [
…
.package(url: "https://github.com/sowenjub/CasperishTheme.git", .branch("main"))
],
targets: [
.target(
…
dependencies: [
…
"CasperishTheme"
]
)
]
...
)
打开 main.swift 并使用以下示例进行自定义
import Foundation
import Publish
import Plot
import CasperishTheme // 1
// This type acts as the configuration for your website.
struct MyWebsite: Website, CasperishWebsite { // 2
enum SectionID: String, WebsiteSectionID {
// Add the sections that you want your website to contain here:
case posts
}
struct ItemMetadata: WebsiteItemMetadata, CasperishWebsiteItemMetadata { // 3
// Add any site-specific metadata that you want to use here.
var cover: String? // 3 bis
}
// Update these properties to configure your website:
var url = URL(string: "https://your-website-url.com")!
var name = "MyWebsite"
var description = "A description of MyWebsite"
var language: Language { .english }
var imagePath: Path? { nil }
// 4
// Update these properties to configure your casperish-website:
var rootPathString = "/"
var headerColor = "#424242"
var cover = ""
var author = "Arnaud Joubay"
var avatar = "http://i.pravatar.cc/300"
var bio = "Swift & Rails Indie Maker"
var icon = "🏝"
var newsletterAction = ""
var contacts: [(ContactPoint, String)] { [
(.twitter, "sowenjub"),
(.dev, "sowenjub"),
(.linkedIn, "arnaudjoubay"),
(.gitHub, "sowenjub"),
(.stackoverflow, "229688"),
]}
}
// This will generate your website using the built-in Foundation theme:
try MyWebsite().publish(
withTheme: .casperish,
additionalSteps: [
.installPlugin(.readingTime()),
.installPlugin(.pygments()),
],
plugins: [.pygments()]
) // 5
CasperishWebsite
协议,该协议启用主题特定的配置(见第 4 点)。CasperishWebsiteItemMetadata
,允许您为每篇文章(在 Publish 术语中称为 item)添加封面照片。因此,我们还需要在其中添加 var cover: String?
这一行。rootPathString
允许您将网站发布到子文件夹中,例如在没有自定义域名的情况下发布到 GitHub Pages。如果您的网站将位于根域名,请将其保留为 "/"
headerColor
标题背景颜色的十六进制代码。如果您使用封面图片,封面图片将隐藏标题颜色。cover
封面图片的可选路径。如果您想使用 headerColor
,请留空 (""
)。如果您有一个 cover.jpg 图片,并且您的图片位于 /Resources
文件夹的根目录,则路径应为 "/cover.jpg"
(不要忘记 /,否则它在子页面上将无法工作)。author
和 bio
显示在页脚上方avatar
是您的个人资料图片的路径,每篇文章都会显示。如果您的图片位于 /Resources
文件夹的根目录,则路径应为 "/my avatar.jpg"
。icon
可以是表情符号或任何适合作为移动设备导航栏中图标的短文本newsletterAction
如果您想隐藏订阅表单,请留空 (""
),否则请替换为目标 URLcontacts
是用于在标题(桌面端)中显示指向您的 Web 个人资料链接的昵称数组。目前,仅支持 Twitter、Dev.to、LinkedIn、Github 和 Stack Overflow。Publish 很智能,它将使用您文章内容中的第一个标题作为标题,但这意味着您的标题将出现两次:一次在封面图片上方,一次在下方。
相反,您应该在 front matter 中设置它。
如果您想为您的文章添加封面图片,请将其添加到您文章的 front matter 中。要使用 /Resources/first_post.jpg
作为这篇文章的封面,请像下面这样添加 cover: /first_post.jpg
---
title: My first post
cover: /first_post.jpg
date: 2020-08-04 00:46
description: A description of my first post.
tags: life, anew
---
# My first post
My first post's text.
如果您不需要封面,只需删除 cover 行即可。
为了组织您的内容,您可以调整两个变量
main.swift
中声明为 SectionID)所有页面和区块都将显示在导航菜单中,首先是页面,然后是区块。
此主题由 Tailwind CSS 提供支持。
如果您想自定义 CSS,您需要编辑 Resources/CasperishTheme/theme.css
文件,并重新生成 styles.css
文件。
cd Resources/CasperishTheme
npx tailwindcss build theme.css -o styles.css -c tailwind.config.js