mirror of
https://github.com/zadam/trilium.git
synced 2025-10-09 23:18:46 +08:00
Merge b8851565eb
into 4d4cd7d130
This commit is contained in:
commit
33f3af8ab2
4 changed files with 52 additions and 4 deletions
|
@ -66,6 +66,7 @@ export default [
|
|||
{ type: "label", name: "shareDisallowRobotIndexing" },
|
||||
{ type: "label", name: "shareCredentials" },
|
||||
{ type: "label", name: "shareIndex" },
|
||||
{ type: "label", name: "shareHtmlLocation" },
|
||||
{ type: "label", name: "displayRelations" },
|
||||
{ type: "label", name: "hideRelations" },
|
||||
{ type: "label", name: "titleTemplate", isDangerous: true },
|
||||
|
@ -105,6 +106,7 @@ export default [
|
|||
{ type: "relation", name: "renderNote", isDangerous: true },
|
||||
{ type: "relation", name: "shareCss" },
|
||||
{ type: "relation", name: "shareJs" },
|
||||
{ type: "relation", name: "shareHtml" },
|
||||
{ type: "relation", name: "shareTemplate" },
|
||||
{ type: "relation", name: "shareFavicon" }
|
||||
];
|
||||
|
|
|
@ -50,5 +50,6 @@ These relations are supported and used internally by Trilium.
|
|||
| `widget_relation` | target of this relation will be executed and rendered as a widget in the sidebar |
|
||||
| `shareCss` | CSS note which will be injected into the share page. CSS note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree` and `share_omit_default_css` as well. |
|
||||
| `shareJs` | JavaScript note which will be injected into the share page. JS note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |
|
||||
| `shareHtml` | HTML note which will be injected into the share page at locations specified by the `shareHtmlLocation` label. HTML note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |
|
||||
| `shareTemplate` | Embedded JavaScript note that will be used as the template for displaying the shared note. Falls back to the default template. Consider using `share_hidden_from_tree`. |
|
||||
| `shareFavicon` | Favicon note to be set in the shared page. Typically you want to set it to share root and make it inheritable. Favicon note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |
|
|
@ -67,6 +67,23 @@ The default design should be a good starting point, but you can customize it usi
|
|||
|
||||
You can inject custom JavaScript into the shared note using the `~shareJs` relation. This allows you to access note attributes or traverse the note tree using the `fetchNote()` API, which retrieves note data based on its ID.
|
||||
|
||||
### Adding custom HTML
|
||||
|
||||
You can inject custom HTML snippets into specific locations of the shared page using the `~shareHtml` relation. The HTML note should contain the raw HTML content you want to inject, and you can control where it appears by adding the `#shareHtmlLocation` label to the HTML snippet note itself.
|
||||
|
||||
The `#shareHtmlLocation` label accepts values in the format `location:position`:
|
||||
- **Locations**: `head`, `body`, `content`
|
||||
- **Positions**: `start`, `end`
|
||||
|
||||
For example:
|
||||
- `#shareHtmlLocation=head:start` - Injects HTML at the beginning of the `<head>` section
|
||||
- `#shareHtmlLocation=head:end` - Injects HTML at the end of the `<head>` section (default)
|
||||
- `#shareHtmlLocation=body:start` - Injects HTML at the beginning of the `<body>` section
|
||||
- `#shareHtmlLocation=content:start` - Injects HTML at the beginning of the content area
|
||||
- `#shareHtmlLocation=content:end` - Injects HTML at the end of the content area
|
||||
|
||||
If no location is specified, the HTML will be injected at `content:end` by default.
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
|
@ -106,7 +123,7 @@ To do so, create a shared text note and apply the `shareIndex` label. When viewe
|
|||
|
||||
## Attribute reference
|
||||
|
||||
<table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also <a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a> for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li data-list-item-id="e6baa9f60bf59d085fd31aa2cce07a0e7">Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li data-list-item-id="ec0d067db136ef9794e4f1033405880b7">Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr></tbody></table>
|
||||
<table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also <a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a> for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li data-list-item-id="e6baa9f60bf59d085fd31aa2cce07a0e7">Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li data-list-item-id="ec0d067db136ef9794e4f1033405880b7">Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr><tr><td><code>shareHtmlLocation</code></td><td>defines where custom HTML injected via <code>~shareHtml</code> relation should be placed. Applied to the HTML snippet note itself. Format: <code>location:position</code> where location is <code>head</code>, <code>body</code>, or <code>content</code> and position is <code>start</code> or <code>end</code>. Defaults to <code>content:end</code>.</td></tr></tbody></table>
|
||||
|
||||
## Credits
|
||||
|
||||
|
|
|
@ -1,7 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<% const hasTree = subRoot.note.hasVisibleChildren(); %>
|
||||
<%
|
||||
const hasTree = subRoot.note.hasVisibleChildren();
|
||||
|
||||
// Collect HTML snippets by location
|
||||
const htmlSnippetsByLocation = {};
|
||||
for (const htmlRelation of note.getRelations("shareHtml")) {
|
||||
const htmlNote = htmlRelation.targetNote;
|
||||
if (htmlNote) {
|
||||
let location = htmlNote.getLabelValue("shareHtmlLocation") || "content:end";
|
||||
// Default to :end if no position specified
|
||||
if (!location.includes(":")) {
|
||||
location = location + ":end";
|
||||
}
|
||||
if (!htmlSnippetsByLocation[location]) {
|
||||
htmlSnippetsByLocation[location] = [];
|
||||
}
|
||||
htmlSnippetsByLocation[location].push(htmlNote.getContent());
|
||||
}
|
||||
}
|
||||
const renderSnippets = (location) => {
|
||||
const snippets = htmlSnippetsByLocation[location];
|
||||
return snippets ? snippets.join("\n") : "";
|
||||
};
|
||||
%>
|
||||
<%- renderSnippets("head:start") %>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
@ -53,6 +77,7 @@
|
|||
<meta name="twitter:image" content="<%= openGraphImage %>">
|
||||
<!-- Meta Tags Generated via https://opengraph.dev -->
|
||||
<meta name="theme-color" content="<%= openGraphColor %>">
|
||||
<%- renderSnippets("head:end") %>
|
||||
</head>
|
||||
<%
|
||||
const customLogoId = subRoot.note.getRelation("shareLogo")?.value;
|
||||
|
@ -72,6 +97,7 @@ content = content.replaceAll(headingRe, (...match) => {
|
|||
});
|
||||
%>
|
||||
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %><%= themeClass %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
|
||||
<%- renderSnippets("body:start") %>
|
||||
<div id="mobile-header">
|
||||
<a href="<%= shareRootLink %>">
|
||||
<img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
|
||||
|
@ -121,8 +147,8 @@ content = content.replaceAll(headingRe, (...match) => {
|
|||
</div>
|
||||
<div id="right-pane">
|
||||
<div id="main">
|
||||
|
||||
<div id="content" class="type-<%= note.type %><% if (note.type === "text") { %> ck-content<% } %><% if (isEmpty) { %> no-content<% } %>">
|
||||
<%- renderSnippets("content:start") %>
|
||||
<h1 id="title"><%= note.title %></h1>
|
||||
<% if (isEmpty && (!note.hasVisibleChildren() && note.type !== "book")) { %>
|
||||
<p>This note has no content.</p>
|
||||
|
@ -132,6 +158,7 @@ content = content.replaceAll(headingRe, (...match) => {
|
|||
%>
|
||||
<%- content %>
|
||||
<% } %>
|
||||
<%- renderSnippets("content:end") %>
|
||||
</div>
|
||||
|
||||
<% if (note.hasVisibleChildren() || note.type === "book") { %>
|
||||
|
@ -164,7 +191,7 @@ content = content.replaceAll(headingRe, (...match) => {
|
|||
</div>
|
||||
<% } %>
|
||||
|
||||
<% if (hasTree) { %>
|
||||
<% if (hasTree) { %>
|
||||
<%- include("prev_next", { note: note, subRoot: subRoot }) %>
|
||||
<% } %>
|
||||
</footer>
|
||||
|
@ -205,5 +232,6 @@ content = content.replaceAll(headingRe, (...match) => {
|
|||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<%- renderSnippets("body:end") %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Add table
Reference in a new issue