LinkItem の拡張 – Optimizely 開発者ブログ

1712784899
2024-04-10 15:42:03

LinkItem フィールドは、コミュニティで最も需要の高いプロパティの 1 つであり、編集者がページやブロックにわたるリンクを簡単に作成および管理できるようになります。 CMS 12 で導入されました – EPiServer.CMS 12.11.0 このブログ投稿では、オーサリングエクスペリエンスを向上させるためにこれを拡張する方法を示します。

コードでプロパティを定義する方法は次のとおりです。

[CultureSpecific]
[Display(Name = "Primary Link", GroupName = TabNames.Content, Order = 10)]
public virtual LinkItem Link { get; set; }

そして、これが編集者がプロパティをどのように見るかです

「リンクの追加」をクリックすると、リンクを作成/編集できるダイアログが表示されます。内部ページを選択して、外部アセットやメディアアセットを追加することもできます。

ここで、Text が必須であり、リンクテキストとして使用されることがわかります。

LinkItem フィールドの拡張: Text フィールドの強化

リンクテキストの事前定義リストを用意し、それらのオプションをモーダルのテキストフィールドの一部として使用して、リンク間の一貫性を維持したい場合はどうすればよいでしょうか。「Read More」、「Learn More」、「Go」などを何らかの方法で作成し、編集者がリストからテキストを選択できます。

これは、多言語サイトがあり、すべてのリンクテキストを翻訳する必要がある場合にも役立ちます。すべての翻訳を含むリンクテキストのリストを作成し、編集者がそこから選択できるようにすると、時間を大幅に節約できます。明らかに、特定のテキストが必要な場合、作成者はカスタムテキストを追加できる必要があります。

リンクテキストオーサリングエクスペリエンス

私たちが使用するのは、設定機能と、このコンテンツを維持するための文字列の IList。別のアプローチを適用して、使用するテキストのリストを保存することができます。

[SettingsContentType(DisplayName = "Site Settings",
    GUID = "ff69f929-c91b-a6cb-9829-2ecf9d11e13c"
    SettingsName = "Site Settings")]
public class SiteSettings : SettingsBase
{
   ....

   [CultureSpecific]
   [Display(Name = "Global Link Text", GroupName = 
   TabNames.Content, Order = 200)]
    public virtual IList LinkTextList { get; set; }
   ....
}

エディターは文字列のリストを作成し、必要な数だけ含めることができます。

組み込みの自動提案エディター機能を使用する (https://docs.developers.optimizely.com/content-management-system/docs/built-in-auto-suggestion-editor)、設定からすべてのオプションを取得し、それを選択項目のリストとして返す「選択ファクトリー」を作成する必要があります。このクラスはから継承する必要があることに注意してください。 ISelectionQuery ISelectionFactory からのものではありません。

namespace Website.CMS.SelectionFactories
{
    [ServiceConfiguration(typeof(ISelectionQuery))]
    public class LinkTextSelectionQuery : ISelectionQuery
    {
        private readonly IEnumerable _items;

        public LinkTextSelectionQuery()
        {
            var linkTexts = SettingsHelper.SiteSettings.GlobalLinkText != null ? SettingsHelper.SiteSettings.GlobalLinkText.ToList() : new List();

            var list = new List();
            list.Add(new SelectItem() { Text = string.Empty, Value = string.Empty });
            
            list.AddRange(linkTexts.Select(x => new SelectItem
            {
                Text = x,
                Value = x
            }));

            _items = list;
        }

        public IEnumerable GetItems(string query) => _items.Where(i => i.Text.StartsWith(query, StringComparison.OrdinalIgnoreCase));

        public ISelectItem GetItemByValue(string value) => _items.FirstOrDefault(i => i.Value.Equals(value));
    }
}

項目のリストは、LinkItem プロパティをページまたはブロック上でレンダリングする必要があるたびに取得されます。

ここで、本質的に内部の LinkModel である LinkItem モーダルを拡張する必要があります。

[EditorDescriptorRegistration(TargetType = typeof(LinkModel), EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
internal class CustomLinkEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
    {
        foreach (var modelMetadata in metadata.Properties)
        {
            var property = (ExtendedMetadata)modelMetadata;
            if (property.PropertyName == "Text")
            {
                property.ClientEditingClass = "epi/shell/form/SuggestionSelectionEditor";
                modelMetadata.EditorConfiguration["storeurl"] =
                    "/EPiServer/Shell/stores/selectionquery/Website.CMS.SelectionFactories.LinkTextSelectionQuery/";
            }
        }
    }
}

の設定 クライアント編集クラス テキストプロパティの UI に影響を及ぼし、入力フィールドから自動提案機能を備えたドロップダウンに変換します。
の エディターコンフィギュレーター クラスで取得した値をドロップダウンに設定するトリックは何ですか: Website.CMS.SelectionFactories.LinkTextSelectionQuery

ソリューションを実行してリンクを追加すると、リンクテキスト (以前は単一の入力テキストでした) の動作が変更されていることがわかります。