0

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とダブルポストをしておりますがご容赦ください。

0

1 件の回答 1

0

解決しました

  • プラグインとして登録するメソッドからconfig 引数を削除
  • 同メソッド冒頭でconfig変数を宣言、getConfig<>関数の返り値を代入
  • setConfigに使うconfigオブジェクが配列だとうまくいかないため配列をラッピングするinterfaceを定義し、そちらをconfigオブジェクトとして使う

これでうまくいきました

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。