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

╰半夏微凉° 2021-09-04 03:22 312阅读 0赞

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

## 1.新建about界面 ##

在控制台使用命令创建

hexo new page about

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

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

## 2.配置menu ##

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

`about: /about/|| user`

## 3. 新增 about.swig 页 ##

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

{% 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` 内部

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

这个位置下添加代码：

#}{% elif page.type === 'about' and not page.title %}{#
     #}{ { __('title.about') + page_title_suffix }}{#

效果如下：

[![lTyNcT.md.png][]][lTyNcT.md.png 1]

## 5. 引入 about.swig ##

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

{% elif page.type === 'about' %}
     {% include 'about.swig' %}

比如我是在 :

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

这个`if`下追加的：

[![lTybgf.md.png][]][lTybgf.md.png 1]

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

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

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

#已办事项
    fplans: 
    
    - time: 2019.12.31
     plan: 博客初始化
     
    #未办事项
    uplans: 
    
    - plan: 关于友链和关于界面的博客
    - plan: 网站运行时间

原模板借鉴[该博客的界面][Link 1]。

[lTyNcT.md.png]: /images/20210813/a72a8b5bd2dd4d5ca548712fd84fd7c3.png
[lTyNcT.md.png 1]: https://imgchr.com/i/lTyNcT
[lTybgf.md.png]: /images/20210813/9cb73b4e4d754c8a8544f1e08cf6daad.png
[lTybgf.md.png 1]: https://imgchr.com/i/lTybgf
[Link 1]: https://tding.top/about/