mirror of https://github.com/YunYouJun/valaxy
feat(theme-yun): card and markdown body optimization
This commit is contained in:
JasonXuDeveloper - 傑
parent
331f0200af
commit
9546ef3a56
|
|
@ -5,6 +5,7 @@ title:
|
|||
categories:
|
||||
- $locale:category.test
|
||||
- Markdown
|
||||
excerpt_type: html
|
||||
---
|
||||
|
||||
::: tip
|
||||
|
|
@ -26,6 +27,7 @@ More info see [Markdown Extensions](https://valaxy.site/guide/markdown).
|
|||
:tada: :100:
|
||||
|
||||
A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) is available.
|
||||
<!-- more -->
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ defineProps<{ cover?: string }>()
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="yun-card flex-center rounded" flex="col"
|
||||
class="yun-card flex-center rounded-2" flex="col"
|
||||
min-h="100px"
|
||||
bg="$va-c-bg-light"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,76 +24,58 @@ const postTitleClass = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<YunCard
|
||||
class="w-full"
|
||||
m="auto"
|
||||
:class="post.cover ? 'post-card-image' : 'post-card'"
|
||||
overflow="hidden" :style="styles"
|
||||
>
|
||||
<div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
|
||||
<img
|
||||
v-if="post.cover"
|
||||
:src="post.cover"
|
||||
:alt="t('post.cover')"
|
||||
width="320" height="180"
|
||||
w="40%" h="54"
|
||||
class="cover object-cover object-center md:shadow"
|
||||
loading="lazy"
|
||||
>
|
||||
|
||||
<div class="flex flex-col items-center relative px-6" :class="post.cover && 'h-54'" w="full">
|
||||
<AppLink
|
||||
class="post-title-link cursor-pointer"
|
||||
:to="post.path || ''"
|
||||
m="t-3"
|
||||
:class="postTitleClass"
|
||||
>
|
||||
<div
|
||||
class="flex-center title text-2xl"
|
||||
text="center" font="serif black"
|
||||
>
|
||||
<div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
|
||||
<span>{{ $tO(post.title) }}</span>
|
||||
</div>
|
||||
</AppLink>
|
||||
|
||||
<YunPostMeta :frontmatter="post" />
|
||||
|
||||
<div flex="~ grow col" w="full" justify="center" items="center">
|
||||
<div v-if="post.excerpt_type === 'text'" py="1" />
|
||||
<div v-if="post.excerpt" class="markdown-body" op="90" text="left" w="full" p="x-6 lt-sm:4 y-2" v-html="post.excerpt" />
|
||||
<div v-else m="b-5" />
|
||||
</div>
|
||||
<!-- <div m="b-5" /> -->
|
||||
|
||||
<YunExcerptBottomGradient v-if="post.excerpt" />
|
||||
|
||||
<a
|
||||
v-if="post.url"
|
||||
:href="post.url"
|
||||
class="post-link-btn shadow hover:shadow-md z-2"
|
||||
rounded
|
||||
target="_blank"
|
||||
m="b-4"
|
||||
>
|
||||
{{ t('post.view_link') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- always show -->
|
||||
<div
|
||||
w="full" class="yun-card-actions flex justify-between px-6"
|
||||
min-h="10"
|
||||
text="sm"
|
||||
<a class="w-full flex-center post-card-link" :href="post.path || ''">
|
||||
<YunCard
|
||||
class="w-full hover:scale-102 hover:z-1" mx="4" :class="post.cover ? 'post-card-image' : 'post-card'"
|
||||
overflow="hidden" :style="styles"
|
||||
>
|
||||
<div class="post-categories inline-flex" flex="wrap 1" items="center">
|
||||
<YunPostCategories m="l-1" :categories="post.categories" />
|
||||
<div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
|
||||
<img
|
||||
v-if="post.cover" :src="post.cover" :alt="t('post.cover')" width="320" height="180" w="40%" h="54"
|
||||
class="cover object-cover object-center md:shadow" loading="lazy"
|
||||
>
|
||||
|
||||
<div class="flex flex-col items-center relative" :class="post.cover && 'h-54'" w="full">
|
||||
<AppLink class="post-title-link cursor-pointer" :to="post.path || ''" m="t-3" :class="postTitleClass">
|
||||
<div class="flex-center title text-2xl" text="center" font="serif black">
|
||||
<div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
|
||||
<span>{{ $tO(post.title) }}</span>
|
||||
</div>
|
||||
</AppLink>
|
||||
|
||||
<YunPostMeta :frontmatter="post" />
|
||||
|
||||
<div flex="~ grow col" w="full" justify="center" items="center">
|
||||
<div v-if="post.excerpt_type === 'text'" py="1" />
|
||||
<div
|
||||
v-if="post.excerpt" class="markdown-body" op="90" text="left" w="full" p="x-8 y-2"
|
||||
v-html="post.excerpt"
|
||||
/>
|
||||
<div v-else m="b-5" />
|
||||
</div>
|
||||
<!-- <div m="b-5" /> -->
|
||||
|
||||
<YunExcerptBottomGradient v-if="post.excerpt" />
|
||||
|
||||
<a
|
||||
v-if="post.url" :href="post.url" class="post-link-btn shadow hover:shadow-md z-2" rounded target="_blank"
|
||||
m="b-4"
|
||||
>
|
||||
{{ t('post.view_link') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<YunPostTags v-if="post.tags" m="1" :tags="post.tags" />
|
||||
</div>
|
||||
</YunCard>
|
||||
<!-- always show -->
|
||||
<div w="full" class="yun-card-actions flex justify-between p-4" min-h="10" text="sm">
|
||||
<div class="post-categories inline-flex" flex="wrap 1" items="center">
|
||||
<YunPostCategories m="l-1" :categories="post.categories" />
|
||||
</div>
|
||||
|
||||
<YunPostTags v-if="post.tags" m="1" :tags="post.tags" />
|
||||
</div>
|
||||
</YunCard>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -104,6 +86,28 @@ const postTitleClass = computed(() => {
|
|||
// animation-range: entry, exit;
|
||||
}
|
||||
|
||||
.post-card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-card-link :hover {
|
||||
cursor: var(--cursor-pointer), pointer;
|
||||
}
|
||||
|
||||
@keyframes card-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
w="full" h="10"
|
||||
w="full" h="30%"
|
||||
class="absolute bottom-0 bg-gradient-to-t from-$va-c-bg-light to-transparent z-1"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { defineConfig } from 'unocss'
|
|||
|
||||
export default defineConfig({
|
||||
shortcuts: [
|
||||
['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
|
||||
['yun-card', 'transition-all yun-transition shadow hover:shadow-2xl'],
|
||||
],
|
||||
rules: [
|
||||
[
|
||||
|
|
|
|||
Loading…
Reference in New Issue