Gmeek/templates/post.html
Meekdai f252d0f16e 通过themeMode配置主题模式修改
目前默认为manual,和固定主题fix
2024-04-02 14:01:54 +08:00

113 lines
4.1 KiB
HTML

{% extends 'base.html' %}
{% block head %}
<meta name="description" content="{{ blogBase['postTitle'] }}">
<title>{{ blogBase['postTitle'] }}</title>
{% if blogBase['highlight']==1 %}<link href="//unpkg.com/@wooorm/starry-night@2.1.1/style/both.css" rel="stylesheet" />{% endif %}
{% endblock %}
{% block style %}
<style>
.postTitle{margin: auto 0;font-size:40px;font-weight:bold;}
.title-right{display:flex;margin:auto 0 0 auto;}
.title-right .circle{padding: 14px 16px;margin-right:8px;}
#postBody{border-bottom: 1px solid var(--color-border-default);padding-bottom:36px;}
#postBody hr{height:2px;}
#cmButton{height:48px;margin-top:48px;}
#comments{margin-top:64px;}
.g-emoji{font-size:24px;}
@media (max-width: 600px) {
body {padding: 8px;}
.postTitle{font-size:24px;}
}
</style>
{{ blogBase['style'] }}
{% endblock %}
{% block header %}
<h1 class="postTitle">{{ blogBase['postTitle'] }}</h1>
<div class="title-right">
<a href="{{ blogBase['homeUrl'] }}"><button id="buttonHome" class="btn btn-invisible circle" title="{{ i18n['home'] }}">
<svg class="octicon" width="16" height="16">
<path id="pathHome" fill-rule="evenodd"></path>
</svg>
</button></a>
{% if blogBase['showPostSource']==1 %}
<a href="{{ blogBase['postSourceUrl'] }}" target="_blank"><button class="btn btn-invisible circle" title="Issue">
<svg class="octicon" width="16" height="16">
<path id="pathIssue" fill-rule="evenodd"></path>
</svg>
</button></a>
{% endif %}
<button class="btn btn-invisible circle" onclick="modeSwitch();" title="{{ i18n['switchTheme'] }}" {%- if blogBase['themeMode']=='fix' -%}style="display:none;"{%- endif -%}>
<svg class="octicon" width="16" height="16" >
<path id="themeSwitch" fill-rule="evenodd"></path>
</svg>
</button>
</div>
{% endblock %}
{% block content %}
<div class="markdown-body" id="postBody">{{ blogBase['postBody'] }}</div>
<div style="font-size:small;margin-top:8px;float:right;">{{ blogBase['bottomText'] }}</div>
<button class="btn btn-block" type="button" onclick="openComments()" id="cmButton">{{ i18n['comments'] }}</button>
<div class="comments" id="comments"></div>
{% endblock %}
{% block script %}
<script>
document.getElementById("pathHome").setAttribute("d",IconList["home"]);
document.getElementById("pathIssue").setAttribute("d",IconList["github"]);
{% if blogBase['commentNum']>0 -%}
cmButton=document.getElementById("cmButton");
span=document.createElement("span");
span.setAttribute("class","Counter");
span.innerHTML="{{ blogBase['commentNum'] }}";
cmButton.appendChild(span);
{%- endif %}
function openComments(){
cm=document.getElementById("comments");
cmButton=document.getElementById("cmButton");
cmButton.innerHTML="loading";
span=document.createElement("span");
span.setAttribute("class","AnimatedEllipsis");
cmButton.appendChild(span);
script=document.createElement("script");
script.setAttribute("src","https://utteranc.es/client.js");
script.setAttribute("repo","{{ blogBase['repoName'] }}");
script.setAttribute("issue-term","title");
{%- if blogBase['themeMode']=='manual' -%}
if(localStorage.getItem("meek_theme")=="dark"){script.setAttribute("theme","dark-blue");}
else if(localStorage.getItem("meek_theme")=="light") {script.setAttribute("theme","github-light");}
else{script.setAttribute("theme","preferred-color-scheme");}
{%- else -%}
script.setAttribute("theme","{{ blogBase['nightTheme'] }}");
{%- endif -%}
script.setAttribute("crossorigin","anonymous");
script.setAttribute("async","");
cm.appendChild(script);
int=self.setInterval("iFrameLoading()",200);
}
function iFrameLoading(){
var utterances=document.getElementsByClassName('utterances');
if(utterances.length==1){
if(utterances[0].style.height!=""){
utterancesLoad=1;
int=window.clearInterval(int);
document.getElementById("cmButton").style.display="none";
console.log("utterances Load OK");
}
}
}
</script>
{% endblock %}