Feature: 产品列表增加页头 & Markdown渲染器增加图像Url转换功能
This commit is contained in:
@ -20,16 +20,16 @@
|
||||
<NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/productions')">{{ $t('productions') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/solutions')">{{ $t('solutions') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('support') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/about')">{{ $t('about-us') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/about')">{{ $t('navigation.about-us') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -10,16 +10,16 @@
|
||||
<!-- 导航菜单 -->
|
||||
<el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
|
||||
<el-menu-item :index="$localePath('/productions')">
|
||||
<span class="title">{{ $t('productions') }}</span>
|
||||
<span class="title">{{ $t('navigation.productions') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/solutions')">
|
||||
<span class="title">{{ $t('solutions') }}</span>
|
||||
<span class="title">{{ $t('navigation.solutions') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/support')">
|
||||
<span class="title">{{ $t('support') }}</span>
|
||||
<span class="title">{{ $t('navigation.support') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/about')">
|
||||
<span class="title">{{ $t('about-us') }}</span>
|
||||
<span class="title">{{ $t('navigation.about-us') }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
|
||||
@ -11,8 +11,12 @@ interface Props {
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
||||
const contentWithAbsoluteUrls = convertMedia(props.content)
|
||||
|
||||
// 将 Markdown 转换成 HTML
|
||||
const safeHtml = computed(() => renderMarkdown(props.content))
|
||||
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,4 +1,16 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('our-productions') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb">
|
||||
<el-breadcrumb-item class="text-sm opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-sm opacity-50">
|
||||
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="productions-container">
|
||||
<el-collapse v-model="activeNames" class="production-collapse">
|
||||
<el-collapse-item
|
||||
@ -8,12 +20,13 @@ v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分
|
||||
<production-card
|
||||
v-for="production in group" :key="production.documentId || production.id"
|
||||
:slug="production.documentId"
|
||||
:image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
|
||||
:description="production.summary || ''" />
|
||||
:image-url="useStrapiMedia(production?.production_image?.url || '')"
|
||||
:name="production.title" :description="production.summary || ''" />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -78,6 +91,21 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.productions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -19,3 +19,16 @@ export function renderMarkdown(content: string): string {
|
||||
return dirtyHtml
|
||||
}
|
||||
|
||||
export function convertMedia(content: string): string {
|
||||
// 通过正则表达式替换Markdown中的图片链接
|
||||
//  -> )
|
||||
|
||||
if(!content) return '';
|
||||
|
||||
const contentWithAbsoluteUrls = content.replace(
|
||||
/!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
|
||||
(_, alt, url) => `})`
|
||||
)
|
||||
|
||||
return contentWithAbsoluteUrls;
|
||||
}
|
||||
@ -1,10 +1,6 @@
|
||||
{
|
||||
"back": "Back",
|
||||
"not-found": "Page Not Found",
|
||||
"productions": "Productions",
|
||||
"solutions": "Solutions",
|
||||
"support": "Support",
|
||||
"about-us": "About Us",
|
||||
"search-placeholder": "Search...",
|
||||
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
|
||||
"company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
|
||||
@ -14,7 +10,11 @@
|
||||
"support-desc": "24/7 professional technical support to ensure stable operation of your business.",
|
||||
"quick-links": "Quick Links",
|
||||
"navigation": {
|
||||
"home": "Home"
|
||||
"home": "Home",
|
||||
"productions": "Productions",
|
||||
"solutions": "Solutions",
|
||||
"support": "Support",
|
||||
"about-us": "About Us"
|
||||
},
|
||||
"contact-info": "Contact Us",
|
||||
"telephone": "Telephone",
|
||||
@ -31,5 +31,6 @@
|
||||
"product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
|
||||
"back-to-productions": "Back to Products",
|
||||
"no-content-available": "No detailed information available",
|
||||
"loading": "Loading..."
|
||||
"loading": "Loading...",
|
||||
"our-productions": "Our Productions"
|
||||
}
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
{
|
||||
"back": "返回",
|
||||
"not-found": "页面不存在",
|
||||
"productions": "产品中心",
|
||||
"solutions": "解决方案",
|
||||
"support": "服务支持",
|
||||
"about-us": "关于我们",
|
||||
"search-placeholder": "搜索...",
|
||||
"company-name": "金申机械制造有限公司",
|
||||
"company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
|
||||
@ -14,7 +10,11 @@
|
||||
"support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
|
||||
"quick-links": "快速链接",
|
||||
"navigation": {
|
||||
"home": "首页"
|
||||
"home": "主页",
|
||||
"productions": "产品中心",
|
||||
"solutions": "解决方案",
|
||||
"support": "服务支持",
|
||||
"about-us": "关于我们"
|
||||
},
|
||||
"contact-info": "联系我们",
|
||||
"telephone": "电话",
|
||||
@ -31,5 +31,6 @@
|
||||
"product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
|
||||
"back-to-productions": "返回产品列表",
|
||||
"no-content-available": "暂无详细信息",
|
||||
"loading": "加载中..."
|
||||
"loading": "加载中...",
|
||||
"our-productions": "我们的产品"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user