forked from nimoc/github-comments
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (88 loc) · 4.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Github Comments | gc.js</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<style>
body { font:14px/1.5 Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif } .info { padding: 12px 24px 12px 30px; margin: 2em 0 2em 10px; border-left: 4px solid #fac769; background-color: #f9f9f9; position: relative; border-top-left-radius: 0; border-top-right-radius: 0; } .info:before { position: absolute; top: 50%; margin-top: -17px; left: -17px; background-color: #fac769; color: #fff; content: "i"; width: 30px; height: 30px; border-radius: 100%; text-align: center; line-height: 30px; font-weight: 700; font-family: Georgia; } #top { position: fixed; right: 10px; bottom: 10px; width:25px; height:25px; text-align: center; line-height: 25px; background-color: #999; border-radius: 3px; color: white; font-size:12px; cursor:pointer; display: none; }
</style>
</head>
<body>
<h1>Github 留言系统</h1>
<p class="info" >
让评论质量更高，让网站与 Github 关联<br>
适合程序员的评论系统，基于 Github issues 留言
</p>
<pre style="padding: 16px; font-size: 85%; line-height: 1.45; background-color: #f7f7f7; border-radius: 3px;overflow:scroll;" >
<style>.gc-comments {font:12px/1.5 Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}</style>
<script src="https://unpkg.com/github-comments/gc.js"></script>
<div class="gc-comments" <strong style="color:#1D7FB9;" >data-repos="nimojs/github-comments"</strong> <strong style="color:#1D7FB9;" >data-issues="1"</strong> >
<div class="gc-comments-title">
评论
</div>
<div class="gc-comments-info">
想在此留下评论，请访问 <a target="_blank" href="<strong style="color:#1D7FB9;" >issues_link</strong>"><strong style="color:#1D7FB9;" >issues_link</strong></a> 提交评论
</div>
</div>
</pre>
<p class="code-desc" >
<code>data-repos="<strong style="color:#1D7FB9;" >nimojs/github-comments</strong>"</code><br />
<code>data-issues="<strong style="color:#1D7FB9;">1</strong>"</code><br />
<code><strong style="color:#1D7FB9;" >issues_link</strong></code> 会自动替换成 <code>https://github.com/nimojs/github-comments/issues/1</code>
</p>
<form action="" id="MainForm">
<label>
<strong>填写你的 repos 和 issues id 生成评论列表</strong>
<br>
repos:
<input type="text" id="Repos" placeholder="user/repo" value="fouber/blog" >
</label>
<label>
issues:
<input type="number" id="Issues" value="1">
</label>
<button type="submit">Create</button>
</form>
<br />
<div id="Load"></div>
<style>.gc-comments {font:12px/1.5 Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}</style>
<script src="gc.js"></script>
<div class="gc-comments" data-repos="nimojs/github-comments" data-issues="1" >
<div class="gc-comments-title">
评论
</div>
<div class="gc-comments-info">
想在此留下评论，请访问 <a target="_blank" href="issues_link">issues_link</a> 提交评论
</div>
</div>
<div id="top" onclick="window.scroll(0,0)">Top</div>
<script>
window.onload = function(){
var $Repos = document.getElementById('Repos');
var $Issues = document.getElementById('Issues');
var $Load = document.getElementById('Load');
var $Top = document.getElementById('top');
var $Main = document.getElementById('MainForm');
var processForm = function(e){
e.preventDefault();
$Load.innerHTML='';
gc.load($Repos.value, $Issues.value, $Load);
return false;
};
if ($Main.attachEvent) {
$Main.attachEvent('submit', processForm);
} else {
$Main.addEventListener('submit', processForm);
}
window.onscroll = function(){
if(window.pageYOffset > 1000){
$Top.style='display:block';
} else {
$Top.style='display:none';
}
}
};
</script>
</body>
</html>