Apostrophe

Extensions & Integrations

Install
npm i apostrophe-area-structure
Official Extension Apostrophe 2

Page Structure

Updated

 Over 1 year ago  

  Version

 1.1.1

Displays page structure through a simplified view of all areas and widgets on a page.
Editing

apostrophe-area-structure

A tool for visualizing a page's area structure

A demo of the apostrophe-area-structure module

This module adds a Page Area Structure menu item to your Page Settings menu that unspools the current page's DOM for all areas and their widgets (and those widget's areas and their widgets, etc) and nests them in a way that makes it simple to see their structure, without widget players/CSS obscuring them.

The menu displays the area's name (key the area is stored in on the document) as well as what the parent document's title/slug.

From this menu you can delete a widget (which will delete all of its child areas, etc., just as it would if you clicked the delete button for that widget on the page).

You can also edit a widget. This will close the Page Area Structure dialog box and scroll to the widget, before activating the appropriate editor dialog box or in the case of rich text, triggering a click to initiate the on-page editor.

Installation

In your Apostrophe project:

  • npm i apostrophe-area-structure
  • In your app.js
const apos = require('apostrophe')({
  shortName: 'my-project',
  modules: {
    // ... other configuration
    'apostrophe-area-structure': {}
  }
});
Apostrophe
Try Apostrophe