定制主题
很多网友说不知道如何制作一套博客页面,于是就有了这篇文章
制作主题,需要一定的动手能力,但需要懂是很少的
主题机制
与其它的资讯类程序类似,主题文件放在一个文件夹里面,通过服务端的完成数据的渲染,这样的好处在于友好的SEO,首次打开快,对浏览器依赖少,同时只用懂基础的模版语法就能定制自己精美的博客页面
ZrLog 使用博客页面使用了/
的路由,当浏览器访问诸如(https://demo.zrlog.com) 会执行 BlogPageInterceptor,程序代码会根据对应了URI
的寻找对应的方法,通过反射代码调用对应的 Controller 方法完成数据的的填充,查询出来的文章数据存放在request域里面,通过如下代码判断选择对应需要渲染的模板文件, render 方法完成渲染后的 html 网页输出
制作前提
freemarker
为了不占用文章篇幅,点击了解基础的
freemarker 模版语法
基础的 html+css
(常用的元素和布局方式,和 css 样式的编写)
先看下默认的主题文件夹的结构
对应目录为 /include/templates/default
├── css (网页样式文件)
├── js (存放需要用到javascript代码)
├── language (存放主题中的一些描述语句,主要用于多语言)
├── setting (存放主题配置 json 文件)
├── 404.ftl (文章不存在时,被 detail.ftl,page.ftl 通过 include 指令使用)
├── detail.ftl (文章详细页数据)
├── footer.ftl (公共的网站底部,通常是版权,统计代码,备案号数据)
├── header.ftl (公共的网站头部数据,通常是指导航条数据)
├── index.ftl (这个文件通过和 page.ftl 文件一致,如果不进行特殊定制的话)
├── page.ftl (文章列表页数据)
└── template.properties (用于管理界面展示使用,描述主题的一些信息)
通过将静态文件放到不同文件夹下面,方便管理。上面罗列的是部分通常结构。
当然也可以按照自己命令方式比如 css 可以使用 style。这都没有任何限制的。主题至少要 page.ftl
detail.ftl
这2个文件
具体如何引用样式,字体文件。需要在这2页面中去控制
主题数据
ZrLog 默认主题目前只有2个页面,及文章列表页,文章详细页。只需要编写对应模板代码就可以了,也可以自己扩展分类页,标签页,存档页面和友链页(代码已经内置,无需额外的编写后端逻辑代码,使用公共缓存数据即可展示)
公共数据
- _res (存放主题使用到配置,全局化的字典)
- init (https://demo.zrlog.com/api/cache 全局数据,包括侧边栏菜单,导航条,网站设置)
- templateUrl (主题静态文件存放的绝对地址)
- baseUrl (用于部分非绝对路径地址的拼接)
- requestUrl (浏览器的请求的完整地址)
- searchUrl (搜索文章接口数据的提交地址)
文章列表页
- pager (快速生成文章分页条)
- data (文章列表页的文章数据 - https://demo.zrlog.com/api/article )
文章详细页
- log (文章的详细数据,包含评论数据)
注意事项
- 任何文件后缀为
ftl
,properties
,是无法通过浏览器方式访问的
共享模板
如果你也想你编写的主题可以被其他人使用,可以将主题文件压缩为 .zip 文件
,通过 github 或者 zrlog 官方的仓库进行分享
最后如果有不理解的地方,欢迎在评论区留言或者加交流群 (QQ群:6399942)