这篇文章主要记录作者个人站点的布局样式调整

Halo博客主题目录结构

├── module                      // 公共模板目录
│   ├── comment.ftl             // 比如:评论模板
│   ├── layout.ftl              // 比如:布局模板
├── source                      // 静态资源目录
│   ├── css                     // 样式目录
│   ├── images                  // 图片目录
│   ├── js                      // JS 脚本目录
│   └── plugins                 // 前端库目录
├── index.ftl                   // 首页
├── post.ftl                    // 文章页
├── post_xxx.ftl                    // 自定义文章模板,如:post_diary.ftl。可在后台发布文章时选择。
├── sheet.ftl                   // 自定义页面
├── sheet_xxx.ftl               // 自定义模板,如:sheet_search.ftl、sheet_author.ftl。可在后台发布页面时选择。
├── archives.ftl                // 归档页
├── categories.ftl              // 分类目录页
├── category.ftl                // 单个分类的所属文章页
├── tags.ftl                    // 标签页面
├── tag.ftl                     // 单个标签的所属文章页
├── search.ftl                  // 搜索结果页
├── links.ftl                   // 内置页面:友情链接
├── photos.ftl                  // 内置页面:图库
├── journals.ftl                // 内置页面:日志
├── 404.ftl                     // 404 页
├── 500.ftl                     // 500 页
├── README.md                   // README,一般用于主题介绍或说明
├── screenshot.png              // 主题预览图
├── settings.yaml               // 主题选项配置文件
└── theme.yaml                  // 主题描述文件

了解主题的文件目录结构,对于定制修改样式是很重要的。

页脚图标

image.png

Html代码

将下面代码放到footer.ftl文件footer标签中

<div class=inner>
  <div class=site-info>
    <div class="footertext">
      <p class="foo-logo"
         style="background-image: url('${settings.footer_logo?default('https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.2/img/Sakura/images/sakura.svg')}');"></p>
    </div>
    <p>&copy; 2017 - 2020&nbsp;
      <a href="https://www.foreverblog.cn/" target="_blank" style="margin:auto;width:115px;"> <img src="https://img.foreverblog.cn/logo_en_default.png" alt="十年之约" style="width:auto;height:12px;"> </a>
      <a href="https://zhangfeibiao.com"> 一树梨花落海棠</a> •
      <a href="https://cdn.zhangfeibiao.com/zhangfeibiao.com.png" target=_blank>赣ICP备17016845号</a><br>
    </p>
  </div>

  <div class=footer-badge>
    <a style="color: #fff" rel=license href="http://halo.run" target=_blank title="由 Halo 驱动">
      <span class=badge-subject>Powered</span><span class="badge-value bg-blue">Halo</span></a>
  </div>
  <div class=footer-badge>
    <a style="color: #fff" rel=license href="https://github.com/LIlGG/halo-theme-sakura" target=_blank title="本站主题为Sakura主题by LIlGG">
      <span class=badge-subject>Theme</span><span class="badge-value bg-red">Sakura by LIlGG</span></a>
  </div>
  <div class=footer-badge>
    <a style="color: #fff" rel=license href="https://www.qiniu.com/" target=_blank title="本站CDN加速/云存储由七牛云提供">
      <span class=badge-subject>Storage</span><span class="badge-value bg-red">七牛云</span></a>
  </div>
  <div class=footer-badge>
    <a style="color: #fff" rel=license href="https://cn.aliyun.com/" target=_blank title="运行于阿里云服务器">
      <span class=badge-subject>Hosted</span><span class="badge-value bg-brightgreen">阿里云</span></a>
  </div>
  <div class=footer-badge>
    <span class=badge-subject>运行</span><span class="badge-value bg-blueviolet" target=_blank title="本站已运行"><span id=span_dt_dt></span></span>
  </div>
<script async src="//js.users.51.la/20942519.js"></script>
</div>

CSS样式

将下面的的css代码放到style.css中,发布时压缩后放到style.min.css中

<style>
  .foot-inner {
    margin: 0 auto;
    max-width: 800px;
  }
  .site-info {
    text-align: center;
    letter-spacing: 2px;
    color: #b9b9b9;
  }
  .site-footer {
    padding-bottom: 40px;
    text-align: center;
  }
  .site-footer p {
    line-height: 1.4rem;
    margin: 10px 0 20px 0;
  }
  .footer-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #abbac3;
    margin-bottom: 5px;
  }
  .footer-badge .bg-red {
    background-color: #e05d44!important;
  }
  .footer-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .footer-badge .bg-blue {
    background-color: #007ec6!important;
  }
  .footer-badge .bg-orange {
    background-color: orange!important;
  }
  .footer-badge .bg-brightgreen {
    background-color: #4dc820!important;
  }
  .footer-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .footer-badge .bg-blueviolet {
    background-color: #8833d7!important;
  }
  .footer-badge .statistics {
    display: inline-block;
    background-color: #41A5F5;
    color: #fff;
    padding: 4px 4px 3px 6px;
    font-family: arial;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
   }
</style>

js代码

下面是运行时间的js代码,可以放到footer.ftl中

<script>function show_date_time(){if($("#span_dt_dt").length>0){window.setTimeout("show_date_time()",1000);BirthDay=new Date("11/25/2017 12:00:00");today=new Date();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000;secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000;e_daysold=timeold/msPerDay;daysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;hrsold=Math.floor(e_hrsold);e_minsold=(e_hrsold-hrsold)*60;minsold=Math.floor((e_hrsold-hrsold)*60);seconds=Math.floor((e_minsold-minsold)*60);span_dt_dt.innerHTML=daysold+"天";}}show_date_time();</script>

模仿知乎卡片样式

一树梨花落海棠的博客

js代码

引入js链接

<script src="https://cdn.jsdelivr.net/gh/zhangfeibiao/files@master/js/linkCard.js"></script>

由于开启了pjax,页面的局部js容易失效,需将下面js代码放入到全局文件中主

document.addEventListener('pjax:complete', function (e) {
    NProgress.done();

    //增加 LinkCard 的 js 代码
    var LinkCards=document.getElementsByClassName('LinkCard');
    if(LinkCards.length != 0){
	var LinkCard=LinkCards[0];
	var link=LinkCard.href;
	var title=LinkCard.innerText;
	LinkCard.innerHTML="<style type=text/css>.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard{position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.LinkCard-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,0.88)}.LinkCard-text{overflow:hidden}.LinkCard-title{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}.LinkCard-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.LinkCard-imageCell{margin-left:8px;border-radius:6px}.LinkCard-image{display:block;width:60px;height:auto;border-radius:inherit}</style><span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center>​<svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=https://site-1258928558.cos.ap-guangzhou.myqcloud.com/linkcard.png></span></span>";

	for (var i = LinkCards.length - 1; i >= 1; i--) {
		LinkCard=LinkCards[i];
		title=LinkCard.innerText;
		link=LinkCard.href;
		LinkCard.innerHTML="<span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center>​<svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=https://site-1258928558.cos.ap-guangzhou.myqcloud.com/linkcard.png></span></span>";
		}
	}
}

使用方式

在写文章的时候通过html代码方式引入即可

<a href="https://zhangfeibiao.com" class="LinkCard" target="_blank">一树梨花落海棠的博客</a>

note样式

示例

这里是 info 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 danger 标签样式

css代码

/* note 公共样式 */
.note {
    position: relative;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: initial;
    border-left: 3px solid #eee;
    background-color: #f9f9f9;
	border-radius: 3px;
	font-size: var(--content-font-size);
}

.note:not(.no-icon):before {
    position: absolute;
    font-family: FontAwesome;
    font-size: larger;
    top: 11px;
    left: 15px;
}

.note:not(.no-icon) {
    padding-left: 45px;
}

.note.info {
    background-color: #eef7fa;
	border-left-color: #428bca;
}

.note.info:not(.no-icon):before {
    content: "\f05a";
    color: #428bca;
}

.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}

.note.warning:not(.no-icon):before {
    content: "\f06a";
    color: #f0ad4e;
}

.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}

.note.primary:not(.no-icon):before {
    content: "\f055";
    color: #6f42c1;
}

.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}

.note.danger:not(.no-icon):before {
    content: "\f056";
    color: #d9534f;
}

使用方式

<div class="note info">这里是 info 标签样式</div>

<div class="note info no-icon">这里是不带符号的 info 标签样式</div>

<div class="note primary">这里是 primary 标签样式</div>

<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>

<div class="note warning">这里是 warning 标签样式</div>

<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>

<div class="note danger">这里是 danger 标签样式</div>

<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

鸣谢
非常感谢Sanarous的优秀文章 halo 博客深度定制与美化教程

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

越努力,越幸运!