You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- [Add-ons tagged with the trove classifier `Framework :: Plone` on PyPI](https://pypi.org/search/?c=Framework+%3A%3A+Plone)
168
+
169
+
Volto configuration loader
164
170
A function with signature `config => config`.
165
-
It gets the Volto Configuration registry, and it must return it back after mutating it.
166
-
It is similar to `GenericSetup` profiles in Plone Backend.
171
+
It gets the Volto configuration registry, and it must return it back after mutating it.
172
+
It is similar to `GenericSetup` profiles in the Plone backend.
167
173
An add-on must provide a default configuration loader that is always loaded when Volto runs.
168
174
An add-on can have multiple configuration loaders, and they can be loaded optionally from the Volto configuration.
169
175
170
-
Configuration registry (Volto)
171
-
A singleton object modeled using JavaScript modules.
176
+
Configuration registry
177
+
In Plone and in general, the configuration registry is where resources are registered for an application.
178
+
179
+
In Volto, it is a singleton object modeled using JavaScript modules.
172
180
It is accessible from the Volto project by importing the module `@plone/volto/config` with `import registry from '@plone/volto/config'`.
173
181
It contains the configuration of the Volto app.
182
+
183
+
In Plone core, [`plone.app.registry`](https://pypi.org/project/plone.app.registry/) provides Plone UI and `GenericSetup` integration for [`plone.registry`](https://pypi.org/project/plone.registry/), which in turn implements a configuration registry for Zope applications.
184
+
185
+
component shadowing
186
+
shadowing
187
+
Volto uses a technique called component shadowing to override an existing Volto component with our local custom version, without having to modify Volto's source code.
188
+
189
+
Volto's source components are located in the filepath stem of `omelette/src/components/`.
190
+
Custom components that shadow Volto's source would be located in the filepath stem of `src/customizations/components/`.
191
+
Shadow components would have the same filepath as Volto's source compenents, excluding the stem.
192
+
Thus `omelette/src/components/theme/Header/Header.jsx` would be shadowed by `src/customizations/components/theme/Header/Header.jsx`.
174
193
175
-
Shadowing (Volto)
176
-
Webpack provides an "alias" mechanism, where the path for a module can be aliased to another module.
177
-
By using this mechanism Volto enables customization (file overrides), similar to `z3c.jbot.`
194
+
Webpack provides an alias mechanism that allows component shadowing in Volto, where the path for a module can be aliased to another module.
195
+
By using this mechanism of file overrides, or component shadowing, Volto enables customization, similar to `z3c.jbot.`
178
196
179
197
Razzle
180
-
A tool that simplifies SPA and SSR configuration for React projects.
198
+
A tool that simplifies {term}`SPA` and {term}`SSR` configuration for React projects.
181
199
182
200
Webpack
183
201
A tool that loads and bundles code and web resources using loaders.
@@ -194,14 +212,39 @@ Express
194
212
A JavaScript HTTP server with a simple API to build custom applications.
195
213
Volto uses it as its server.
196
214
197
-
Server-Side Rendering (SSR)
198
-
When first loading any Plone page, users will get HTML markup that closely matches the final DOM structure of the React components used to render that page.
215
+
SSR
216
+
server-side rendering
217
+
When a web browser or other HTTP client sends a request, the HTML markup for the page is created on the server, which sends a response consisting of HTML markup back to the client.
199
218
200
-
Single Page Application (SPA)
201
-
A type of JavaScript application that aims to provide a better user experience by avoiding unnecessary reloading of the browser page, instead using AJAX to load backend information.
219
+
In Volto, SSR returns HTML markup that closely matches the final {term}`DOM` structure of the React components used to render that page, but it is not the complete page.
220
+
After the client loads the initial response, then the {term}`hydration` mechanism performs additional rendering on the client side, populating the DOM with additional HTML markup.
202
221
203
-
Hot Module Replacement (HMR)
204
-
A development feature provided by Webpack that automatically reloads, in the browser, the JavaScript modules that have changed on disk.
222
+
In Classic UI, SSR returns the complete page back to the client in the response.
223
+
In some rare cases, additional HTML snippets may be loaded, such as in overlays or dialogs.
224
+
225
+
SSR enables a developer to customize a website per request and per user.
226
+
In addition, SSR can improve performance and search engine optimization (SEO) for a website.
227
+
228
+
DOM
229
+
Document Object Model
230
+
The Document Object Model (DOM) is a programming interface for web documents.
231
+
It represents the page so that programs can change the document structure, style, and content.
232
+
The DOM represents the document as nodes and objects; that way, programming languages, such as JavaScript and React, can interact with the page.
233
+
234
+
SPA
235
+
single page application
236
+
A type of JavaScript application that aims to provide a better user experience by avoiding unnecessary reloading of the browser page, instead using {term}`AJAX` to load backend information.
237
+
238
+
HMR
239
+
hot module replacement
240
+
[Hot module replacement](https://webpack.js.org/guides/hot-module-replacement/) (HMR) is a development feature provided by Webpack that automatically reloads, in the browser, the JavaScript modules that have changed on disk.
241
+
242
+
Ajax
243
+
AJAX
244
+
Asynchronous JavaScript and XML
245
+
AJAX allows web applications to change parts of the page dynamically without reloading the entire page.
246
+
In Plone, after a page with JavaScript is loaded, the JavaScript will send an asynchronous request to the server.
247
+
The server will send a response back to the client, which is then rendered on the client side.
205
248
206
249
Yeoman
207
250
A popular scaffolding tool similar to Plone's `mr.bob` or `ZopeSkel`.
@@ -225,8 +268,8 @@ mrs-developer
225
268
Yarn
226
269
[Yarn](https://classic.yarnpkg.com/) is a JavaScript package manager.
227
270
228
-
Hydration (SSR)
229
-
After loading an HTML page generated with SSR in the browser, React can "populate" the existing DOM elements, recreate and attach their coresponding components.
271
+
Hydration
272
+
After loading an HTML page generated with {term}`SSR` in the browser, React can populate the existing {term}`DOM` elements, and recreate and attach their coresponding components.
230
273
231
274
JSX
232
275
A dialect of JavaScript that resembles XML, it is transpiled by Babel to JavaScript functions.
@@ -235,16 +278,20 @@ JSX
235
278
Scoped packages
236
279
Namespace for JavaScript packages, they provide a way to avoid naming conflicts for common package names.
237
280
238
-
middleware (Redux)
239
-
Custom wrappers for the Redux store dispatch methods.
240
-
They allow customizing the behavior of the data flow inside the redux store.
281
+
Redux
282
+
Redux middleware
283
+
Custom wrappers for the [Redux](https://redux.js.org/) store dispatch methods.
284
+
They allow customizing the behavior of the data flow inside the Redux store.
285
+
286
+
hook
287
+
hooks
288
+
In general, a hook in programming is a place in code that allows you to tap in to a module to either provide different behavior or to react when something happens.
241
289
242
-
hooks (React)
243
-
Hooks are a React API that allow function components to use React features such as lifecycle methods, states, and so on.
290
+
**React [Hooks](https://reactjs.org/docs/hooks-overview.html)** are a React API that allow function components to use React features, such as lifecycle methods, states, and so on.
244
291
245
-
hoisting (Yarn)
246
-
An optimization provided by Yarn.
247
-
By default JavaScript packages will directly include dependencies inside their local node_modules.
292
+
hoisting
293
+
[Hoisting](https://yarnpkg.com/advanced/lexicon#hoisting) is an optimization provided by Yarn.
294
+
By default JavaScript packages will directly include dependencies inside their local `node_modules`.
248
295
By hoisting we're "lifting" these inner dependencies to the top level `node_modules` directory, and thus optimize the generated bundles.
249
296
In case two dependencies have conflicting version dependencies of the same library, the hoisting will not be possible (for that conflicting dependency) and you'll see multiple instances of the same library in the bundle, or you'll see that the add-on receives its own `node_modules` folder.
Copy file name to clipboardExpand all lines: docs/i18n-l10n/translating-text-strings.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -155,7 +155,7 @@ It will use the text content of the element as `msgid`.
155
155
Use attributes `i18n:translate`, `i18n:attributes`, and so on.
156
156
For examples, look at any core Plone `.pt` files.
157
157
158
-
The `i18n:translate` attribute will hook into the translation machinery, and will look up the corresponding translated string to the one stated there, while looking in the relevant `domain.po` file corresponding to the `i18n:domain` stated in the file and the language negotiated by Plone.
158
+
The `i18n:translate` attribute will {term}`hook` into the translation machinery, and will look up the corresponding translated string to the one stated there, while looking in the relevant `domain.po` file corresponding to the `i18n:domain` stated in the file and the language negotiated by Plone.
Copy file name to clipboardExpand all lines: docs/overview/index.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ Plone is easy to set up compared to other CMSs in its category, extremely flexib
74
74
Plone is a content management platform with its backend written in Python.
75
75
It is built on top of the open source Zope web application server and development system.
76
76
Plone makes use of the pluggable Zope Component Architecture (ZCA) to provide a highly modular and extensible system.
77
-
Throughout its history, Plone has used server-side rendering to generate HTML-based content, with advanced resource management features for adding and bundling CSS and JavaScript.
77
+
Throughout its history, Plone has used {term}`server-side rendering` to generate HTML-based content, with advanced resource management features for adding and bundling CSS and JavaScript.
78
78
Additionally, Plone's use of a component architecture makes it easy to extend and customize, allowing users to create unique, feature rich websites that are tailored to their specific needs.
79
79
80
80
With the release of Plone 6, you now have the option to choose from two different out-of-the-box supported configurations when setting up a new Plone website.
@@ -86,7 +86,7 @@ It may be used as a base image, adding customizations, to make a derivative imag
86
86
The default and recommended configuration for new websites in Plone is the new React-based JavaScript frontend called "Volto".
87
87
For this setup you still need to run the Python-based backend server, as well as enable the REST API, and update the configuration profile.
88
88
These settings and profile are applied automatically when you select the {guilabel}`Create Plone Site` option in the Plone website creation form.
89
-
In addition a separate NodeJS based frontend server will serve the JavaScript frontend resources and provide SSR with hydration.
89
+
In addition a separate NodeJS based frontend server will serve the JavaScript frontend resources and provide {term}`SSR` with {term}`hydration`.
90
90
To deploy this setup using containers, you will need the `plone-frontend` image for the frontend server.
91
91
92
92
Beginning with Plone 6, we now support two programming language stacks, one each for Python and JavaScript.
0 commit comments