我试图在“/”路径上将此页面作为 AMP 运行，但我只想将文章组件作为 AMP 运行。三个组件根据
viewTypeexport const config = { amp: true };
const BlogDesignArticlePage = (
componentProp:
| ICategoryLandingPageProps
| IBlogCategoryPageData
| IArticlePageProps
) => {
const { isCurrentBlog, category, subCategory, viewType } = componentProp;
const router = useRouter();
useEffect(() => {
if (isCurrentBlog) {
window.location.href = `${BASE_PROD_URL}/${category}`;
}
}, [isCurrentBlog]);
if (!viewType) {
return <ErrorPage />;
}
if (viewType === 'designCategory') {
const {
title,
subtitle,
header_image: headerImage,
products,
navigation,
categories,
content,
faq,
explore_categories: exploreCategories,
mood_board_img: moodBoardImage,
countryCode,
meta_description: metaDescription,
meta_title: metaTitle,
moodboard_mobile_img_url: moodBoardMobileImageUrl,
moodboard_content: moodBoardContent,
href_lang_urls: hrefLangUrl,
} = componentProp as ICategoryLandingPageProps;
return (
<CategoryLP
title={title}
subtitle={subtitle}
headerImageUrl={headerImage}
products={products}
breadcrumbItemList={navigation}
categories={categories}
content={content}
faq={faq}
exploreCategories={exploreCategories}
moodBoardImg={moodBoardImage}
countryCode={countryCode}
metaDescription={metaDescription}
metaTitle={metaTitle}
moodBoardMobileImage={moodBoardMobileImageUrl}
moodBoardContent={moodBoardContent}
category={category}
subCategory={subCategory}
hreflangUrls={hrefLangUrl}
region="en-in"
/>
);
}
if (viewType === 'blogCategory' || viewType === 'blogSubCategory') {
const {
hero_config,
featured_articles,
latest_articles,
categories,
seo_content,
other_trending_articles,
faq,
breadcrumbs,
} = componentProp as IBlogCategoryPageData;
return (
<Wrapper>
<Head>
{/* <link rel="stylesheet" src="../../styles/App.scss" /> */}
</Head>
<Header />
<Hero
breadCrumbNavigation={breadcrumbs}
heroDescription={hero_config?.hero_description}
heroHeader={hero_config?.hero_header}
heroImageDesktop={
hero_config?.hero_image_desktop || CATEGORY_HEADER_DEAFULT_IMAGE
}
heroImageMobile={
hero_config?.hero_image_mobile || CATEGORY_HEADER_DEAFULT_IMAGE
}
/>
{featured_articles && (
<FeaturedArticleSection articleList={featured_articles} />
)}
{latest_articles && (
<LatestArticles
articleList={latest_articles}
isBlogHome={false}
categories={categories}
sectionTitle="Latest Articles"
/>
)}
{categories && (
<OtherCategory isBlogHome={false} categories={categories} />
)}
{other_trending_articles && (
<TrendingArticlesWrapper>
<SimilarStories
similarArticles={other_trending_articles}
title="Other Trending Articles"
/>
</TrendingArticlesWrapper>
)}
<PlatformFeaturesWrapper>
<PlatformFeaturesAmp />
</PlatformFeaturesWrapper>
<SubscriptionBanner />
<PartnerVoice slug="en-us" />
{seo_content && (
<TrendsContentWrapper>
<TrendsContent
hasWrapperClass={false}
trendData={seo_content}
className="category-seo-content"
/>
</TrendsContentWrapper>
)}
{faq && (
<TrendsContentWrapper>
<FaqSection
hasWrapperClass={false}
faqData={faq}
className="category-faq"
/>
</TrendsContentWrapper>
)}
<AmpPreFooter />
</Wrapper>
);
}
if (viewType === 'blogArticle') {
const {
breadcrumbs,
author_info,
article_content,
share_info,
article_reading_time,
article_category,
article_views,
article_title,
similarArticles,
id,
tags,
meta_title,
meta_description,
article_preview_image_desktop,
} = componentProp as IArticlePageProps;
const articleCode = router.query?.category as string;
const newBreadCrumbList = breadcrumbs.filter(
(crumb: { name: string }) => crumb.name !== 'Blog'
);
return (
<>
{/* <Header /> */}
<Article
breadcrumbs={newBreadCrumbList}
authorInfo={author_info}
socialShareData={share_info}
articleReadingTime={article_reading_time}
articleCategory={article_category}
articleViews={article_views}
articleTitle={article_title}
articleBody={article_content}
articleCode={articleCode}
similarArticles={similarArticles}
articleId={id}
tags={tags}
metaTitle={meta_title}
metaDescription={meta_description}
featuredImage={article_preview_image_desktop}
/>
{/* <PreFooter /> */}
<AmpPreFooter />
</>
);
}
return null;
};
export const getServerSideProps: GetServerSideProps = async context => {
const category = context.params?.category as string;
try {
if (category === ' textile') {
// Avoid making unnecessary API Call
throw new Error('Textile Page route');
}
const response = await fetchBlogOrDesignOrArticlePage(category);
if (!response.status) {
throw response.msg;
}
const viewType = response.data.view_type;
const similarArticles = response.data.pageData.similar_articles
? response.data.pageData.similar_articles
: [];
const articleData = response.data.pageData.article_data;
return {
props: {
...response.data.pageData,
...articleData,
viewType,
similarArticles,
category,
subCategory: '',
isActiveCategory: true,
isCurrentBlog: false,
},
};
} catch (err) {
return {
props: {
title: '',
subtitle: '',
header_image: '',
get_in_touch_url: '',
products: [],
navigation: [],
categories: [],
content: [],
faq: [],
explore_categories: [],
mood_board_img: '',
meta_title: '',
meta_description: '',
moodboard_mobile_img_url: '',
moodboard_content: '',
isActiveCategory: false,
href_lang_urls: {},
isCurrentBlog: category === 'textile',
},
};
}
};
export default BlogDesignArticlePage;
我试过在组件内部而不是在页面上做
export const config = { amp: true };