Skip to content

Commit

Permalink
やっぱテンプレートもどす
Browse files Browse the repository at this point in the history
  • Loading branch information
@abap34
abap34 committed Nov 12, 2024
1 parent 399b0c9 commit 515d172
Showing 1 changed file with 175 additions and 45 deletions.
220 changes: 175 additions & 45 deletions assets/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-10Y7GMS7GV');
</script>

Expand All @@ -29,76 +30,205 @@

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://latex.vercel.app/style.css">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/{{syntax_theme}}.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/julia.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/julia-repl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/scheme.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/dockerfile.min.js"></script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<style>
h2 {
border-bottom: 1px solid #d3d3d3;
padding-bottom: 0.25em;
}

table {
margin-top: 1em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
}
<script>hljs.highlightAll();</script>

.definition {
margin-left: 1em;
margin-right: 1em;
border: 1px solid #d3d3d3;
padding: 1em;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

.footnote {
border-top: 1px solid #d3d3d3;
margin-top: 2em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>

<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>


{{style}}

<script>
page_contents = []
</script>

{{runner}}


</head>


<body class="latex-dark-auto">
<body>

<div class="article-header">

<div class="title">
{{title}}
</div>

<header>
<h1>{{title}}</h1>
<p class="author">
<br />
<script>
title = document.querySelector(".title").innerHTML;
</script>

<br>
<div class="date">
{{date}}
</p>
</header>
</div>
<br>
<div class="tag-placeholder">
{{tag}}
</div>

<div class="abstract">
<h3>abstract</h3>
<p>{{description}}</p>
</div>

<img src="{{ogp_url}}" alt="ogp" style="width: 100%;">
<div class="article-body">
<div class="content">
{{contents}}

<hr>

<script src="https://utteranc.es/client.js" repo="abap34/abap34com-comment" issue-term="og:title"
label="comment" theme="github-light" crossorigin="anonymous" async>
</script>

</div>

<div class="side">
<div class="side-sticky">
<div class="sidebar">
<ul id="toc"></ul>
</div>

<div class="links">


<div class="to-links">
<a href="https://abap34.com/blog"> <i class="fas fa-book-open" id="toposts"></i> 記事一覧 </a>

<br>


<a href="https://abap34.com"> <i class="fas fa-home" id="tohome"></i> ホーム </a>

<br>
<br>
<br>

<a href="https://www.abap34.com/rss.xml"> <i class="fas fa-rss" id="torss"></i> RSS </a>
</div>
<br>
<br>

<p><i class="icon fab fa-twitter" id="twitter"></i><a href="https://twitter.com/{{twitter_id}}"
class="tolink"> @{{twitter_id}}</a>
</p>
<p><i class="icon fab fa-github" id="github"></i><a href="https://github.com/{{github_id}}"
class="tolink"> @{{github_id}}</a></p>
<p><i class="icon fas fa-envelope" id="mail"></i><a href="mailto:{{mail}}" class="tolink">
{{mail}}</a>
</p>



<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
data-show-count="false" data-via="abap34">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<footer>
<p>&copy; {{author}} </p>
</footer>

</div>
</div>



</div>

</div>

<script>
const tocContainer = document.querySelector("#toc");
const tocTitle = document.createElement("div");
tocTitle.innerHTML = title;
tocTitle.classList.add("toc_title");
tocContainer.appendChild(tocTitle);



page_contents.forEach(item => {
if (item.type == "H1" || item.type === "H2" || item.type === "H3") {
const listItem = document.createElement("li");
listItem.innerHTML = `<a href="#${item.id}">${item.title}</a>`;
listItem.classList.add("toc_" + item.type);
tocContainer.appendChild(listItem);
}
});

const options = {
root: null,
rootMargin: "-50% 0px",
threshold: 0
};

const observer = new IntersectionObserver(onIntersection, options);

page_contents.forEach(item => {
const element = document.getElementById(item.id);
if (element) {
observer.observe(element);
}
});

// page_contensts の先頭を active にしておく
const first_item = document.querySelector(`#toc a[href="#${page_contents[0].id}"]`);
first_item.classList.add("active");

prev_item = first_item;

function onIntersection(entries) {
entries.forEach(entry => {
const id = entry.target.id;
const tocItem = document.querySelector(`#toc a[href="#${id}"]`);
if (tocItem) {
if (entry.isIntersecting) {
tocItem.classList.add("active");
prev_item.classList.remove("active");
prev_item = tocItem;
}
}
});
}



tag = document.querySelector(".tag-placeholder").innerHTML;
document.querySelector(".tag-placeholder").innerHTML = "";

tag = tag.replace("[", "").replace("]", "").split(", ").map(tag => tag.trim());

tag.forEach(tag => {
const each_tag = document.createElement("span");
each_tag.classList.add("tag");
each_tag.innerHTML = "<a href='https://abap34.com/search?tags=" + tag + "'> # " + tag + "</a>";
document.querySelector(".tag-placeholder").appendChild(each_tag);
});
</script>

{{contents}}

<hr>

<script src="https://utteranc.es/client.js" repo="abap34/abap34com-comment" issue-term="og:title" label="comment"
theme="github-light" crossorigin="anonymous" async>
</script>

</body>

Expand Down

0 comments on commit 515d172

Please sign in to comment.