这篇文章

这篇文章诞生的原因是我做了几个月网站 (闲得蛋疼)，想要总结一下这几个月来我做网站的感悟。网站的质量虽然说没有那么高，但是也付出了我的不少心血。

我的网站设计风格

无论使用什么cms系统，你可以看到网站的整体风格出来都是差不多的。因为我对网站风格有一种执念，就是让它尽可能的体现清丽的特色.
我的blog:
blog
我的alist:
alist
我的个人主页:
index
我尽可能多的运用透明的设计语言，是为了让整体看起来更加的清新 (同时也是为了展示后面的老婆图[doge])，能感受到，运用了透明的设计之后，网站整体看起来更加的通透，这跟那些比较硬核的设计风格，比如说白配黑之类的是不一样的，那种设计风格对我来说太硬派了，也不符合我二次猿的身份，对吧？
并且，网站的图标大量的使用了粉色的元素，就很猛男，而且你不感觉粉白之间非常搭吗[doge]？

强迫症

高情商：精益求精的设计态度，低情商：强迫症。

我在设计网站的时候确实也有很重的强迫症。我最早上线的网站其实是我的个人alist，刚开始玩这个的时候，看到有大佬贴出了自己的alist美化，我反手就是一个ctrlcv，逝着对我的alist进行美化。其实效果还是可以，但当我发现第一个样式没有统一的元素时，这让我非常不爽，最后只能自己用浏览器控制台自己一个一个去改css，嗯，噩梦开始。的确，我对UI一致性的要求非常的高。

这种强迫症也体现在我网站设计的方方面面。我希望我的大部分网站使用差不多的样式，而且看起来一定要有一致性，UI不一致的话，我会去反复调试很多次。这确实给我带来了不少困扰。但是追求完美总是没有错的。

二次元

这一点恐怕就不必说了，我的网站没上一图流，好像就少了点什么…

感谢https://t.mwm.moe的图片接口，支持设备自适应，图片清晰度也很不错，是我见过的最好的随机图片api之一。

样式分享

butterfly主题美化(搭配一图流):

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
[data-theme="light"]
/* 首页文章卡片 */
#recent-posts > .recent-post-item {
    background: rgba(255, 255, 255, 0.8) !important;
}
[data-theme="light"]
/* 首页侧栏卡片 */
.card-widget {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* 文章页面正文背景 */
[data-theme="light"]
#post {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* 分页页面 */
[data-theme="light"]
#page {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* 归档页面 */
[data-theme="light"]
#archive {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* 标签页面 */
[data-theme="light"]
#tag {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* 分类页面 */
[data-theme="light"]
#category {
    background: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"]
#footer {
    background: transparent !important;
}

/*统一圆角*/
* {
    border-radius: 8px;
}

Alist自定义头部美化:

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
112
113
114
115
116
117
118
119
120
121
122
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://font.onmicrosoft.cn/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-regular.css">

<style>
 /*隐藏视频播放控件*/
 video::-webkit-media-controls {
  display: none !important;
 }

 /*默认样式*/
 body {
  background-image: url('https://t.alcy.cc/moez') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
 }

 /*主列表透明*/
 .hope-c-PJLV-igScBhH-css {
  background-color: rgba(255, 255, 255, 0.6) !important;
 }

 /*readme透明*/
 .hope-c-PJLV-ikSuVsl-css {
  background-color: rgba(255, 255, 255, 0.6) !important;
 }

 /*右上角切换按钮透明*/
 .hope-ui-light .hope-c-PJLV-iaUrmW-css {
  background-color: rgba(255, 255, 255, 0.6) !important;
 }

 .hope-ui-dark .hope-c-PJLV-iaUrmW-css {
  background-color: rgb(32, 36, 37) !important;
 }

 /*右上角切换页面透明*/
 .hope-ui-light .hope-c-zbPwS {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px) !important;
 }

 .hope-ui-dark .hope-c-zbPwS {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
 }

 /*右下角侧边栏按钮透明*/
 .hope-c-PJLV-ijgzmFG-css {
  background-color: transparent !important;
 }

 /*代码块透明*/
 pre {
  background-color: transparent !important;
 }

 /*搜索按钮去除文字*/
 .hope-c-PJLV-ihYBJPK-css {
  display: none !important;
 }

 /*搜索按钮透明*/
 .hope-ui-light .hope-c-PJLV-ikEIIxw-css {
  background-color: rgba(255, 255, 255, 0.6) !important;
 }

 /*功能栏主体透明+毛玻璃*/
 .hope-ui-light .hope-c-hOYTCS {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px) !important;
 }

 .hope-ui-dark .hope-c-hOYTCS {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
 }

 /*莫名奇妙的地方的透明*/
 .hope-c-PJLV-ikaMhsQ-css {
  background: transparent !important;
 }

 .hope-c-PJLV-idaeksS-css {
  background: transparent !important;
 }

 /*通知透明+毛玻璃*/
 .hope-ui-light .hope-c-cIFneQ {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px) !important;
 }

 .hope-ui-dark .hope-c-cIFneQ {
  background: rgb(32, 36, 37) !important;
 }

 .hope-ui-light .hope-c-PJLV-ikAHMBe-css {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px) !important;
 }

 .hope-ui-dark .hope-c-PJLV-ikAHMBe-css {
  background: rgb(32, 36, 37) !important;
 }

 /*全局字体*/
 * {
  font-family: LXGW WenKai, sans-serif;
 }
</style>

<!--看板娘-->
<script>if (localStorage.getItem('modelId') === null) {
  localStorage.setItem('modelId', '5');
  localStorage.setItem('modelTexturesId', '1');
 }
</script>
<script src="https://cdn.mmoe.work/live2d-widget/autoload.js"></script>

<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

最后

我最后要说的是，如果我的工作对你有所帮助，那自然是极好的。你不喜欢我的网站风格，那也没有关系。但如果你从未做过网站，并对此有浓厚的兴趣，那么我希望你能够快点开始制作你的第一个站点。在这个越来越碎片化的时代，维护这样一个传统的网站是不易的。博客、论坛是互联网精神的最后体现。我希望有更多的人开始不受平台约束的创作，就像那句话说的一样”This is for everyone”。