mirror of
https://github.com/ArchiveBox/ArchiveBox
synced 2025-02-16 21:38:33 +00:00
Use template strings for substitution in HTML output
`str.format()` can only use substitutions identified by braces (`{` and
`}`). This has the potential to conflict with other code in the HTML
template, such as CSS or JavaScript.
Template strings can use substitutions identified by `$` or `${}`, e.g.:
`$identifier` or `${identifier}`. These substitutions won't conflict
with CSS or JavaScript, allowing users to write HTML templates that
don't require double braces anywhere there's a substitution conflict.
This is especially useful when one is using a build tool to generate the
final CSS/JavaScript/HTML.
https://docs.python.org/3/library/string.html#template-strings
This commit is contained in:
Brian Hardisty
parent
bca2dceec0
commit
31ec3203c5
3 changed files with 39 additions and 38 deletions
5
index.py
5
index.py
|
|
@ -1,5 +1,6 @@
|
|||
import os
|
||||
from datetime import datetime
|
||||
from string import Template
|
||||
|
||||
from config import INDEX_TEMPLATE, INDEX_ROW_TEMPLATE
|
||||
from parse import derived_link_info
|
||||
|
|
@ -16,7 +17,7 @@ def dump_index(links, service):
|
|||
link_html = f.read()
|
||||
|
||||
article_rows = '\n'.join(
|
||||
link_html.format(**derived_link_info(link)) for link in links
|
||||
Template(link_html).substitute(**derived_link_info(link)) for link in links
|
||||
)
|
||||
|
||||
template_vars = {
|
||||
|
|
@ -27,4 +28,4 @@ def dump_index(links, service):
|
|||
}
|
||||
|
||||
with open(os.path.join(service, 'index.html'), 'w', encoding='utf-8') as f:
|
||||
f.write(index_html.format(**template_vars))
|
||||
f.write(Template(index_html).substitute(template_vars))
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<title>Archived Sites</title>
|
||||
<style>
|
||||
html, body {{
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
|
|
@ -12,63 +12,63 @@
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: "Gill Sans", Helvetica, sans-serif;
|
||||
}}
|
||||
header {{
|
||||
}
|
||||
header {
|
||||
background-color: #aa1e55;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}}
|
||||
header h1 {{
|
||||
}
|
||||
header h1 {
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
}}
|
||||
header h1 small {{
|
||||
}
|
||||
header h1 small {
|
||||
color: white;
|
||||
font-size:0.5em;
|
||||
}}
|
||||
header h1 small a {{
|
||||
}
|
||||
header h1 small a {
|
||||
text-decoration: none;
|
||||
color: orange;
|
||||
opacity: 0.6
|
||||
font-weight: 300;
|
||||
}}
|
||||
header h1 small a:hover {{
|
||||
}
|
||||
header h1 small a:hover {
|
||||
opacity: 1;
|
||||
}}
|
||||
table {{
|
||||
}
|
||||
table {
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
}}
|
||||
table thead th {{
|
||||
}
|
||||
table thead th {
|
||||
font-weight: 400;
|
||||
}}
|
||||
tbody tr:nth-child(odd) {{
|
||||
}
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: #ffebeb;
|
||||
}}
|
||||
table tr td {{
|
||||
}
|
||||
table tr td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0.4em;
|
||||
padding-top: 0.4em;
|
||||
padding-left: 2px;
|
||||
}}
|
||||
table tr td img {{
|
||||
}
|
||||
table tr td img {
|
||||
height: 24px;
|
||||
padding: 0px;
|
||||
padding-right: 5px;
|
||||
text-indent: -10000px;
|
||||
}}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 title="Last modified {time_updated}">
|
||||
<h1 title="Last modified ${time_updated}">
|
||||
<img src="https://nicksweeting.com/images/archive.png" height="36px">
|
||||
Archived Sites <img src="https://getpocket.com/favicon.ico" height="36px"> <br/>
|
||||
<small>
|
||||
Archived with: <a href="https://github.com/pirate/bookmark-archiver">Bookmark Archiver</a> on {date_updated}
|
||||
Archived with: <a href="https://github.com/pirate/bookmark-archiver">Bookmark Archiver</a> on ${date_updated}
|
||||
</small>
|
||||
</h1>
|
||||
</header>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th style="width: 120px;"><img src="https://getpocket.com/favicon.ico" height="12px"> Starred</th>
|
||||
<th style="width: 45vw;">Saved Articles ({num_links})</th>
|
||||
<th style="width: 45vw;">Saved Articles (${num_links})</th>
|
||||
<th style="width: 50px">Files</th>
|
||||
<th style="width: 50px">PDF</th>
|
||||
<th style="width: 60px;font-size:0.8em;">Screenshot</th>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<th style="width: 100px;whitespace:nowrap;overflow-x:scroll;display:block">Original URL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
<tbody>${rows}</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<tr>
|
||||
<td>{time}</td>
|
||||
<td><a href="{archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="{title}">
|
||||
<img src="{favicon_url}">
|
||||
{title} <small style="background-color: #eee;border-radius:4px; float:right">{tags}</small>
|
||||
<td>${time}</td>
|
||||
<td><a href="${archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="${title}">
|
||||
<img src="${favicon_url}">
|
||||
${title} <small style="background-color: #eee;border-radius:4px; float:right">${tags}</small>
|
||||
</td>
|
||||
<td style="text-align:center"><a href="{files_url}" title="Files">📂</a></td>
|
||||
<td style="text-align:center"><a href="{pdf_link}" title="PDF">📄</a></td>
|
||||
<td style="text-align:center"><a href="{screenshot_link}" title="Screenshot">🖼</a></td>
|
||||
<td style="text-align:center"><a href="{archive_org_url}" title="Archive.org">🏛</a></td>
|
||||
<td>🔗 <img src="{google_favicon_url}" height="16px"> <a href="{url}">{url}</a></td>
|
||||
</tr
|
||||
<td style="text-align:center"><a href="${files_url}" title="Files">📂</a></td>
|
||||
<td style="text-align:center"><a href="${pdf_link}" title="PDF">📄</a></td>
|
||||
<td style="text-align:center"><a href="${screenshot_link}" title="Screenshot">🖼</a></td>
|
||||
<td style="text-align:center"><a href="${archive_org_url}" title="Archive.org">🏛</a></td>
|
||||
<td>🔗 <img src="${google_favicon_url}" height="16px"> <a href="${url}">${url}</a></td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue