Getting Started with Template Making

It's not difficult to make templates. As long as you write HTML and CSS, nested templates are very simple. You don't need to know the internal structure of tags. As long as you can use them, templates can be completed quickly. This article only briefly introduces the use of common tags, hoping to take you into the template world. ^_^

This article takes the default template of all Typechos as an example. You can open the default template and learn while watching. The path where the template is located is/usr/themes/default
After entering the directory, we can see many files. Don't worry, we will introduce them one by one below. All files in the current directory can be edited on the template editing page in the background.

index.php

Template Information

Let's start with the main file. When we open this file, the first thing we see is the comments:

 /** *This is a set of default skins for the typecho system. You can use the<a href=“ http://typecho.org ">The official website of typecho</a>gets more information about this skin *  * @package Typecho Default Theme  * @author typecho * @version 1.0.0 * @link  http://typecho.org */

This is where template information is stored. It will be displayed on the template selection page in the background. The first two lines are brief introductions, and each "*" represents a paragraph@ Package represents the name of the template, @ author represents the name of the author, @ version is the version number of the template, and @ link is the website connection of the author.

Next to the include ('header. php ') below the comment, you will also see include ('sidebar. php') and include ('footer. php ') at the end. These statements are used to call other modules of the template. The header is the header, the sidebar is the sidebar, and the footer is the footer.

Show Article

 <? php  while ( $this -> next ( ) ) :  ?> <div class="post"> <h2 class="entry_title"><a href=" <? php  $this -> permalink ( )  ?> "> <? php  $this -> title ( )  ?> </a></h2> <div class="entry_data"> Published by <a href=" <? php  $this -> author -> permalink ( ) ;  ?> "> <? php  $this -> author ( ) ;  ?> </a> on <? php  $this -> date ( 'F j, Y' ) ;  ?> in <? php  $this -> category ( ',' ) ;  ?> . <? php  $this -> commentsNum ( '%d Comments' ) ;  ?> . </div> <div class="entry_text"> <? php  $this -> content ( 'Continue Reading...' ) ;  ?> </div> </div> <? php  endwhile ;  ?>

Enter the article loop, output the article, peel off the html code, and introduce it sentence by sentence

<? php $this -> permalink ( ) ?> The connection where the article is located
<? php $this -> title ( ) ?> Article Title
<? php $this -> author ( ) ; ?> Author
<? php $this -> author -> permalink ( ) ; ?> Address of article author
<? php $this -> date ( 'F j, Y' ) ; ?> The release date of the article. Please refer to the format PHP date format
<? php $this -> category ( ',' ) ; ?> Article category
<? php $this -> commentsNum ( '%d Comments' ) ; ?> Number of article comments and links
<? php $this -> content ( 'Continue Reading...' ) ; ?> Article content, where "Continue Reading..." is the invitation connection that hides part of the summary

Well, the article shows the end. Don't forget to end the cycle.

Article pagination

 <? php  $this -> pageNav ( ) ;  ?>

Don't forget to add pagination after the output of the article. At this point, the common content of index.php is over. It should not be confused.

header.php

code

Open this file, and the first php code you see is:

 <meta http-equiv="content-type" content="text/html; charset= <? php  $this -> options -> charset ( ) ;  ?> " />

Call the default code. The most commonly used code is utf-8. So I usually write it directly as utf-8 to save php processing time.

Page Title

 <title> <? php  $this -> options -> title ( ) ;  ?> <? php  $this -> archiveTitle ( ) ;  ?> </title>

Usually it is copied directly, if you don't have time.

Import Styles

 <link rel="stylesheet" type="text/css" media="all" href=" <? php  $this -> options -> themeUrl ( 'style.css' ) ;  ?> " />

Where style.css is the path and file name of the style file relative to the template directory.

Other HTML header information

 <? php  $this -> header ( ) ;  ?>

Don't forget this sentence, which relates to the normal use of RSS messages, client programs and plug-ins.

Page Navigation

 <ul class="clearfix" id="nav_menu"> <li><a href=" <? php  $this -> options -> siteUrl ( ) ;  ?> ">Home</a></li> <? php  $this -> widget ( 'Widget_Contents_Page_List' )
                -> parse ( '<li><a href="{permalink}">{title}</a></li>' ) ;  ?> </ul>

Here we use a list of pages without sequence, where {permalink} is the address of the page, and {title} is the title of the page

Site Name

 <h1><a href=" <? php  $this -> options -> siteUrl ( ) ;  ?> "> <? php  $this -> options -> title ( )  ?> </a></h1> <span> <? php  $this -> options -> description ( )  ?> </span>
<? php $this -> options -> siteUrl ( ) ; ?> Home page address of the website
<? php $this -> options -> title ( ) ?> Site Name
<? php $this -> options -> description ( ) ?> Some brief descriptions and introductions of the website

On site search

 < form  method = "post"  action = "" >
     < div >< input  type = "text"  name = "s"  class = "text"  size = "32"  / >  < input  type = "submit"  class = "submit"  value = "Search"  / >< / div >
 < / form >

When you have many articles, this search is essential.

sidebar.php

Latest article list

 <ul> <? php  $this -> widget ( 'Widget_Contents_Post_Recent' )
                -> parse ( '<li><a href="{permalink}">{title}</a></li>' ) ;  ?> </ul>

Get the latest 10 article titles, and the html obtained is

 < ul >
     < li >< a  href = " http://example.com/2008/12/31/sample-post-one " > Title of article 1 < / a >< / li >
     < li >< a  href = " http://example.com/2008/12/31/sample-post-two " > Title of article 2 < / a >< / li >
     <!--  Omit n duplicates -->
     < li >< a  href = " http://example.com/2008/12/31/sample-post-ten " > Title of article 10 < / a >< / li >
 < / ul >

Latest reply list

 <ul> <? php  $this -> widget ( 'Widget_Comments_Recent' ) -> to ( $comments ) ;  ?>
     <? php  while ( $comments -> next ( ) ) :  ?> <li> <? php  $comments -> author ( false ) ;  ?> : <a href=" <? php  $comments -> permalink ( ) ;  ?> "> <? php  $comments -> excerpt ( ten ,  '[...]' ) ;  ?> </a></li> <? php  endwhile ;  ?> </ul>

Get the latest 10 replies, and the html is

 < ul >
     < li > Respondent's name: < a  href = " http://example.com/2008/12/31/sample-post#comments -12" > Reply content [...] < / a >< / li >
     < li > Respondent's name: < a  href = " http://example.com/2008/12/31/sample-post#comments -11" > Reply content [...] < / a >< / li >
     <!--  Omit n duplicates -->
 < / ul >

among <? php $comments -> excerpt ( ten , '[...]' ) ; ?> "10" stands for the number of words intercepted in the reply content, and "[...]" stands for the meaning of omission, which can be modified by yourself.

Article classification list

 <ul> <? php  $this -> widget ( 'Widget_Metas_Category_List' )
                -> parse ( '<li><a href="{permalink}">{name}</a> ({count})</li>' ) ;  ?> </ul>

Output:

 < ul >
     < li >< a  href = " http://example.com/category/uncategories " > Uncategories < / a > (10) < / li >
     < li >< a  href = " http://example.com/category/category-1 " > Category-1 < / a > (2) < / li >
 < / ul >

Where {count} is the number of articles under this category.

Archive by month

 <ul> <? php  $this -> widget ( 'Widget_Contents_Post_Date' ,  'type=month&format=F Y' )
                -> parse ( '<li><a href="{permalink}">{date}</a></li>' ) ;  ?> </ul>

Output:

 < ul >
     < li >< a  href = " http://example.com/2008/11 " > November 2008 < / a >< / li >
     < li >< a  href = " http://example.com/2008/10 " > October 2008 < / a >< / li >
 < / ul >

Other connections

 <ul> <? php  if ( $this -> user -> hasLogin ( ) ) :  ?> <li class="last"><a href=" <? php  $this -> options -> index ( 'Logout.do' ) ;  ?> ">Logout ( <? php  $this -> user -> screenName ( ) ;  ?> )</a></li> <? php  else :  ?> <li class="last"><a href=" <? php  $this -> options -> adminUrl ( 'login.php' ) ;  ?> ">Login</a></li> <? php  endif ;  ?> </ul>

These are optional, just for the convenience of login and logout.

footer.php

RSS Address

Footer file. It is recommended that you put some large js in this file and load it last. It will not affect reading. What does our footer explain?

 <a href=" <? php  $this -> options -> feedUrl ( ) ;  ?> ">Entries (RSS)</a><! -- RSS address connection of the article --> <a href=" <? php  $this -> options -> commentsFeedUrl ( ) ;  ?> ">Comments (RSS)</a>.<! -- RSS address connection of comments -->

And don't forget to add

 < a  href = " http://typecho.org " > Typecho < / a >

To show the support for Typecho. Simple.

Now that you have completed 75% nesting, take a break, and the rest will be much easier :-D

post.php

The post page and index are similar, but we still want to talk about the differences.

Tag tag

 Tags: <? php  $this -> tags ( ',' ,  true ,  'none' ) ;  ?>

This is to obtain the tags of the current single article, separated by the "," symbol.

Call comment page

 <? php  include ( 'comments.php' ) ;  ?>

comments.php

Comment List

 <h4> <? php  $this -> commentsNum ( 'No Response' ,  'One Response to"'  .  $this -> title  .  '"' ,  '%d Responses to "'  .  $this -> title  .  '"' ) ;  ?> </h4> <ol id="comment_list"> <? php  $this -> comments ( ) -> to ( $comments ) ;  ?>
         <? php  while ( $comments -> next ( ) ) :  ?> <li id=" <? php  $comments -> theId ( ) ;  ?> "> <div class="comment_data"> <? php  echo  $comments -> sequence ( ) ;  ?> .  <strong> <? php  $comments -> author ( ) ;  ?> </strong> on <? php  $comments -> date ( 'F jS, Y' ) ;  ?> at <? php  $comments -> date ( 'h:i a' ) ;  ?> </div> <div class="comment_body"> <? php  $comments -> content ( ) ;  ?> </div> </li> <? php  endwhile ;  ?> </ol>

Or loop out comments:

<? php $comments -> theId ( ) ; ?> Unique ID of each comment
<? php $comments -> sequence ( ) ; ?> Comment floor
<? php $comments -> responseUrl ( ) ; ?> Reply address
<? php $comments -> responseId ( ) ; ?> Reply box ID
<? php $comments -> trackbackUrl ( ) ; ?> Trackback address
<? php $comments -> author ( ) ; ?> Name of reviewer
<? php $comments -> date ( 'F jS, Y' ) ; ?> Comment Date
<? php $comments -> date ( 'h:i a' ) ; ?> Comment time
<? php $comments -> content ( ) ; ?> Comments

End cycle. We use a sequential list<ol>because the comments are published in order.

Comment Input Form

 <!--  Judge whether the setting allows comments on the current article --> <? php  if ( $this -> allow ( 'comment' ) ) :  ?>   <h4 id="response">Leave a Reply</h4>   <!--  Enter the beginning of the form --> <form method="post" action=" <? php  $this -> commentUrl ( )  ?> " id="comment_form">   <!--  If the current user has logged in --> <? php  if ( $this -> user -> hasLogin ( ) ) :  ?> <!--  Display the user name and logout connection of the current login user --> <p>Logged in as <a href=" <? php  $this -> options -> adminUrl ( ) ;  ?> "> <? php  $this -> user -> screenName ( ) ;  ?> </a>.  <a href=" <? php  $this -> options -> index ( 'Logout.do' ) ;  ?> " title="Logout">Logout &raquo;</a></p>   <!--  If the current user is not logged in --> <? php  else :  ?> <!--  You are required to enter your name, email address and web address --> <p><input type="text" name="author" class="text" size="35" value=" <? php  $this -> remember ( 'author' ) ;  ?> " /><label>Name (Required)</label></p> <p><input type="text" name="mail" class="text" size="35" value=" <? php  $this -> remember ( 'mail' ) ;  ?> " /><label>E-mail (Required *will not be published)</label></p> <p><input type="text" name="url" class="text" size="35" value=" <? php  $this -> remember ( 'url' ) ;  ?> " /><label>Website</label></p> <? php  endif ;  ?>   <!--  Enter the content to reply --> <p><textarea rows="10" cols="50" name="text"> <? php  $this -> remember ( 'text' ) ;  ?> </textarea></p> <p><input type="submit" value="Submit Comment" class="submit" /></p> </form> <? php  endif ;  ?>

In many cases, the comment file is not modified and can be directly used to write the corresponding css.

Other documents

page.php The display mode of the page is generally the same as that of single.php
archive.php Display the file called when the article list and search result list under a category are displayed

Conclusion

OK, this brief introduction is over. I hope you will not be tired of looking at it and learn something about Typecho's template system at the same time, so that the purpose of the article can be achieved. For the current article, you are welcome to ask questions in the community. thank you. :-D

Print/Export
language
  ?