最近相对比较有空闲，打开博客界面，看来看去总感觉主界面太“平”了，一打开就一个头像几行字，周边全是空白区域，有种很单调的样子，看不下去了，打算做一个自己的主页。

Homepage主页

首先看一下修改后的效果，如下：
img
手机端页面效果:
img

主页的想法

当然这次改变不想改变Chic主题作者的初心，“简约”，一开始想不到什么样子既简约又看起来不单调，在网上找来找去，终于在b站刷到一款自己相对比较称心的简约风格主页

b站链接

OK，这就是我要做的主页模板了！

ejs文件的修改

要改变原本的布局，首先要对原有的组件进行添加或者修改，找到原版的主页文件夹，按照文件路径themes\Chic\layout\_page打开，找到profile.ejs文件，没错了，这就是主页的布局文件，下面是我修改后的ejs文件，各位可以进行参考

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
<link rel="stylesheet" href="../fonts/iconfont3/iconfont.css"> 
<div class="container profile-container">
    <div class="intro">
        <div class="links-container">
            <div class="links">
                <% if (theme.links !== undefined) { %>
                    <% for (var key in theme.links){ %>
                        <a class="link-item" title="<%- key %>" href="<%= theme.links[key] %>">
                            <% if(theme.links_text_enable) { %>
                                <%= key %>
                            <%}%>
                            <%if(theme.links_icon_enable){ %>
                                <i class="iconfont icon-<%- key.toLowerCase() %>"></i>
                            <%}%>
                        </a>
                    <% } %>
                <% } %>
            </div>
        </div>
        <div class="avatar-container">
            <div class="avatar">
                <a href="<%- url_for(theme.nav.Posts) %>"><img src="<%- url_for(theme.avatar) %>"></a>
            </div>
        </div>    
        <div class="content">
            <div class="nickname">
                <span>👋Hi, I'm</span><br>
                <span class="nickname-name"><%- theme.nickname %></span>
            </div>
            <div class="description"><%- markdown(theme.description) %></div>
        </div>
    </div>
</div>

代码相比原有的代码其实基本没有什么改变，主要是加了Hi,I'm这几个字，另外，在这一步有需要比较注意的点是，头像的布局要在content的上面，原因是在手机端布局的时候，头像要布局在content的上面，不然渲染不出来（这一步我踩坑了好久）

styl文件的修改

进入/Chic/source/css/_page文件夹，找到profile.styl文件，在文件渲染代码上，我借助GPT，告诉GPT我的需求：我希望link链接出现在左边竖直排列，然后横向分布文字描述，接着是头像/或者其他东西。巴拉巴拉，经过很久的调整，终于给我生成了下面的代码:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
/** Profile **/
.profile-container
  display flex
  justify-content center
  align-items center
  margin-top 50px

.intro
  display flex
  width 80%
  justify-content space-between
  align-items center
  position relative

.links-container
  display flex
  justify-content flex-start
  width 20%

.links
  display flex
  flex-direction column
  justify-content flex-start
  width 100%
  align-items flex-start

.content
  text-align left
  width 40%
  position relative
  left -450px
  top -20px

.nickname
  font-family 'Arial Rounded MT Bold', 'Arial', sans-serif
  font-size 4em
  font-weight bold
  margin-bottom 20px
  text-shadow 0 0 2px rgba(0, 0, 0, 0.2)
  position relative
  top 0px

.nickname span:first-child
  display block
  margin-bottom 5px

.description
  margin-bottom 20px
  font-family 'Arial Rounded MT Bold', 'Arial', sans-serif

.avatar-container
  width 30%
  position absolute
  right 0
  top 0

.avatar
  padding 10px

.avatar img
  width 200px
  height auto
  display inline-block
  border-radius 100%
  box-shadow 0 0 0 0.3618em rgba(0, 0, 0, 0.05)
  margin 0 auto
  transition all ease 0.4s
  cursor pointer

.avatar img:hover
  position relative
  transform translateY(-0.75em)

.links a
  padding 0 5px
  margin-bottom 10px
  color #333
  text-decoration none
  font-family 'Arial Rounded MT Bold', 'Arial', sans-serif
  margin-left 100px
  .dark-theme &
    color #a5a5a5;

.links a .iconfont
  font-size 1.5em

.links a:hover
  background-color transparent
  color #9966FF
  .dark-theme &
    color #6B8E23

/* 媒体查询，用于手机端 */
@media (max-width 768px)
  .intro
    width 100%
    flex-direction column
    align-items center

  .avatar-container
    position relative
    width 100%
    right auto
    top auto
    display flex
    justify-content center
    margin-bottom 20px

  .avatar
    position relative
    top -170px

  .avatar img
    width 150px
    margin 0 auto

  .content
    width 100%
    left 0
    top -160px
    text-align center
    margin-top 10px

  .nickname
    text-align center
    margin-top 0
    margin-bottom 10px

  .description
    margin-bottom -180px

  .links-container
    width 100%
    margin-top 15px

  .links a
    margin-left 0
    justify-content center

/* 媒体查询，用于平板端 */
@media (min-width 769px) and (max-width 1324px)
  .intro
    width 90%
    flex-direction row
    align-items center

  .avatar-container
    position absolute
    width 25%
    right 0
    top 0

  .avatar img
    width 150px

  .content
    width 50%
    left -280px
    top 0
    text-align left
    margin-top 0

  .nickname
    text-align left
    margin-top 0
    margin-bottom 20px

  .description
    margin-bottom 20px

  .links-container
    width 25%
    margin-top 0
    align-self flex-start

  .links a
    margin-left 0
    justify-content flex-start

在上面的代码中，我还考虑了夜间模式和响应式网页分布（手机端和平板端布局），具体的就不说多了，感兴趣的可以研究一下。

对了完成以上这个步骤后，就完成了！（如果是我们新建的styl文件和ejs文件，我们还需要把他们对应起来，具体可以看《基于HEXO中的Chic主题友链的添加》这篇文章）

(如有错误和不好的地方，请多担待，另外对程序有问题请提出噢！)