基于Hexo与diaspora主题的博客美化补充(查缺补漏)

前言

本文会不断更新大概反正就是查缺补漏，感觉有什么可以补的就加上去，其实目前已经能够自定义大部分内容了，可以将网站做成自己大致喜欢的样子。

增加友链界面

在blog文件夹下打开终端，新建一个页面

hexo new page links

进入source文件夹下的links文件夹，打开index.md

写入以下代码，其实就是一段css再接上几个div

<div class="post-body">
   <div id="links">
      <style>
         .links-content{
         margin-top:1rem;
         }
         .link-navigation::after {
         content: " ";
         display: block;
         clear: both;
         }
         .card {
         width: 45%;
         font-size: 1rem;
         padding: 10px 20px;
         border-radius: 4px;
         transition-duration: 0.15s;
         margin-bottom: 1rem;
         display:flex;
         }
         .card:nth-child(odd) {
         float: left;
         }
         .card:nth-child(even) {
         float: right;
         }
         .card:hover {
         transform: scale(1.1);
         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
         }
         .card a {
         border:none;
         }
         .card .ava {
         width: 3rem!important;
         height: 3rem!important;
         margin:0!important;
         margin-right: 1em!important;
         border-radius:4px;
         }
         .card .card-header {
         font-style: italic;
         overflow: hidden;
         width: 100%;
         }
         .card .card-header a {
         font-style: normal;
         color: #2bbc8a;
         font-weight: bold;
         text-decoration: none;
         }
         .card .card-header a:hover {
         color: #d480aa;
         text-decoration: none;
         }
         .card .card-header .info {
         font-style:normal;
         color:#a3a3a3;
         font-size:14px;
         min-width: 0;
         overflow: hidden;
         white-space: nowrap;
         }
      </style>
      <div class="links-content">
         <div class="link-navigation">
            <div class="card">
               <img class="ava" src="图标地址" />
               <div class="card-header">
                  <div>
                     <a href="域名">名称</a>
                  </div>
                  <div class="info">网站描述</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

之后在每次hexo g时，就会生成一个links/index.html文件。同时由于它不在source/_posts文件中，hexo不会把它当成一篇新博客加入首页。

需要增加友链，就复制粘贴多个以下内容即可

            <div class="card">
               <img class="ava" src="图标地址" />
               <div class="card-header">
                  <div>
                     <a href="域名">名称</a>
                  </div>
                  <div class="info">网站描述</div>
               </div>
            </div>

然后进入主题的配置文件_config.yml中找到menu部分，加一行即可

友链: /links

友链界面就添加好了，生成部署后就能看见效果。

增加关于界面

关于界面和友链界面一样，在blog文件夹下打开终端，新建一个页面

hexo new page about

在进入主题的配置文件_config.yml中找到menu部分，加一行

 关于： /about

然后就可以在进入source文件夹下的about文件夹，打开index.md

在里面写内容即可，如果需要个性化，找一个感觉不错的css作业抄，然后改文字内容即可

修改网站图标等信息

diaspora主题的logo等信息都是一张张图片，进入source文件夹下的img内

将自己想要跟换的图片放进去，重命名，替换掉原有的图片，即可完成替换

favicon.png就是网站小图标

logo.png就是博客上显示的字样图标

写在最后

学无止境，不断进步。