AngularとScullyモジュールを使って静的サイトとしてブログを立ち上げようとしています。
アーカイブページの自動生成をプラグインとして実装しましたが、setConfig関数の使い方が悪いのか、うまくいきません。
プラグインにプラグイン自体のスクリプト以外からコンフィグを設定する方法について
何か見当違いな部分があるのだと思いますが全く解決に至っていません。
確認すべきこと、見落としやすい場所がありましたらご教示ください。
できたこと:
- Angular、Scully、そしてmarkdown用のモジュールを使ってmarkdownからhtmlを生成すること
- アーカイブページの生成を"routeProcess"の際に実行されるpluginとして実装
- 同pluginで複数ページに分割されたアーカイブページの自動生成ができることを確認
問題点:
- 今のところ、コンフィグオブジェクトをpluginそのもののファイルと同じ.tsファイルで定数として定義。外からコンフィグを設定・反映できていない
- できればscully.{project名}.ts などでコンフィグを設定できるようにしたい
- しかしsetConfigを使っても設定を上書きできないでいる
Pluginのコード
import { HandledRoute, registerPlugin, RouteTypes } from "@scullyio/scully"
export const ARCHIVES_PLUGIN = 'archive'
export interface ArchivePluginConfig {
root:string;
articleRoute: string;
archivePrefixRoute: string;
archiveSize:number;
}
//とりあえずpluginファイルの中で定数としてコンフィグを定義
export const EXAMPLE_CONFIGS: ArchivePluginConfig[] =[{
root:"/blog",
articleRoute: "/blog/articles",
archivePrefixRoute: "/archives",
archiveSize:8,
}];
export function archivePlugin(routes: HandledRoute[], config?:ArchivePluginConfig[]): Promise<HandledRoute[]> {
//undefinedか、配列に要素が存在するか確認し、先の設定を適用するか決定
//次のこの行の実行前にconsole.log(config)を使うとundefinedと表示される
config = (config ==undefined || config.length<1)? EXAMPLE_CONFIGS:config;
config.forEach(config => {
//add archives for blog
let posts = routes.filter((route) => route.route.startsWith(config.articleRoute));
let archiveCount=Math.floor(posts.length/config.archiveSize)+1;
let archives:HandledRoute[]=[];
for (let page = 1; page <= archiveCount; page++) {
archives.push({route:`${config.root}${config.archivePrefixRoute}/${page}`})
}
archives.forEach(element => {
routes.push(element);
});
});
return Promise.resolve(routes);
}
registerPlugin("routeProcess", ARCHIVES_PLUGIN, archivePlugin, [])
scully.{myproject}.config.ts code:
import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import './scully/plugins/archive';
import { ArchivePluginConfig, ARCHIVES_PLUGIN ,archivePlugin} from './scully/plugins/archive';
setPluginConfig('md', { enableSyntaxHighlighting: true });
const archiveConfig:ArchivePluginConfig[]=[
{
root:"/blog",
articleRoute:"blog/article",
archiveSize:8,
archivePrefixRoute:"/articles",
}
]
setPluginConfig<ArchivePluginConfig[]>(ARCHIVES_PLUGIN,'routeProcess',archiveConfig);
const defaultPostRenderers = ['seoHrefOptimise'];
export const config: ScullyConfig = {
defaultPostRenderers,
projectRoot: "./",
projectName: "jl-dotnet",
outDir: './dist/static',
routes: {
'/blog/article/:post': {
type: 'contentFolder',
post: {
folder: "./article/blog"
}
},
}
};
環境など:
OS:windows 10
editor:vscode
console:git-bash
nodejs:v14.16.1
npm:7.12.0
1週間ほど2021/5/4くらい前に作成したプロジェクト
I angularCliからプロジェクトを作成
npmを通じてscullyioをインストール
他の方が作成したプラグインに対する設定は上手く機能しています。
例えば次の設定を行うとmarkdownへのシンタックスハイライトが行われます
setPluginConfig('md', { enableSyntaxHighlighting: true });
友人と作成しているサイトではありますが、二人自力での解決が難しいため、今回初めてとなりますが質問を投稿いたします。scully自体の日本語の情報が多くないので本家英語版stackoverflowとダブルポストをしておりますがご容赦ください。