博客优化之创建关于我界面

发表于 | 分类于 | | 阅读次数: | 次
字数统计: 1k字 | 阅读时长 ≈ 5分钟

​ 很久之前就像弄一个about界面，现在借鉴了一下别人的界面，按照自己的想法修改了一部分，特地写出该博客来记录一下。

1.新建about界面

​ 在控制台使用命令创建

1
hexo new page about

然后在博客根目录 /source 下会生成一个 about 文件夹，打开其中的 index.md 文件，在头部写入 type = “about”，如下： 

1
2
3
title: 关于我
date: 2019-08-11 15:34:16
type: "about"

2.配置menu

主题配置文件中menu下应用：

about: /about/|| user

3. 新增 about.swig 页

在 /themes/next/layout/ 新建 about.swig，内容如下： 

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
{% block content %}
  {######################}
  {### ABOUT BLOCK ###}
  {######################}

    <div id="about">
        <style>

            #about{
               margin-top: 5rem;
            }
            .blockquote-center{
                 font-size: 1em;
                line-height: 2;
                font-family: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", sans-serif;
                overflow-wrap: break-word;
                color: #666;
                border-left: none;
                margin: 40px 0;
                padding: 0;
                position: relative;
                text-align: center;
            }
            .note primary{
                font-size: 1em;
                line-height: 2;
                color: #000;
                font-family: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", sans-serif;
                overflow-wrap: break-word;
                text-align: justify;
                border-radius: 3px;
                margin-bottom: 20px;
                padding: 15px;
                position: relative;
                border: initial;
                border-left: 3px solid #eee;
                padding-left: 45px;
                background: #f5f0fa;
                border-left-color: #6f42c1;
            }
            .note info{
                font-size: 1em;
                line-height: 2;
                color: #000;
                font-family: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", sans-serif;
                overflow-wrap: break-word;
                text-align: justify;
                border-radius: 3px;
                margin-bottom: 20px;
                padding: 15px;
                position: relative;
                border: initial;
                border-left: 3px solid #eee;
                padding-left: 45px;
                background: #eef7fa;
                border-left-color: #428bca;
            }
            .note success{
                font-size: 1em;
                line-height: 2;
                color: #000;
                font-family: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", sans-serif;
                overflow-wrap: break-word;
                text-align: justify;
                border-radius: 3px;
                margin-bottom: 20px;
                padding: 15px;
                position: relative;
                border: initial;
                border-left: 3px solid #eee;
                padding-left: 45px;
                background: #eff8f0;
                border-left-color: #5cb85c;
            }
        </style>
        <div class="about-content">
            <div class="about-navigation">

                <blockquote class="blockquote-center"><p>希望能在最美好的年代遇见最美的你</p></blockquote>
                <hr>
                <div class="note primary">
                <h2 id="基础信息"><a href="#基础信息" class="headerlink" title="基础信息"></a>基础信息</h2><ul><li>GitHub：<a href="https://github.com/jomeswang" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/jomeswang</a></li><li> 坐标：深圳</li><li>一个正在征途路上勇敢前进的小伙子</li></ul>
                </div>
                <div class="note info">
                <h2 id="兴趣爱好"><a href="#兴趣爱好" class="headerlink" title="兴趣爱好"></a>兴趣爱好</h2><ul><li>跑步</li><li>吹水</li></ul>
                </div>
                <div class="note success">
                 <h2 id="更新日志"><a href="#更新日志" class="headerlink" title="更新日志"></a>更新日志</h2>
                 <ul>
                    {% for fplan in theme.fplans %}
                        <li>{{ fplan.time}}***{{ fplan.plan }}</li>
                                                        
                     {% endfor %}
                 </ul>
                </div>
                <div class="note warning">
                    <h2 id="待办事项"><a href="#待办事项" class="headerlink" title="待办事项"></a>待办事项</h2>
                    <ul>
                    {% for uplan in theme.uplans %}
                        <li>{{ uplan.plan }}</li>
                                                        
                     {% endfor %}
                 </ul>
                </div>

            </div>
            {{ page.content }}
            </div>
        </div>

  {##########################}
  {### END ABOUT BLOCK ###}
  {##########################}
{% endblock %}

4. 修改 page.swig

修改 /themes/next/layout/page.swig 文件，在开头的 block title 内部 

1
2
#}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

这个位置下添加代码： 

1
2
3
<!-- 关于自己-->
#}{% elif page.type === 'about' and not page.title %}{#
  #}{{ __('title.about') + page_title_suffix }}{#

效果如下： lTyNcT.md.png

5. 引入 about.swig

接着在 /themes/next/layout/page.swig 中 PAGE BODY 内部，引入刚才新建的 page.swig 

1
2
3
<!-- 关于自己-->
{% elif page.type === 'about' %}
	{% include 'about.swig' %}

比如我是在 :

1
{% elif page.type === 'categories' %}

这个if下追加的： lTybgf.md.png

到这里就完成页面样式的配置了 .

6.配置待办事项和已更新事项

在/next/_config.yml中最后添加如下内容

1
2
3
4
5
6
7
8
9
10
11
#已办事项
fplans: 

- time: 2019.12.31
  plan: 博客初始化
  
#未办事项
uplans: 

- plan: 关于友链和关于界面的博客
- plan: 网站运行时间

原模板借鉴该博客的界面。

-------------本文结束 感谢您的阅读-------------
相关文章
点击查看