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.html, footer.html, paging.html,share_comment.html, highlight.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搜索该样式, 再进行修改.