全部系列教程目录:教程目录
国庆过了一大半,都是各种吃饭走亲戚,终于今天有空来写这个系列教程了,前面几篇文章介绍了jpress主题制作的一些基础知识,今天这篇主要是教你如何从零开始初始化一套JPress主题模板。
以下将以JPress之家发布的One主题作为例子,可以在这边下载到代码:one主题下载
1、建立一个空的文件夹,用来存放模板文件,文件夹名字jpress-web-template-one。
2、在这个文件建立一个tpl_config.xml
文件,用来配置模板的信息和模型,tpl_config.xml
的内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<config>
<infos>
<id>one</id>
<title>one</title>
<description>one主题——JPress之家发布</description>
</infos>
<module title="文章" name="article" list="所有文章" add="撰写文章" comment="评论">
<taxonomy title="专题" name="category" />
</module>
</config>
3、在这个文件建立一个tpl_screenshot.png
图片,用来在JPress后台显示模板截图。
4、在这个文件建立index.html
用来显示网站首页。index.html
内容如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>${WEB_TITLE!WEB_NAME!} - ${WEB_SUBTITLE!}
-欢迎使用JPress.CC制作的ONE主题</title>
<meta name="keywords" content="${META_KEYWORDS!}">
<meta name="description" content="${META_DESCRIPTION!}">
<link href="${CTPATH}/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${CTPATH}/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="about-header">
<div class="about-top">
<div class="menu">
<ul>
<li><a href="${CPATH}/">首页 <#if "/" ==
REQUEST.requestURI!></#if> </a></li> <@jp.menus> <#list menus as menu>
<li class="page_item page-item-2"><a href="${menu.url!}">${menu.title!}</a></li>
</#list> </@jp.menus>
<li><a href="http://www.jpress.cc" target="_blank">JPress之家</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="about-content">
<div id="logolink">
<a href="${CPATH}">
<#if OPTION('one_logo_image')??>
<img src="${CPATH}${OPTION('one_logo_image')!}">
<#else>
<img src="${CTPATH}/images/logo.jpg">
</#if>
</a>
</div>
<h1>${WEB_NAME}</h1>
<p>${WEB_SUBTITLE!}</p>
</div>
<div class="about-bottom"></div>
<!-- END .about-top -->
<div id="content">
<@jp.indexPage module="article">
<#list page.getList() as content>
<article
class="post-1 post type-post status-publish format-standard hentry category-uncategorized"
id="post-1">
<div class="post_header">
<h4 class="site-title">
<a href="${content.url}"
rel="bookmark" title="${content.title}">${content.title}</a>
</h4>
<p class="postmeta">
<span class="post-date"><i class="datetime-icon"></i>${content.created?string("yyyy-MM-dd")}</span>
| <span class="cat-links">${content.getTaxonomyAsUrl('category')!'未分类'}</span> | <span class="post-views"><i class="views-icon"></i>阅读(${content.view_count!'0'})</span>
</p>
</div>
<#if content.thumbnail ??>
<a href="${content.url}">
<img src="${content.thumbnailByName('t1')!}" style="max-width:550px;"/>
</a>
</#if>
<div class="entry">${content.summary}</div>
<!-- .entry-content -->
<div class="clear"></div>
</article>
</#list>
<div class="pagenavi" style="font-size:13px!important;margin-top:20px;">
<ul class="x-page">
<@pagination>
<#list pages as pi>
<li class="${pi.style!}">
<a href="${pi.url!}">${pi.text!}</a>
</li>
</#list>
</@pagination>
</ul>
</div>
</@jp.indexPage>
<div class="clear"></div>
</div>
</div>
<#include "footer.html">
5、把这个文件夹压缩成为.zip
的压缩包,进入JPress后台,通过模板管理的 安装 功能安装完毕该模板后,就可以使用该模板了。
到此,一个完整的模板制作流程制作完毕。
如果是开发环境,需要加入Maven项目依赖,那么你还需要在项目中加入相关配置。
6、首先在jpress-web模块pom.xml文件中加入one主题模块依赖:
<?xml version="1.0"?>
<project
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>io.jpress</groupId>
<artifactId>jpress</artifactId>
<version>1.0</version>
</parent>
<artifactId>jpress-web</artifactId>
<name>jpress-web</name>
<url>http://jpress.io</url>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<dependencies>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-core</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-admin</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-front</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-jblog</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-the3</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-one</artifactId>
<version>1.0</version>
<type>war</type>
<scope>compile</scope>
</dependency>
</dependencies>
<build>
<finalName>${project.artifactId}-${project.version}</finalName>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat6-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>8080</port>
<path>/jpress</path>
<uriEncoding>UTF-8</uriEncoding>
<server>tomcat7</server>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>8080</port>
<path>/jpress</path>
<uriEncoding>UTF-8</uriEncoding>
<server>tomcat7</server>
</configuration>
</plugin>
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<version>6.1.10</version>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<encoding>utf-8</encoding>
<packagingExcludes>WEB-INF/web.xml</packagingExcludes>
<overlays>
<overlay>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-front</artifactId>
</overlay>
<overlay>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-admin</artifactId>
</overlay>
<overlay>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-jblog</artifactId>
</overlay>
<overlay>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-the3</artifactId>
</overlay>
<overlay>
<groupId>io.jpress</groupId>
<artifactId>jpress-web-template-one</artifactId>
</overlay>
</overlays>
</configuration>
</plugin>
</plugins>
</build>
</project>
7、然后在JPress项目pom.xml中modules标签中加入依赖这一行,如下:
<module>jpress-web-template-one</module>
8、在eclipse中导入该模块,然后更新下项目就可以跑起来了。