Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9097

Nuxtjsでgenerate時に、公開しているページのtitleとurlのリストを作成する

$
0
0

※力技での解決法です。絶対もっと良い方法があるはず。

発端としては、

フロントのNuxt側でデータを受け取るだけでなく、
外部に渡せる形で書き出せないか?

と思ったこと。

ググったけど、あまり情報が見当たらず、
「そもそもこの発想自体がズレてるのでは?」と思えてきたが、
とりあえず作ってみた。

内容としてはシンプルに、
nuxt generateで生成された
distの中のhtmlファイル群をスクレイピングすること。

まずはささっとモジュール作成。

generate-pages-info.js
const{resolve}=require('path')const{readFileSync,writeFileSync}=require('fs')constrequireContext=require('require-context');module.exports=asyncfunction(){const{rootDir,generate:{dir:generateDir}}=this.optionsconstfileName='pages.json'this.nuxt.hook('generate:done',async()=>{constdir_path=resolve(rootDir,generateDir);consthtml_files={};constpage_paths=requireContext(dir_path,true,/\.html$/).keys();for(constpage_pathofpage_paths){constname=page_path.split("./").pop().split(".").shift();html_files[name]=awaitgetPageInfo(dir_path,page_path);}constpages_json=JSON.stringify(html_files);constgenerate_file_path=resolve(rootDir,generateDir,fileName);writeFileSync(generate_file_path,pages_json);})}asyncfunctiongetPageInfo(dir_path,page_path){constfile_path=resolve(dir_path,page_path);constcontent=awaitreadFileSync(file_path,"utf-8");constpage_title=content.match(/<title>(.*?)<\/title>/)[1];constpage_metas=awaitpageMetas(content);return{"title":page_title,"metas":page_metas,"url":page_path}}asyncfunctionpageMetas(content){constregex_text=/<meta[^<>]*?name=\"(.*?)\"[^<>]*?content=\"(.*?)\"/;constmetas=content.match(newRegExp(regex_text,'g'));letresult=[];for(constmetaofmetas){constmatch=meta.match(newRegExp(regex_text));result.push({"name":match[1],"content":match[2]})}returnresult;}

nuxt.config.jsにモジュール登録。

nuxt.config.js
modules:['~modules/generate-pages-info.js']

あとはnuxt generateして、
公開フォルダ(デフォルトではdist)にpages.jsonが出来ていればOK。

パーサー使えばもっと上品にできるかも。


非同期処理関連が結構躓いた。
当たり前だけど、同じサイトだろうが別ファイルの読み込みは時間かかるのね。


Viewing all articles
Browse latest Browse all 9097

Latest Images

Trending Articles