Wie man Felder in Keystones Admin UI neu anordnet

Question

Ich versuche, Keystone in ein CMS zu machen. Also, ich brauche Modelle für Artikel, Kategorie, ImagePage, AttachmentPage und so weiter. Jedes Modell, das ich erwähnte, hat eine Untergruppe von allgemeinen Feldern wie: Titel, Inhalt, Meta: {Titel, Beschreibung, Schlüsselwörter} und so weiter.

Article.add(fieldsCollectionObject) 

so definiert ich die allgemeinen Felder in externen Datei:

In Keystone ist ein Modell wie folgt aufgebaut

var T = require('keystone').Field.Types; 

module.exports = { 
    title: { type: T.Text, required: true }, 
    content: { type: T.Html, wysiwyg: true, height: 400 }, 
    meta: { 
     title: { type: T.Text }, 
     desc: { type: T.Textarea, height: 50 }, 
     keywords: { type: T.Text }, 
    }, 
    publishedDate: { type: T.Date, index: true, dependsOn: { state: 'published' } }, 
    state: { type: T.Select, options: 'draft, published, archived', default: 'draft', index: true }, 
}; 

und es in Modell der Datei require'd hatte ich tun:

Jetzt ist das Problem mit der Reihenfolge der Felder in der Admin-Benutzeroberfläche - nicht überraschend die brief, category und tags gehen vor Feldern von pageDef. Gibt es eine Möglichkeit, eine Bestellung aufzuerlegen, die ich möchte? Wie title, brief, content, <the rest>?

Answer 1

defaults und defaultsDeep mutieren Sie das erste Objekt, das als Parameter an es übergeben wurde (Ihr ursprüngliches Objekt von Keystone-Feldern). Um eine eigene Bestellung zu erstellen, müssten Sie die Objekte in der Reihenfolge an _.defaultsDeep übergeben, in der sie im Objekt angezeigt werden sollen, und somit in der Reihenfolge, in der sie in der Admin-Benutzeroberfläche angezeigt werden.

Hilfsweise, doppelte Objekte werden nicht in das resultierende Objekt aufgenommen. So hättest du etwa so etwas:

const _ = require('lodash'); 
const pageDef = require('./common/Page.js'); 
const keystone = require('keystone'); 
const T = keystone.Field.Types; 

//.... 

let articleDef = { 
    brief: { type: T.Html, wysiwyg: true, height: 150 }, 
    category: { type: T.Relationship, ref: 'Category', many: false, collapse: true }, 
    tags: { type: T.Relationship, ref: 'Tag', many: true }; 
}; 

Article.add(_.defaultsDeep({ 
    title: pageDef.title, 
    brief: articleDef.brief, 
    content: pageDef.content}, 
pageDef, articleDef)); 

Answer 2

Die Antwort oben erwies sich als Weg. So erweiterte ich und baute darauf:

lib/util.js

const _ = require('lodash'); 

class Util { 
    static sourceFields (fields, ...sources) { 
     const source = _.defaultsDeep(...sources); 
     const result = []; 
     for (let fieldSet of fields) { 
      result.push(_.isArray(fieldSet) ? _.pick(source, fieldSet) : fieldSet); 
     } 
     return result; 
    } 
} 

module.exports = Util; 

Modelle/common/traits.js

var T = require('keystone').Field.Types; 

module.exports = { 
    title: { type: T.Text, required: true }, 
    content: { type: T.Html, wysiwyg: true, height: 400 }, 
    indexImage: { type: T.CloudinaryImage }, 
    meta: { 
     title: { type: T.Text }, 
     desc: { type: T.Textarea, height: 50 }, 
     keywords: { type: T.Text }, 
    }, 
// <...> 
} 

models/Article.js

const util = require('../lib/utils.js'); 
const defs = require('./common/traits.js'); 
const keystone = require('keystone'); 
const T = keystone.Field.Types; 

// < var Article declaration... > 

const ownDef = { 
    brief: { type: T.Html, wysiwyg: true, height: 150 }, 
    category: { type: T.Relationship, ref: 'Category', many: false, collapse: true }, 
    tags: { type: T.Relationship, ref: 'Tag', many: true }, 
    images: { type: T.Relationship, ref: 'Image', many: true, collapse: true }, 
    attachments: { type: T.Relationship, ref: 'Attachment', many: true, collapse: true }, 
}; 

Article.add(...util.sourceFields([ 
    'Content', ['title', 'brief', 'content', 'indexImage', 'category', 'tags'], 
    'Media', ['images', 'attachments'], 
    'SEO', ['meta'], 
    'Status', ['pageType', 'author', 'state', 'publishedDate'], 
], ownDef, defs)); 

Also, in traits.js definiere ich gemeinsame Felder, in Article.js - Felder Ich verwende nur in Artikel Modell. Dann, in Artikel-Modell füge ich die Felder zur Liste mit Hilfe der sourceFields() Funktion hinzu. sourceFields() ruft ein Array von Feldgruppen und eine nicht angegebene Anzahl von Felddefinitionsobjekten ab (wie ownDef und defs).

Das Feldset ist entweder eine Zeichenfolge oder ein Array von Feldnamen (Schlüssel in Definitionsobjekten). Wenn es eine Zeichenfolge ist, wird es eine Kopfzeile in Admin UI sein, wenn es Array ist, dann wird es eine Reihe von Feldern genau wie Feldnamen im Array sortiert sein - die Funktion fügt Felddefinition im Grunde in einen "Feld" in Feld festgelegt.