Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add setting option for post title position #213

Merged
merged 1 commit into from
Nov 16, 2024
Merged

feat: add setting option for post title position #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@ node_modules

.gradle
build
dist
templates/assets/dist
dist
13 changes: 13 additions & 0 deletions settings.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,19 @@ spec:
value: github
- label: Tailwind CSS Typography
value: tailwind
- $formkit: select
name: title_position
label: 标题位置
value: "content"
options:
- value: "content"
label: "正文中"
- value: "cover"
label: "封面中"
- $formkit: text
name: cover_height
label: 封面图高度
value: "24rem"
- $formkit: checkbox
name: show_upvote_button
label: 显示点赞按钮
Expand Down
5 changes: 0 additions & 5 deletions templates/assets/dist/main.iife.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion templates/assets/dist/style.css
View file
Open in desktop

This file was deleted.

24 changes: 20 additions & 4 deletions templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,20 @@
<link rel="stylesheet" th:href="@{/assets/styles/github-markdown.css?v={version}(version=${theme.spec.version})}" />
</th:block>
<th:block th:fragment="hero">
<th:block
th:replace="~{modules/hero :: hero(isHome = false, cover = ${singlePage.spec.cover}, title = ${singlePage.spec.title})}"
/>
<section th:unless="${#strings.isEmpty(singlePage.spec.cover)}">
<div class="relative flex items-center" th:styleappend="|height:${theme.config.post.cover_height ?: '24rem'}|">
<div
class="before:z-1 relative size-full bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
th:style="|background-image: url('${singlePage.spec.cover}')|"
></div>
<header
class="pattern-header-text absolute top-1/3 mx-auto flex w-full flex-col items-center justify-center gap-3"
th:if="${theme.config.post.title_position == 'cover'}"
>
<h1 class="text-center text-2xl text-white sm:text-5xl" th:text="${singlePage.spec.title}"></h1>
</header>
</div>
</section>
</th:block>
<th:block th:fragment="content">
<div class="rounded-xl bg-white p-4 dark:bg-slate-800">
Expand Down Expand Up @@ -81,7 +92,12 @@
</div>
</div>
</div>
<h1 class="my-3 text-2xl font-medium dark:text-slate-50" th:text="${singlePage.spec.title}"></h1>
<h1
th:if="${#strings.isEmpty(singlePage.spec.cover)} or ${theme.config.post.title_position == 'content'}"
class="my-3 text-3xl font-medium dark:text-slate-50"
th:text="${singlePage.spec.title}"
></h1>

<article
class="!max-w-none break-words"
th:classappend="${theme.config.post.content_style == 'github' ? 'markdown-body' : 'tailwind-typography'}"
Expand Down
31 changes: 25 additions & 6 deletions templates/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@
th:replace="~{modules/layout :: html(title = ${post.spec.title} + ' - ' + ${site.title}, hero = ~{::hero}, content = ~{::content}, head = ~{::head}, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')}"
>
<th:block th:fragment="head">
<link rel="stylesheet" th:href="@{/assets/styles/github-markdown.css?v={version}(version=${theme.spec.version})}" />
<link
th:if="${theme.config.post.content_style == 'github'}"
rel="stylesheet"
th:href="@{/assets/styles/github-markdown.css?v={version}(version=${theme.spec.version})}"
/>
</th:block>
<th:block th:fragment="hero">
<th:block
th:replace="~{modules/hero :: hero(isHome = false, cover = ${post.spec.cover}, title = ${post.spec.title})}"
/>
<section th:unless="${#strings.isEmpty(post.spec.cover)}">
<div class="relative flex items-center" th:styleappend="|height:${theme.config.post.cover_height ?: '24rem'}|">
<div
class="before:z-1 relative size-full bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
th:style="|background-image: url('${post.spec.cover}')|"
></div>
<header
class="pattern-header-text absolute top-1/3 mx-auto flex w-full flex-col items-center justify-center gap-3"
th:if="${theme.config.post.title_position == 'cover'}"
>
<h1 class="text-center text-2xl text-white sm:text-5xl" th:text="${post.spec.title}"></h1>
</header>
</div>
</section>
</th:block>
<th:block th:fragment="footer">
<script>
Expand Down Expand Up @@ -128,8 +143,12 @@ <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
</div>
</div>
</div>
<h1 class="my-3 text-2xl font-medium dark:text-slate-50" th:text="${post.spec.title}"></h1>
<div class="flex gap-2">
<h1
th:if="${#strings.isEmpty(post.spec.cover)} or ${theme.config.post.title_position == 'content'}"
class="mt-3 text-3xl font-medium dark:text-slate-50"
th:text="${post.spec.title}"
></h1>
<div class="mt-3 flex gap-2">
<a
th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}"
Expand Down