Leanote简单修改博客主题
leanote教程    2015-06-10 20:23:52    2108    5    6
leanote   leanote教程

一个常见的主题通常由以下文件组成:

  • theme.json 主题配置 [必须]
  • header.html 头部模板, 供其它模板引用
  • footer.html 底部模板, 供其它模板引用
  • index.html 首页 [必须]
  • cate.html 分类页 [必须]
  • post.html 文章详情页 [必须]
  • archive.html 归档页 [必须]
  • single.html 单页 [必须]
  • share_comment.html 分享与评论页, 供post.html引用
  • highlight.html 代码高亮页, 供其它页面引用, index, cate, search, tag_posts, post
  • paging.html 分页, 供其它模板引用
  • tags.html 标签列表页 [必须]
  • tag_posts.html 标签文章页 [必须]
  • 404.html 错误页 [必须]
  • style.css 样式
  • images/ 图片文件夹
  • images/screenshot.png 主题预览图

其中header.htmlfooter.htmlpaging.html,share_comment.htmlhighlight.html 这些仅供其它模板引用, 可以不需要.

我们不用完全重新新建一个主题, 可以基于现在的主题进行修改变成一个全新的主题. 比如现在的需求是以下主题的左侧背景图:

将左侧背景替换为: 

下面是详细的步骤:

1. 进入主题修改页

2. 将图片上传至主题images/文件夹下

3. 修改style.css文件

找到:

#headerAndNav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  width: 250px;
  /* border-right: 1px solid #ebeff2; */
  text-align: right;
  -webkit-box-shadow: -1px 1px 6px rgba(0,0,0,0.35);
  -moz-box-shadow: -1px 1px 6px rgba(0,0,0,0.35);
  box-shadow: -1px 1px 10px rgba(0,0,0,1);
  background: url(http://7xj5xl.com1.z0.glb.clouddn.com/pebbles.jpg);
  background-size: 100% auto;
  color: #fff;
}

修改为

#headerAndNav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  width: 250px;
  /* border-right: 1px solid #ebeff2; */
  text-align: right;
  -webkit-box-shadow: -1px 1px 6px rgba(0,0,0,0.35);
  -moz-box-shadow: -1px 1px 6px rgba(0,0,0,0.35);
  box-shadow: -1px 1px 10px rgba(0,0,0,1);
  background: url(images/water@2x.jpg);
  background-size: 100% auto;
  color: #fff;
}

我们只修改了background: url(images/water@2x.jpg);

保存, 大功告成!

TIPS: 使用开发者工具定位样式

大家可能会疑惑, 我怎么知道修改哪段css呢? 可以使用Chrome或Firefox开发者工具定位css, 如在chrome中:

使用审查元素, 定位左侧, 找到相应的css, 然后到主题修改中ctrl+f搜索该样式, 再进行修改.

上一篇: 安装Leanote后, 默认主页是博客页? 如何切换成类似Leanote.com的主页

下一篇: Leanote博客安装主题

2108 人读过
立即登录, 发表评论.
没有帐号? 立即注册
6 条评论
文档导航