2019-08-04 22:34:23 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
2019-10-04 17:51:08 +08:00
|
|
|
<title>$$.Title$$ - Shiori - Bookmarks Manager</title>
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png">
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png">
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32">
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16">
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
<link href="/css/source-sans-pro.min.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/stylesheet.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/custom-dialog.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/bookmark-item.css" rel="stylesheet">
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
<script src="/js/dayjs.min.js"></script>
|
|
|
|
|
<script src="/js/vue.min.js"></script>
|
2019-08-04 22:34:23 +08:00
|
|
|
</head>
|
|
|
|
|
|
2019-08-05 23:32:43 +08:00
|
|
|
<body class="night">
|
2019-10-04 17:51:08 +08:00
|
|
|
<div id="content-scene" :class="{night: appOptions.nightMode}">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<p id="metadata" v-cloak>Added {{localtime()}}</p>
|
|
|
|
|
<p id="title">$$.Title$$</p>
|
|
|
|
|
<div id="links">
|
|
|
|
|
<a href="$$.URL$$" target="_blank" rel="noopener">View Original</a>
|
|
|
|
|
$$if .HasArchive$$
|
|
|
|
|
<a href="/bookmark/$$.ID$$/archive">View Archive</a>
|
|
|
|
|
$$end$$
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="content" v-pre>
|
|
|
|
|
$$html .HTML$$
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
<script type="module">
|
|
|
|
|
// Create initial variable
|
|
|
|
|
import basePage from "/js/page/base.js";
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
new Vue({
|
|
|
|
|
el: '#content-scene',
|
|
|
|
|
mixins: [basePage],
|
|
|
|
|
data: {
|
|
|
|
|
modified: "$$.Modified$$"
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
localtime() {
|
|
|
|
|
var strTime = `${this.modified.replace(" ", "T")}+00:00`;
|
|
|
|
|
return dayjs(strTime).format("D MMMM YYYY, HH:mm:ss");
|
|
|
|
|
},
|
|
|
|
|
loadSetting() {
|
|
|
|
|
var opts = JSON.parse(localStorage.getItem("shiori-setting")) || {},
|
|
|
|
|
showId = (typeof opts.showId === "boolean") ? opts.showId : false,
|
|
|
|
|
listMode = (typeof opts.listMode === "boolean") ? opts.listMode : false,
|
|
|
|
|
nightMode = (typeof opts.nightMode === "boolean") ? opts.nightMode : false,
|
|
|
|
|
useArchive = (typeof opts.useArchive === "boolean") ? opts.useArchive : false;
|
2019-09-25 08:32:03 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
this.appOptions = {
|
|
|
|
|
showId: showId,
|
|
|
|
|
listMode: listMode,
|
|
|
|
|
nightMode: nightMode,
|
|
|
|
|
useArchive: useArchive,
|
|
|
|
|
};
|
2019-08-04 22:34:23 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
document.body.className = nightMode ? "night" : "";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadSetting();
|
2019-08-05 23:06:00 +08:00
|
|
|
|
2019-10-04 17:51:08 +08:00
|
|
|
document.querySelectorAll("#content a").forEach(elem => {
|
|
|
|
|
elem.setAttribute("target", "_blank");
|
|
|
|
|
elem.setAttribute("rel", "noopener");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2019-08-04 22:34:23 +08:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
