归档短文显示对齐「最近更新」:剥链接取正文摘录,兜底链与侧栏一致
- classic 与 vivid 两套归档的短文摘录改用同一套规则:剥 <a> 后取正文
开头(贴链接的短文不再显示一长串 URL),剥完没字依次退到链接卡标题、
📷 图片、短文
- vivid 归档的类型徽标同步为单字(长 / 短)
This commit is contained in:
1 parent
2917db9e89
commit
5fc636e574
2 files changed
+31
-5
No files matched your search
@@ -2,20 +2,31 @@
|
|||||||
import { RouterLink } from 'vue-router'
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
// 余白归档。对应设计稿 viewArchive():page-head + 年块(年 + 篇数)+ 月分组。
|
// 余白归档。对应设计稿 viewArchive():page-head + 年块(年 + 篇数)+ 月分组。
|
||||||
// 短文没有标题,列表里用正文开头(后端对 short 返回全文 content_html,够用)。
|
// 短文没有标题,列表里用正文开头当标识——与侧栏「最近更新」同一套摘录规则:
|
||||||
|
// 先剥 <a>(贴链接的短文开头是 URL 本身,没有信息量),剥完没字退到链接卡标题。
|
||||||
|
|
||||||
const props = defineProps({ years: { type: Array, default: () => [] } })
|
const props = defineProps({ years: { type: Array, default: () => [] } })
|
||||||
|
|
||||||
const fmt = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
const fmt = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
||||||
const fmtDate = (iso) => fmt.format(new Date(iso)).replace(/\//g, '-')
|
const fmtDate = (iso) => fmt.format(new Date(iso)).replace(/\//g, '-')
|
||||||
const kindLabel = (k) => (k === 'long' ? '长文' : '短文')
|
const kindLabel = (k) => (k === 'long' ? '长' : '短')
|
||||||
const plain = (html) => {
|
const plain = (html) => {
|
||||||
if (!html) return ''
|
if (!html) return ''
|
||||||
const el = document.createElement('div')
|
const el = document.createElement('div')
|
||||||
el.innerHTML = html
|
el.innerHTML = html
|
||||||
return (el.textContent || '').trim()
|
return (el.textContent || '').trim()
|
||||||
}
|
}
|
||||||
const titleOf = (p) => (p.kind === 'long' ? p.title : plain(p.content_html).slice(0, 48))
|
const titleOf = (p) => {
|
||||||
|
if (p.kind === 'long') return p.title || '无题'
|
||||||
|
const noLinks = (p.content_html || '').replace(/<a\b[^>]*>[\s\S]*?<\/a>/gi, ' ')
|
||||||
|
const text = plain(noLinks)
|
||||||
|
if (text) return text.length > 48 ? text.slice(0, 48) + '…' : text
|
||||||
|
if (p.link_card && p.link_card.title) {
|
||||||
|
const t = p.link_card.title
|
||||||
|
return t.length > 48 ? t.slice(0, 48) + '…' : t
|
||||||
|
}
|
||||||
|
return p.images && p.images.length ? '📷 图片' : '短文'
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import RightRail from '../components/RightRail.vue'
|
|||||||
import { publicApi } from '../api'
|
import { publicApi } from '../api'
|
||||||
import YohakuArchive from '../ui/yohaku/YohakuArchive.vue'
|
import YohakuArchive from '../ui/yohaku/YohakuArchive.vue'
|
||||||
import { applyDocTitle, site } from '../site'
|
import { applyDocTitle, site } from '../site'
|
||||||
import { formatDateShort } from '../utils'
|
import { formatDateShort, stripTags } from '../utils'
|
||||||
|
|
||||||
const years = ref([])
|
const years = ref([])
|
||||||
// vivid(余白)是另一套 DOM,数据来源不变,只在视图层分叉
|
// vivid(余白)是另一套 DOM,数据来源不变,只在视图层分叉
|
||||||
@@ -29,6 +29,21 @@ const total = computed(() =>
|
|||||||
years.value.reduce((n, y) => n + (y.count || 0), 0)
|
years.value.reduce((n, y) => n + (y.count || 0), 0)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// 短文摘录:与「最近更新」同一套规则——贴链接的短文开头是 URL 本身,
|
||||||
|
// 先剥 <a>;剥完没字(纯链接贴)退到链接卡标题
|
||||||
|
const EXCERPT_LEN = 48
|
||||||
|
function excerpt(p) {
|
||||||
|
if (p.kind !== 'short') return p.title || '无题'
|
||||||
|
const noLinks = (p.content_html || '').replace(/<a\b[^>]*>[\s\S]*?<\/a>/gi, ' ')
|
||||||
|
const text = stripTags(noLinks).replace(/\s+/g, ' ').trim()
|
||||||
|
if (text) return text.length > EXCERPT_LEN ? text.slice(0, EXCERPT_LEN) + '…' : text
|
||||||
|
if (p.link_card && p.link_card.title) {
|
||||||
|
const t = p.link_card.title
|
||||||
|
return t.length > EXCERPT_LEN ? t.slice(0, EXCERPT_LEN) + '…' : t
|
||||||
|
}
|
||||||
|
return p.images && p.images.length ? '📷 图片' : '短文'
|
||||||
|
}
|
||||||
|
|
||||||
applyDocTitle('归档')
|
applyDocTitle('归档')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -59,7 +74,7 @@ applyDocTitle('归档')
|
|||||||
<RouterLink :to="`/post/${p.slug}`" class="row">
|
<RouterLink :to="`/post/${p.slug}`" class="row">
|
||||||
<span class="date">{{ formatDateShort(p.published_at).slice(5) }}</span>
|
<span class="date">{{ formatDateShort(p.published_at).slice(5) }}</span>
|
||||||
<span class="title">
|
<span class="title">
|
||||||
{{ p.kind === 'short' ? '短文' : p.title || '无题' }}
|
{{ excerpt(p) }}
|
||||||
<span v-if="p.kind === 'short'" class="badge">短</span>
|
<span v-if="p.kind === 'short'" class="badge">短</span>
|
||||||
</span>
|
</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|||||||
Reference in new issue
Block a user