Partials are HTML documents that contain only a part of the complete page. Partials are usually used with web apps where the app logic dynamically constructs the page.
Here’s an example of a partial document, team-member.html:
Such partials usually contain dynamic parts (PHP blocks, AngularJS directives…) but for the sake of simplicity we’ll just use plain HTML for this example. A web app would use such partials to construct its views.
We can open the partial directly in Pinegrow but all the styling and Javascript code will be absent because they are defined by the container page in which partials are rendered by the app.
Open as partial to the rescue!
We can open and edit the partial in a selected container page. In PRJ, right click on the partial document and select Open as partial.
A dialog box will open:
Here we select the container page in which the partial will be shown during editing in Pinegrow. Let’s say our app uses index.html as the main page. We can select index.html.
Now we have to also tell Pinegrow in which part of index.html it should show the partial. We do that by specifying a selector that consist of combination of #ids, .classes, tags, [attributed] and > (child of) tokens. Use the target icon to open the container page and select the place where the partial should be shown. Pinegrow will try to guess the right selector that uniquely identifies the area. At the moment, the logic for that is quite simple, so in some cases it will fail to find a unique selector.
Once the container page and selector are selected, click on Open. The partial will be rendered inside the container. We can only edit the partial, not the rest of the container page. And if we check Page -> Edit code we’ll get only the code of the partial.
Remote urls can also be used as container pages.
When we save the file, only the partial will be saved.
Last updated on February 15, 2017 at 1:59 am