Leanote theme    发布于 2017-11-30   216人围观   0条评论

为了提高博客用户体验,我们可以为其添加一些动画效果。这篇博文主要介绍如何添加页面切换动画以及页面加载动画。需要用到的插件:

Animsition.js:http://git.blivesta.com/animsition/

Loader.css:https://connoratherton.com/loaders

页面切换动画

首先从https://github.com/blivesta/animsition上下载插件包,解压后在博客主题中引入animsition.css和animsition.js:

<script src="{{$.themeBaseUrl}}/animsition.js"></script>
<link href="{{$.themeBaseUrl}}/animsition.css" rel="stylesheet">

查看更多
theme    发布于 2017-11-30   179人围观   1条评论

夏天到了,所以主题名字就叫Summer吧。主题参考自https://cn.vuejs.org/v2/api/。emoji作者ColinXu

由于每个人单页的迥异,所以我把自定义的单页去掉了。单页样式自定义可以参考下面的思路:

{{if eq $.single.Title "Friends"}} 
    {{template "friends.html" $}}
{{end}}
{{if eq $.single.Title "Music"}} 
    {{template "music.html" $}}
{{end}} 

关于警告框,在笔记编辑器里选中文字加下划线就可以了。

查看更多
theme    发布于 2017-11-30   465人围观   26条评论

Material Design(卡片式材料设计)是谷歌在I/O 2014上发布的新的设计语言。在Material的扁平化设计中,它使用了分层元素来营造三维空间。

该主题有Light和Dark两种显示模式,可通过toolBar右侧的按钮切换。博客可在主题文件theme.json中作简单的修改,theme.json文件内容如下:

{
    ...
    "WebImgName": "leanote.png",
    "Color": "blue",
    "ColorStrength": "300",
查看更多
theme    发布于 2017-11-30   424人围观   26条评论

主题Conciseness已上架Leanote博客主题市场。该主题修改自roomcar的pure主题。该主题可自行修改,这里做几点介绍。     

修改图片

编辑主题,找到theme.json文件以下字段:

...
"BlogImgName": "blogImg.jpg",
"WebImgName": "webImg.png",
"ErrorImgName": "robot.png",    
...

BlogImgName为博客About Me图片,WebImgName为网页小图标,ErrorImgName为404页面图片。

假如现在您想将About Me的图片换为自己上传的名为handsomeBoy.png的照片,只需将theme.json文件的BlogImgName字段值换位“handsomeBoy.png”即可。

查看更多