-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (106 loc) · 4.82 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客文章</title>
<style>
:root {
--background-color: #ffffff;
--text-color: #000000;
--button-color: #757575;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--text-color: #ffffff;
--button-color: #9e9e9e;
}
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 65%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.container {
max-width: 100%;
padding: 10px;
}
}
.content {
line-height: 1.6;
white-space: pre-wrap;
}
.back-button {
position: fixed;
top: 20px;
right: 20px;
background-color: var(--button-color);
color: var(--background-color);
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: background-color 0.3s;
z-index: 1000;
}
.back-button:hover {
background-color: #616161;
}
a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted var(--text-color);
}
.copy-button {
display: inline-block;
cursor: pointer;
margin-left: 5px;
font-size: 0.8em;
vertical-align: super;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1 id="article-title"></h1>
<div id="article-content"></div>
</div>
</div>
<button class="back-button" onclick="window.close()">返回</button>
<script>
const article = { title: '开启我的个人博客', content: '这是我的第一个个人博客，没有买单独的域名，<e style="text-decoration: line-through;">功能也不齐全（换行的显示还不支持）</e>（2024/8/19 现已支持），而且文章是直接存在网页前端程序里<e style="text-decoration: line-through;">（太简陋了）</e>（2024/8/19 因为每个文章界面单独作为page页面，这个问题并不存在），但是目前应该够用了。 \n\n将来的打算是，这个平台作为我发布我文章的地方。<e style="text-decoration: line-through;">微信公众号和知乎我也会同步跟进。</e>（2024/8/19 现不打算同步更新） \n\n但是这个博客与公众号和知乎有什么不同的呢？ \n\n主要是他是我根据我的审美设计的 这样的平台虽然小了，但是却很符合我目前写文章的状态 \n\n也是我的上一次总结里说的，凭借自己的爱好 我是没有盈利的 \n\n当然还有一个原因，有可能其他的平台上我说话有些限制 \n\n在这里就可以发一些我不会在知乎上和公众号上发送的内容 \n\n当然有一些的来源是微信朋友圈 \n\n但是微信朋友圈也有审查（虽然我用的是WeChat账号） 而且传播范围也有限 \n\n所以，博客的计划就这样了 \n\n如果你的编程水平（特别是写网页的）不错 愿意帮我完善这个网站 你可以在"联系"那一栏找到我的微信号和邮箱 \n\n如果你只是单纯的阅读，那也别忘了加个收藏 不然以后就找不到了 （以后肯定会挂域名的，到时候另作通知 \n\n2024/7/26', pinned: true };
function processContent(content) {
return content
.replace(/\[link:(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
.replace(/\[copy-broad:(.*?)\]/g, '$1<span class="copy-button" onclick="copyText(\'$1\')">📋</span>');
}
function copyText(text) {
navigator.clipboard.writeText(text).then(() => {
alert('文本已复制到剪贴板');
}).catch(err => {
console.error('无法复制文本: ', err);
});
}
function loadArticle() {
document.title = article.title;
document.getElementById('article-title').textContent = article.title;
document.getElementById('article-content').innerHTML = processContent(article.content);
}
window.onload = loadArticle;
</script>
</body>
</html>