Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

B3log 皮肤开发方法

B3log 简介 http://code.google.com/p/b3log-solo/

wiki:http://code.google.com/p/b3log-solo/wiki/develop_steps

文件结构

名称 说明
/css/* 存放皮肤样式。
/images/* 存放皮肤用到的图片。
archive-articles.ftl 某年某月所写文章的列表页面。
article-list.ftl 文章列表,复用于archive-articles.ftl,author-articles.ftl,tag-articles。
article.ftl 文章页面。
author-articles.ftl 某用户所写文章的列表页面。
error.ftl 错误页面。
footer.ftl 页尾,复用于各个页面。
header.ftl 页头,复用于各个页面。
index.ftl 首页页面。
macro-comments.ftl 评论列表及回复的宏定义,用于文章页面和自定义页面。
macro-head.ftl head 标签中的宏定义,用于各个页面。
page.ftl 自定义页面。在博客后台的页面管理中所建页面均使用该模板来进行显示。
side.ftl 侧边栏,包括公告、最新评论、评论最多的文章访问最多的文章、分类标签、友情链接、存档。复用于各个页面。
tag-articles.ftl 含有某标签文章的列表页面。
tags.ftl 罗列所有标签的页面。
top-nav.ftl 顶部导航,复用于各个页面。
preview.png 此皮肤首页截图(280*160)。
skin.properties 皮肤信息。
name:皮肤名称(此名称将作为皮肤名列在<后台管理-偏好设定-皮肤>中)。
memo:备注,可记录所仿皮肤的站点或名称等信息。

具体开发

  1. 在 skins 目录中新建文件夹,用于存放一款皮肤所需的各个文件,文件结构如上所示。
  2. 可参照 /classic 目录中的 ftl 文件进行创建及相应的修改。
  3. 建议从 index.ftl 开始修改。一旦 index.ftl 的结构确定下来,其余页面的结构与此基本类似。当然,其中通过 <#include "xxx.ftl"> 包含了一些通用的页面。

注意事项

  1. macro-comments.ftl 中标签 id 不可进行更改。
  2. top-nav.ftl 不可进行更改。
  3. 部分公用方法已被提取到 /js/common.js 和 /js/page.js 文件中。
  4. 如有任何疑问请与 Vanessa 联系

 

 wiki:http://code.google.com/p/b3log-solo/wiki/template_variables

模板变量

  • 如果模板变量的类型是 JSONObject,其字段属性参考 org.b3log.solo.model 包下的类
  • 每个页面都包含一些公共模板变量,这些模板变量单独列出(不在 *.ftl 表中给出)
  • 每个页面的模板变量如以“Label”结果,则为多语言配置文件,参看 lang_zh_CN.properties

公共的模板变量

变量名类型说明备注
path String Action 路径  
archiveDates List<JSONObject> 存档日期列表  
articles List<JSONObject> 存档文章列表  
blogTitle String 博客标题  
blogHost String 博客地址 值如:"vanessa.b3log.org:80"
blogSubtitle String 博客子标题  
htmlHead String 用户自定义的 HTML Head  
links List<JSONObject> 链接列表  
localeString String 区域设定字符串 值如:"zh_CN"
metaKeywords String 用户自定义的关键字  
metaDescription String 用户自定义的描述  
mostCommentArticles List<JSONObject> 评论最多的文章列表  
mostUsedTags List<JSONObject> 引用最多的标签列表  
mostViewCountArticles List<JSONObject> 访问最多的文章列表  
noticeBoard String 用户自定义的公告栏  
oId String 存档日期对象 Id  
pageNavigations List<JSONObject> 自定义页面列表  
paginationFirstPageNum Integer 文章列表分页第一页页码  
paginationLastPageNum Integer 文章列表分页最末页页码  
paginationPageNums List<Integer> 文章列表分页页号  
paginationPageCount Integer 文章列表页数  
recentComments List<JSONObject> 最新评论列表  
skinDirName String 当前使用的皮肤目录名  
statistic JSONObject 统计信息对象  
users List<JSONObject> 用户列表  
version String 当前使用的 B3log Solo 版本  
year String 当前年份  

archive-date-articles.ftl

变量名类型说明备注
archiveDate JSONObject 存档日期对象  

article-detial.ftl

变量名类型说明备注
article JSONObject 文章对象  
articleComments List<JSONObject> 文章评论列表  
externalRelevantArticlesDisplayCount Integer 站外相关文章显示数  
nextArticlePermalink String 下一篇文章链接  
nextArticleTitle String 下一篇文章标题  
previousArticlePermalink String 上一篇文章链接  
previousArticleTitle String 上一篇文章标题  
relevantArticles List<JSONObject> 相关文章列表  

page.ftl

变量名类型说明备注
page JSONObject 自定义页面对象  
pageComments List<JSONObject> 自定义页面评论列表  

tag-articles.ftl

变量名类型说明备注
tag JSONObject 标签对象  

tags.ftl

变量名类型说明备注
tags List<JSONObject> 标签列表  

欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

推荐阅读
留下你的脚步