Publish 的 Casperish 主题

Swift Package Manager Mac + Linux Twitter: @sowenjub

Ghost Casper 主题 v2 的 Publish 移植版本,使用了 Tailwind CSS

包含内容

screenshot

在线示例

您可以在 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
  1. 嗯,您显然需要 CasperishTheme 包
  2. 您的网站必须采用 CasperishWebsite 协议,该协议启用主题特定的配置(见第 4 点)。
  3. 您的 ItemMetadata 必须采用 CasperishWebsiteItemMetadata,允许您为每篇文章(在 Publish 术语中称为 item)添加封面照片。因此,我们还需要在其中添加 var cover: String? 这一行。
  4. 在这里您可以真正使这个主题成为您自己的主题
    • rootPathString 允许您将网站发布到子文件夹中,例如在没有自定义域名的情况下发布到 GitHub Pages。如果您的网站将位于根域名,请将其保留为 "/"
    • headerColor 标题背景颜色的十六进制代码。如果您使用封面图片,封面图片将隐藏标题颜色。
    • cover 封面图片的可选路径。如果您想使用 headerColor,请留空 ("")。如果您有一个 cover.jpg 图片,并且您的图片位于 /Resources 文件夹的根目录,则路径应为 "/cover.jpg" (不要忘记 /,否则它在子页面上将无法工作)。
    • authorbio 显示在页脚上方
    • avatar 是您的个人资料图片的路径,每篇文章都会显示。如果您的图片位于 /Resources 文件夹的根目录,则路径应为 "/my avatar.jpg"
    • icon 可以是表情符号或任何适合作为移动设备导航栏中图标的短文本
      • newsletterAction 如果您想隐藏订阅表单,请留空 (""),否则请替换为目标 URL
    • contacts 是用于在标题(桌面端)中显示指向您的 Web 个人资料链接的昵称数组。目前,仅支持 Twitter、Dev.to、LinkedIn、Github 和 Stack Overflow。
  5. 要生成您的网站,您需要包含主题附带的 2 个插件

用法

在 front matter 中设置您的标题

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 行即可。

组织您的内容

为了组织您的内容,您可以调整两个变量

导航:页面 & 区块

所有页面和区块都将显示在导航菜单中,首先是页面,然后是区块。

修改主题

此主题由 Tailwind CSS 提供支持。

如果您想自定义 CSS,您需要编辑 Resources/CasperishTheme/theme.css 文件,并重新生成 styles.css 文件。

cd Resources/CasperishTheme
npx tailwindcss build theme.css -o styles.css -c tailwind.config.js

特别感谢 & 致谢