Skip to content

Commit 5ff9e1b

Browse files
committed
Add giscus
1 parent c7f8631 commit 5ff9e1b

File tree

3 files changed

+147
-9
lines changed

3 files changed

+147
-9
lines changed

public/giscus.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/*!
2+
* Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
3+
* Copyright (c) 2018 GitHub Inc.
4+
* https://github.com/primer/primitives/blob/main/LICENSE
5+
*/
6+
main {
7+
--color-prettylights-syntax-comment: #768390;
8+
--color-prettylights-syntax-constant: #6cb6ff;
9+
--color-prettylights-syntax-entity: #dcbdfb;
10+
--color-prettylights-syntax-storage-modifier-import: #adbac7;
11+
--color-prettylights-syntax-entity-tag: #8ddb8c;
12+
--color-prettylights-syntax-keyword: #f47067;
13+
--color-prettylights-syntax-string: #96d0ff;
14+
--color-prettylights-syntax-variable: #f69d50;
15+
--color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
16+
--color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
17+
--color-prettylights-syntax-invalid-illegal-bg: #922323;
18+
--color-prettylights-syntax-carriage-return-text: #cdd9e5;
19+
--color-prettylights-syntax-carriage-return-bg: #ad2e2c;
20+
--color-prettylights-syntax-string-regexp: #8ddb8c;
21+
--color-prettylights-syntax-markup-list: #eac55f;
22+
--color-prettylights-syntax-markup-heading: #316dca;
23+
--color-prettylights-syntax-markup-italic: #adbac7;
24+
--color-prettylights-syntax-markup-bold: #adbac7;
25+
--color-prettylights-syntax-markup-deleted-text: #ffd8d3;
26+
--color-prettylights-syntax-markup-deleted-bg: #78191b;
27+
--color-prettylights-syntax-markup-inserted-text: #b4f1b4;
28+
--color-prettylights-syntax-markup-inserted-bg: #1b4721;
29+
--color-prettylights-syntax-markup-changed-text: #ffddb0;
30+
--color-prettylights-syntax-markup-changed-bg: #682d0f;
31+
--color-prettylights-syntax-markup-ignored-text: #adbac7;
32+
--color-prettylights-syntax-markup-ignored-bg: #255ab2;
33+
--color-prettylights-syntax-meta-diff-range: #dcbdfb;
34+
--color-prettylights-syntax-brackethighlighter-angle: #768390;
35+
--color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
36+
--color-prettylights-syntax-constant-other-reference-link: #96d0ff;
37+
--color-btn-text: #adbac7;
38+
--color-btn-bg: #373e47;
39+
--color-btn-border: #cdd9e51a;
40+
--color-btn-shadow: 0 0 #0000;
41+
--color-btn-inset-shadow: 0 0 #0000;
42+
--color-btn-hover-bg: #444c56;
43+
--color-btn-hover-border: #768390;
44+
--color-btn-active-bg: #3d444d;
45+
--color-btn-active-border: #636e7b;
46+
--color-btn-selected-bg: #2d333b;
47+
--color-btn-primary-text: #fff;
48+
--color-btn-primary-bg: #347d39;
49+
--color-btn-primary-border: #cdd9e51a;
50+
--color-btn-primary-shadow: 0 0 #0000;
51+
--color-btn-primary-inset-shadow: 0 0 #0000;
52+
--color-btn-primary-hover-bg: #46954a;
53+
--color-btn-primary-hover-border: #cdd9e51a;
54+
--color-btn-primary-selected-bg: #347d39;
55+
--color-btn-primary-selected-shadow: 0 0 #0000;
56+
--color-btn-primary-disabled-text: #cdd9e580;
57+
--color-btn-primary-disabled-bg: #347d3999;
58+
--color-btn-primary-disabled-border: #cdd9e51a;
59+
--color-action-list-item-default-hover-bg: #909dab1f;
60+
--color-segmented-control-bg: #636e7b1a;
61+
--color-segmented-control-button-bg: #22272e;
62+
--color-segmented-control-button-selected-border: #636e7b;
63+
--color-fg-default: #adbac7;
64+
--color-fg-muted: #768390;
65+
--color-fg-subtle: #545d68;
66+
--color-canvas-default: #192734;
67+
--color-canvas-overlay: #161b22;
68+
--color-canvas-inset: #15202b;
69+
--color-canvas-subtle: #253341;
70+
--color-border-default: #444c56;
71+
--color-border-muted: #373e47;
72+
--color-neutral-muted: #636e7b66;
73+
--color-accent-fg: #539bf5;
74+
--color-accent-emphasis: #316dca;
75+
--color-accent-muted: #4184e466;
76+
--color-accent-subtle: #388bfd1a;
77+
--color-success-fg: #57ab5a;
78+
--color-attention-fg: #c69026;
79+
--color-attention-muted: #ae7c1466;
80+
--color-attention-subtle: #ae7c1426;
81+
--color-danger-fg: #e5534b;
82+
--color-danger-muted: #e5534b66;
83+
--color-danger-subtle: #e5534b1a;
84+
--color-primer-shadow-inset: 0 0 #0000;
85+
--color-scale-gray-7: #373e47;
86+
--color-scale-blue-8: #143d79;
87+
88+
/*! Extensions from @primer/css/alerts/flash.scss */
89+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
90+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
91+
}
92+
main .pagination-loader-container {
93+
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg);
94+
}
95+
96+
/*! Custom CSS */
97+
.gsc-reactions-count {
98+
display: none;
99+
}
100+
.gsc-timeline {
101+
flex-direction: column-reverse;
102+
}
103+
.gsc-header {
104+
padding-bottom: 1rem;
105+
}
106+
.gsc-comments > .gsc-header {
107+
order: 1;
108+
}
109+
.gsc-comments > .gsc-comment-box {
110+
margin-bottom: 1rem;
111+
order: 2;
112+
}
113+
.gsc-comments > .gsc-timeline {
114+
order: 3;
115+
}
116+
.gsc-homepage-bg {
117+
background-color: #15202b;
118+
}
119+
main .gsc-loading-image {
120+
background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif);
121+
}

src/components/Prose.astro

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
55
prose-headings:underline">
66
<slot />
7-
</div>
7+
</div>
8+
<!-- 用法: prose-[element]:class-to-apply 给所有的 <h1> 标签添加 font-bold 的 Tailwind 类。 -->

src/pages/blog/[page].astro

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,33 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
4949
<p class="read-time"><em>{readTimeMin}</em> 分钟 阅读</p>
5050
</div>
5151
</div>
52-
53-
<Prose>
54-
<Content />
55-
</Prose>
52+
<article id="text">
53+
<Prose>
54+
<Content />
55+
</Prose>
56+
</article>
57+
<script
58+
src="https://giscus.app/client.js"
59+
data-repo="LingLambda/linglambda.github.io"
60+
data-repo-id="R_kgDOOOWNqQ"
61+
data-category="Announcements"
62+
data-category-id="DIC_kwDOOOWNqc4Co3Ed"
63+
data-mapping="pathname"
64+
data-strict="0"
65+
data-reactions-enabled="1"
66+
data-emit-metadata="0"
67+
data-input-position="top"
68+
data-theme="https://blog.llma.top/giscus.css"
69+
data-lang="zh-CN"
70+
crossorigin="anonymous"
71+
async></script>
5672
</BaseLayout>
5773

5874
<style>
5975
em {
6076
font-style: normal;
6177
}
6278

63-
.blog-head {
64-
padding-bottom: 50px;
65-
}
66-
6779
.blog-head > * {
6880
line-height: 50px;
6981
}
@@ -91,4 +103,8 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
91103
.blog-head .other-info p {
92104
color: #808080;
93105
}
106+
107+
#text {
108+
margin: 50px 0;
109+
}
94110
</style>

0 commit comments

Comments
 (0)