配置 Hugo 主题 Meme

卡片风格

在文件 ~/assets/scss/custom/_custom.scss 中添加以下样式:

 1.mytag{
 2    position: relative;
 3    left: 0; right: 0;
 4    width: 100%;
 5    height: 100%;
 6    line-height: 2;
 7    margin: auto;
 8    border-radius: 5px;
 9    background: rgba(255, 255, 255, .2);
10    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .5);
11    overflow: hidden;
12}
13.mytag::before{
14    content: '';
15    position: relative;
16    left: 0; right: 0;
17    filter: blur(20px);
18    z-index: -1;
19    margin: -30px;
20}

代码:

1<div class="mytag">
2<p style="margin:25px">
3   <b>"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。"<br />上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。"</b>
4</p>
5<div style="text-align:right;margin:15px" ><footer>——<cite>杨绛</cite></footer></div>
6</div>

效果:

"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。"
上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。"

——杨绛

文字渐变色

在文件 ~/assets/scss/custom/_custom.scss 中添加 渐变 样式:

1.colorfulfont {
2background: linear-gradient(to right, red,#45ed63);
3-webkit-background-clip: text;
4color: transparent;
5}

代码:

1<font class = "colorfulfont">
2毕竟西湖六月中<br>风光不与四时同<br>接天莲叶无穷碧<br>映日荷花别样红
3</font>
毕竟西湖六月中
风光不与四时同
接天莲叶无穷碧
映日荷花别样红

添加博客已运行时间

在文件 ~/asserts/js/custom.js 中添加以下内容:

 1//计算博客运行时间(2020.06.03添加)
 2function siteTime(){
 3    window.setTimeout("siteTime()", 1000);
 4    var seconds = 1000
 5    var minutes = seconds * 60
 6    var hours = minutes * 60
 7    var days = hours * 24
 8    var years = days * 365
 9    var today = new Date()
10    var todayYear = today.getFullYear()
11    var todayMonth = today.getMonth() + 1
12    var todayDate = today.getDate()
13    var todayHour = today.getHours()
14    var todayMinute = today.getMinutes()
15    var todaySecond = today.getSeconds()
16    var t1 = Date.UTC(2019, 11, 26, 19, 06, 00)
17    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
18    var diff = t2-t1
19    var diffYears = Math.floor(diff/years)
20    var diffDays = Math.floor((diff/days)-diffYears*365)
21    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
22    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
23    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
24
25    if(diffYears==0){
26        document.getElementById("sitetime").innerHTML=" "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
27    }else{
28        document.getElementById("sitetime").innerHTML=" "+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
29    }
30}
31    siteTime()

其中 var t1 = Date.UTC(2019, 11, 26, 19, 06, 00) 设置为需要计算的起始日期,如时间是:2020 年 01 月 01 日 00 时 00 分 00 秒则设置为:

1var t1 = Date.UTC(2020, 01, 01, 00, 00, 00)

代码:

1运行时间<span id="sitetime" style="color:#fb7312"></span>

不再使用该功能

字体配置

添加 Google Fonts 思源宋体


参考资料

  1. MemE 主题优化