노드가 있는 XML 사이트 맵을 생성합니다.js
38901 단어 nodetypescript
npm 초기화 패키지.json
우리가 해야 할 첫 번째 일은 가방을 만드는 것이다.xml npm 패키지를 설치할 수 있도록 json 파일입니다.아직 소포가 없으면프로젝트 json 파일은 프로젝트 폴더에서 명령 npm init를 실행하고 알림에 따라 실행합니다.소포를 받으면json 파일은 npm install xml typescript--save 명령을 실행하여 만듭니다.이것은 xml npm 패키지와 TypeScript npm package를 설치합니다.이 예에서 TypeScript를 사용하기 때문에 xml 패키지 설치 형식을 정의해야 합니다.npm install@types/xml-save-dev 명령을 실행하여 설치할 수 있습니다.
ES 모듈 형식 구성
노드가 아닌 ECMAScript modules 또는 ES 모듈도 사용할 예정입니다.js는 현재 ES 모듈 형식을 지원합니다.ES 모듈을 사용하려면 값이 "module"인 "type"속성을 패키지에 추가해야 합니다.json 파일.패키지에서 이러한 설정을 설정하는 방법에 대한 자세한 내용은 다른 게시물을 참조하십시오CommonJS modules.json 파일은 다음과 유사해야 합니다.
{
"type": "module",
"name": "xmlsitemap",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"typescript": "^4.2.3",
"xml": "^1.0.1"
},
"devDependencies": {
"@types/xml": "^1.0.5"
}
}
노드에서 ES 모듈을 가져오고 내보냅니다.js 노드를 사용하여 TypeScript를 구성합니다.js
패키지를 추가한 후json 파일은 ES 모듈에서 TypeScript를 사용하는 데 필요한 구성 절차를 포함할 수 있습니다.이렇게 하려면 다음과 같은 설정의 Tsconfig.json 파일을 추가할 수 있습니다.
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"strict": true,
"module": "esnext",
"lib": ["ES2019"],
"moduleResolution": "node",
"skipLibCheck": true
},
"include": ["index.ts"],
"exclude": ["node_modules/**/*"]
}
TypeScript를 사용하여 XML 문자열 생성
이제 우리는 노드를 만들 수 있다.js 스크립트, 사이트 맵 파일에 쓸 XML 문자열을 생성합니다.이렇게 하려면 프로젝트에 "index.ts"라는 새 파일을 추가합니다.다음 코드를 추가합니다.
import xml from "xml";
import { writeFile } from "fs";
async function main() {
const pages = [
{
title: "Sample Page One",
created: "Dec 22 2020",
slug: "sample-page-one",
},
{
title: "Sample Page Two",
created: "Feb 1 2021",
lastModified: "Feb 2 2021",
slug: "sample-page-two",
},
{
title: "Sample Page Three",
created: "Mar 2 2021",
lastModified: "Mar 5 2021",
slug: "sample-page-three",
},
{
title: "Sample Page Four",
created: "Mar 20 2021",
slug: "sample-page-four",
},
];
const indexItem = {
//todo: build index item
};
const sitemapItems = pages.reduce(async function (
items: { url: [{ loc: string }, { lastmod: string }] }[],
item: {
title: string;
lastModified?: string;
created: string;
slug: string;
}
) {
// todo: build page items
return items;
}, []);
}
main();
헤더 없는 내용 관리 시스템 사이트 맵 색인 항목 만들기
사이트 맵의 첫 번째 항목은 선택할 수 있는 태그를 포함합니다. 이 태그는 단독 페이지 사이트 맵 항목에 포함되지 않습니다. 이것이 바로 단독으로 만들어야 하는 이유입니다.url 위치와 지난번 수정 시간을 제외하고 색인 사이트 지도 항목은 과change frequency parameter도 포함한다.이 옵션들은 선택할 수 있습니다. 모든 사이트 맵 항목에 포함될 수 있지만, 이 예에서는 사이트 맵의 루트 URL에만 포함됩니다.계속해서 위에 표시된 "indexItem"객체에 다음을 추가합니다.
const indexItem = {
//build index item
url: [
{
loc: "YOUR-DOMAIN-HERE",
},
{
lastmod: new Date(
Math.max.apply(
null,
pages.map((page) => {
return (new Date(
page.lastModified ?? page.created
) as unknown) as number;
})
)
)
.toISOString()
.split("T")[0],
},
{ changefreq: "daily" },
{ priority: "1.0" },
],
};
또한 TypeScript를 사용하기 때문에 날짜 대상은 athis에서 숫자로 직접 변환할 수 없기 때문에 TypeScript 컴파일러가 형식 오류를 표시하는 것을 방지하기 위해 JavaScript Date object로 중간 단계로 변환됩니다.모든 페이지가 마지막으로 수정되거나 만들어진 날짜의 최대 날짜를 정하면, 페이지는 unknown type 포맷되고, 년, 월, 일만 포함됩니다.
ISO 문자열 날짜 형식 사이트 맵 페이지 항목 만들기
색인sitemap 항목을 만들면 "sitemapItems"그룹에서 각 페이지 항목을 만들 수 있습니다.이 과정은 색인 항목을 만드는 것과 유사하지만, 모든 페이지 항목은 url 위치 속성과 지난번에 수정된 시간 스탬프만 포함합니다.사이트 맵 항목을 생성하려면 사이트맵 Items 배열 작성 단계에 다음 코드를 추가합니다.
const sitemapItems = pages.reduce(function (
items: { url: [{ loc: string }, { lastmod: string }] }[],
item: {
title: string;
lastModified?: string;
created: string;
slug: string;
}
) {
// build page items
items.push({
url: [
{
loc: `YOUR-DOMAIN-HERE/${item.slug}`,
},
{
lastmod: new Date(item.lastModified ?? item.created)
.toISOString()
.split("T")[0],
},
],
});
return items;
}, []);
사이트 맵 객체 구축
현재, 사이트 맵 색인 항목과 모든 페이지의 사이트 맵 항목이 생성되었습니다. 우리는 그것들을 하나의 대상, 즉 전체 사이트 맵의 대상으로 조합할 수 있습니다.주 함수 끝에 다음 코드를 추가합니다.
const sitemapObject = {
urlset: [
{
_attr: {
xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9",
},
},
indexItem,
...sitemapItems,
],
};
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>${xml(sitemapObject)}`;
console.log(sitemap);
운행 노드.js 스크립트와 npm 스크립트
xml 사이트 맵 생성 과정을 테스트하기 위해 가방에 스크립트를 추가할 수 있습니다.'사이트 맵 생성' 이라는 json 파일입니다.이 스크립트는 TypeScript 컴파일러를 호출한 다음 노드를 사용하여 전송된 JavaScript를 실행합니다.js.다음은 가방에 있는 스크립트의 외관입니다.json 파일:
{
"scripts": {
"generate-sitemap": "tsc && node index.js"
}
}
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>YOUR-DOMAIN-HERE</loc><lastmod>2021-03-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>YOUR-DOMAIN-HERE/sample-page-one</loc><lastmod>2020-12-22</lastmod></url><url><loc>YOUR-DOMAIN-HERE/sample-page-two</loc><lastmod>2021-02-02</lastmod></url><url><loc>YOUR-DOMAIN-HERE/sample-page-three</loc><lastmod>2021-03-05</lastmod></url><url><loc>YOUR-DOMAIN-HERE/sample-page-four</loc><lastmod>2021-03-20</lastmod></url></urlset>
파일 작성 방법 사이트 맵 파일에 XML 문자열 쓰기
색인 아래쪽에 있는 "console.log"문을 바꿀 수 있습니다.tsmain 함수는 다음 코드를 사용하여 사이트맵 xml 문자열을 "사이트맵.xml"이라는 파일에 씁니다.
await writeFileAsync("./sitemap.xml", sitemap, "utf8");
import { promisify } from "util";
const writeFileAsync = promisify(writeFile);
import xml from "xml";
import { writeFile } from "fs";
import { promisify } from "util";
const writeFileAsync = promisify(writeFile);
async function main() {
const pages = [
{
title: "Sample Page One",
created: "Dec 22 2020",
slug: "sample-page-one",
},
{
title: "Sample Page Two",
created: "Feb 1 2021",
lastModified: "Feb 2 2021",
slug: "sample-page-two",
},
{
title: "Sample Page Three",
created: "Mar 2 2021",
lastModified: "Mar 5 2021",
slug: "sample-page-three",
},
{
title: "Sample Page Four",
created: "Mar 20 2021",
slug: "sample-page-four",
},
];
const indexItem = {
//build index item
url: [
{
loc: "YOUR-DOMAIN-HERE",
},
{
lastmod: new Date(
Math.max.apply(
null,
pages.map((page) => {
return (new Date(
page.lastModified ?? page.created
) as unknown) as number;
})
)
)
.toISOString()
.split("T")[0],
},
{ changefreq: "daily" },
{ priority: "1.0" },
],
};
const sitemapItems = pages.reduce(function (
items: { url: [{ loc: string }, { lastmod: string }] }[],
item: {
title: string;
lastModified?: string;
created: string;
slug: string;
}
) {
// build page items
items.push({
url: [
{
loc: `YOUR-DOMAIN-HERE/${item.slug}`,
},
{
lastmod: new Date(item.lastModified ?? item.created)
.toISOString()
.split("T")[0],
},
],
});
return items;
}, []);
const sitemapObject = {
urlset: [
{
_attr: {
xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9",
},
},
indexItem,
...sitemapItems,
],
};
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>${xml(sitemapObject)}`;
await writeFileAsync("./sitemap.xml", sitemap, "utf8");
}
main();
브라우저에서 사이트 맵 파일 테스트
색인을 만든 같은 항목 폴더에서 브라우저에서 사이트 지도를 테스트합니다.ts 파일은 npm install http 서버 --save dev 명령을 실행하고 패키지에 다른 스크립트를 추가합니다.json 파일은 다음과 같습니다.
{
"scripts": {
"generate-sitemap": "tsc && node index.js",
"serve": "http-server"
}
}
http-server npm package
사이트 지도를 로봇에 추가합니다.txt
현재, 정적 사이트 생성기를 구축하는 과정에서 사이트 맵 생성 절차를 포함할 수 있습니다. 이 생성기는 Jamstack 블로그에 사용할 수 있습니다.너도 로봇에 선을 하나 추가할 수 있다.txt 파일은 사이트 지도 파일의 URL을 표시합니다.로봇을 사용한다면웹 사이트에 txt 파일을 추가하려면 도메인이 포함된 경우 다음을 추가해야 합니다.
Sitemap: https://YOUR-DOMAIN-HERE/sitemap.xml
Reference
이 문제에 관하여(노드가 있는 XML 사이트 맵을 생성합니다.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jdedwards3/generate-an-xml-sitemap-with-node-js-4km8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
