Strapi V3에서 다음 단계에 대한 미리 보기 버튼을 만듭니다.js
나는 이 기회를 빌려 그들에게 감사를 드립니다. 왜냐하면 이 용례가 매우 환영을 받기 때문에, 그들의 글은 많은 문제에 대답했습니다.내가 강조하고자 하는 것은 이러한 유형의 공헌은 Strapi 커뮤니티에 매우 중요하다는 것이다. 만약 당신이 그 중의 일부가 되기를 원한다면, 나는 당신을 우리의 Write for the Community Program에 가입하도록 초청한다.
이 (아주) 짧은 문장은 Quadi와 Amir가 쓴 내용을 보충할 것이다.Strapi admin에서 미리 보기 단추를 직접 실행하는 방법을 보실 수 있습니다.좋아, 그렇지 않아?
맞춤형 구성
Strapi는 완전히 시작된 것임을 분명히 알고 있을 것입니다.만약 콘텐츠 관리자에 무작위 GIF를 만드는 단추를 포함하고 싶다면, 이것은 절대적으로 가능하다는 것을 알아야 한다.구성 요소를 만들고 관리자에게 주입하기만 하면 됩니다.
구성 요소를 주입하는 것이 바로 우리가 해야 할 일이다.
이 자습서는 Strapi의 v3을 기반으로 합니다.이 강좌 v4 버전의 한 버전은 페이지 상단에 언급되며, 이 버전은 사용할 수 있습니다.
앞에서 설명한 바와 같이 가장 좋아하는 프런트엔드 프레임(예: Next.js에 미리 보기 시스템이 이미 있고 다음과 같이 특정한 미리 보기 URL이 필요하다고 가정합니다.
http://localhost:3000/api/preview?secret=fdsfasdmgrNPQXtfdsfMswfdsfdsfasdkjfow&slug=pricing](http://localhost:3000/api/preview?secret=fdsfasdmgrNPQXtfdsfMswfdsfdsfasdkjfow&slug=pricing&lang=en&type=page
확장성
/extensions 폴더에는 사용자 정의 플러그인 파일이 모두 들어 있습니다.the dedicated documentation page.에 대한 자세한 내용다음 그림과 같이
content-manager 폴더가 있어야 합니다.
./extensions/content-manager/admin/src/index.js 파일을 만듭니다.import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import pluginLogo from './assets/images/logo.svg';
import App from './containers/Main';
import ExternalLink from './InjectedComponents/ExternalLink';
import ConfigureViewButton from './InjectedComponents/ContentTypeBuilder/ConfigureViewButton';
import lifecycles from './lifecycles';
import reducers from './reducers';
import trads from './translations';
export default (strapi) => {
const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
const plugin = {
blockerComponent: null,
blockerComponentProps: {},
description: pluginDescription,
icon: pluginPkg.strapi.icon,
id: pluginId,
initializer: null,
injectedComponents: [
{
plugin: 'content-type-builder.listView',
area: 'list.link',
component: ConfigureViewButton,
key: 'content-manager.link',
},
// This is the injection zone
{
plugin: 'content-manager.editView',
area: 'right.links',
component: ExternalLink,
key: 'content-manager.preview-link',
},
],
injectionZones: {
editView: { informations: [] },
listView: { actions: [], deleteModalAdditionalInfos: [] },
},
isReady: true,
isRequired: pluginPkg.strapi.required || false,
layout: null,
lifecycles,
mainComponent: App,
name: pluginPkg.strapi.name,
pluginLogo,
preventComponentRendering: false,
reducers,
trads,
};
return strapi.registerPlugin(plugin);
};
import ExternalLink from './InjectedComponents/ExternalLink';
injectedComponents: [
{
plugin: 'content-type-builder.listView',
area: 'list.link',
component: ConfigureViewButton,
key: 'content-manager.link',
},
// This is the injection zone
{
plugin: 'content-manager.editView',
area: 'right.links',
component: ExternalLink,
key: 'content-manager.preview-link',
},
],
./extensions/content-manager/admin/src/InjectedComponents/ExternalLink/index.js 파일을 만듭니다.import React from 'react';
import styled from 'styled-components';
import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
import EyeIcon from './view.svg';
const StyledExternalLink = styled.a`
display: block;
color: #333740;
width: 100%;
text-decoration: none;
span,
i,
svg {
color: #333740;
width: 13px;
height: 12px;
margin-right: 10px;
vertical-align: 0;
}
span {
font-size: 13px;
}
i {
display: inline-block;
background-image: url(${EyeIcon});
background-size: contain;
}
&:hover {
text-decoration: none;
span,
i,
svg {
color: #007eff;
}
}
`;
const ExternalLink = () => {
const { modifiedData, layout } = useContentManagerEditViewDataManager();
if (modifiedData.published_at) {
return null;
}
if (!modifiedData.slug) {
return null;
}
if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
return null;
}
return (
<li>
<StyledExternalLink
href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
target="_blank"
rel="noopener noreferrer"
title="page preview"
>
<i />
Preview
</StyledExternalLink>
</li>
);
};
export default ExternalLink;
./extensions/content-manager/admin/src/InjectedComponents/ExternalLink/view.svg 파일을 만듭니다.<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
const ExternalLink = () => {
const { modifiedData, layout } = useContentManagerEditViewDataManager();
if (modifiedData.published_at) {
return null;
}
if (!modifiedData.slug) {
return null;
}
if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
return null;
}
return (
<li>
<StyledExternalLink
href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
target="_blank"
rel="noopener noreferrer"
title="page preview"
>
<i />
Preview
</StyledExternalLink>
</li>
);
};
modifiedDatahook에서 layout와useContentManagerEditViewDataManager를 얻었다.첫 번째는 항목 데이터가 포함된 대상이고, 두 번째는 항목에 대한 더 재미있는 정보(APID, 내용 유형, 메타데이터 등)내용이 발표되었을 때,
slug 필드가 없거나, 필요한 환경 변수가 존재하지 않으면, 우리는 아무것도 하지 않습니다.사실, 우리는 내용이 아직 발표되지 않았을 때만 미리 보기 단추를 표시하고 싶습니다.또한, slug나 필요한 env 변수를 포함하지 않으면, 앞에서 미리 볼 수 없습니다.if (modifiedData.published_at) {
return null;
}
if (!modifiedData.slug) {
return null;
}
if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
return null;
}
return (
<li>
<StyledExternalLink
href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
target="_blank"
rel="noopener noreferrer"
title="page preview"
>
<i />
Preview
</StyledExternalLink>
</li>
);
`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}`
/api/preview?secret=xxx&slug=xxx다음 폴더에 파일을 저장했을 수도 있습니다.이 호출된 js 프로그램을 처리합니다.다음은 FoodAdvisor에서 수행한 작업입니다.// ./pages/api/preview.js
import { getData } from '../../utils';
export default async (req, res) => {
if (
req.query.secret !== process.env.PREVIEW_SECRET ||
(req.query.slug != '' && !req.query.slug)
) {
return res.status(401).json({ message: 'Invalid token' });
}
const previewData = await getData(
req.query.slug,
req.query.locale,
req.query.apiID,
req.query.kind,
null
);
if (!previewData.data) {
return res.status(401).json({ message: 'Invalid slug' });
}
res.setPreviewData({});
res.writeHead(307, {
Location: previewData.slug,
});
res.end();
};
`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`
yarn build --clean
yarn develop
이것이 바로 FoodDadVisor 프런트엔드의 모양입니다.
결론
Strapi 사용자 정의는 매우 쉽습니다.우리는 이곳에서 세 개의 파일만 만들었는데, 그 중 하나는 이다.svg!
Strapi는 헤더가 없는 CMS이기 때문에 이 컴퓨터의 미리 보기 기능을 제공하지 않지만, 원본이기 때문에, 전방 응용 프로그램의 수요에 적응하기 위해 자유롭고 유연성을 제공합니다.
이것은 아마도 관리자 인터페이스에서 미리보기를 실현하는 가장 간단한 방법일 것이다.Content Manager에서 프런트엔드 응용 프로그램 미리 보기를 직접 표시하는 구성 요소를 추가로 생성하는 것이 좋습니다.
다음 글 안녕!
Reference
이 문제에 관하여(Strapi V3에서 다음 단계에 대한 미리 보기 버튼을 만듭니다.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/strapi/create-a-preview-button-in-strapi-v3-for-next-js-52ei텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
