从零开始初始化一套JPress主题模板

JPress之家发布 开发教程 2016-10-06 2458

全部系列教程目录:教程目录

国庆过了一大半,都是各种吃饭走亲戚,终于今天有空来写这个系列教程了,前面几篇文章介绍了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中导入该模块,然后更新下项目就可以跑起来了。