<code class="hljs axapta has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">modules/article/templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文章系统模板</span> modules/article/templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文章系统区块模板</span> modules/forum/templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 论坛系统模板</span> modules/forum/templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 论坛系统区块模板</span> templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 公用页面模板(例如用户档案)</span> templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 公用页面区块模板</span> themes/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 主要风格模板</span> modules/article/templates/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">index</span>.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 目录页面</span> modules/article/templates/style.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 章节内容</span> modules/article/templates/fulltext.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 全文阅读</span> modules/article/templates/articleinfo.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 书籍摘要页面</span> themes/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span>/theme.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动态页面公用模板</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>
模板标签
下面对 theme.html 模板中使用到的标签做简单的说明:
在模板文件的html源代码中插入如下标签,即可在页面中显示出来相应内容。说明:V1.30以下版本,标签格式为<{XXX}>,V1.30以上版本标签的格式为{?XXX?},注意使用。
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_pagetitle</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 网页标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_charset</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 网页字符集,对应后台系统定义中的“默认语言” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$meta_keywords</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 网页关键字,对应后台系统定义中的“网站关键字” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$meta_description</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 网站描述,对应后台系统定义中的“网站描述” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$meta_author</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 作者 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$meta_copyright</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 版权申明,对应后台系统定义中的“版权申明” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_css</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 系统<span class="hljs-constant" style="box-sizing: border-box;">CSS</span>引用,由系统自动生成 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_head</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 头部插入代码,对应后台系统定义中的“头部插入代码” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_top_bar</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 顶部通栏代码,对应后台系统定义中的“顶部通栏代码” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_logininfo</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 注册用户登入详细资料 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$url_gb2312</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-constant" style="box-sizing: border-box;">GB2313</span>编码的链接 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$url_big5</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-constant" style="box-sizing: border-box;">BIG5</span>编码的链接 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_imageurl</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-constant" style="box-sizing: border-box;">JIEQI</span> <span class="hljs-constant" style="box-sizing: border-box;">CMS</span>图片文件夹路径 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_url</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-constant" style="box-sizing: border-box;">JIEQI</span> <span class="hljs-constant" style="box-sizing: border-box;">CMS</span>首页链接,对应后台系统定义中的“网站地址” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_banner</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-constant" style="box-sizing: border-box;">BANNER</span>代码,对应后台系统定义中的“<span class="hljs-constant" style="box-sizing: border-box;">BANNER</span>代码” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_email</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 联系<span class="hljs-constant" style="box-sizing: border-box;">Email</span>,对应后台系统定义中的“联系<span class="hljs-constant" style="box-sizing: border-box;">Email</span>” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_menu</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 系统菜单,如果后台系统定义中“是否使用系统菜单”一项为是,则使用由 configs/mainmenu.php 定义的菜单项目 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_sitename</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 网站名称,对应后台系统定义中的“网站名称” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_bottom_bar</span>}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 底部通栏代码,对应后台系统定义中的“底部部通栏代码” <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_tblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 顶部区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_tblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 顶部区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_lblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 左边区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_lblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 左边区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_ctblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中上区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_ctblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中上区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_clblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中左区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_clblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中左区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_crblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中右区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_crblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中右区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_cmblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中中区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_cmblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中中区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_cbblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中下区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_cbblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 中下区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_rblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 右边区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_rblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 右边区块内容 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_bblocks</span>[i].title}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 底部区块标题 <{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$jieqi_bblocks</span>[i].content}> <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 底部区块内容 为使更改后的模板生效,我们需要对相应的区块经行刷新 或者清理区块缓存。 modules/article/templates /<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/文章系统模板 modules/article</span><span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/te</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li></ul>
模板制作方法
模板文件路径
JIEQI CMS 模板文件主要存在于以下几个目录中,更改相应的文件就能改变页面显示效果。注:为使更改后的模板生效,我们需要对相应的区块经行刷新 或者清理区块缓存。
<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">modules/article/templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文章系统模板</span> modules/article/templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文章系统区块模板</span> modules/forum/templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//论坛系统模板</span> modules/forum/templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//论坛系统区块模板</span> templates <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//公用页面模板(例如用户档案)</span> templates/blocks <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//公用页面区块模板</span> themes/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//主要风格模板</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
主要模板:
一般修改如下几个主要模板就能改变前台页面的大部分显示效果:
<code class="hljs axapta has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> modules/article/templates/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">index</span>.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 目录页面</span> modules/article/templates/style.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 章节内容</span> modules/article/templates/fulltext.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 全文阅读</span> modules/article/templates/articleinfo.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 书籍摘要页面</span> themes/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span>/theme.html <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动态页面公用模板</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
常用语法以及函数讲解
模板中标签的格式为{?XXX?},注意使用。
<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>、循环语句: 格式:{?section name=i loop=$var columns=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>?}{?/section?} 说明:该语句以{?section name=i loop=$var columns=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>?}开始,并以{?/section?}结束 举例:{?section name=i loop=$jieqi_cmblocks?} …… {?/section?} 解释:上例中表示的是,如果中间下方的区块存在,则在此处循环显示 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>、判断语句 格式:{?<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> ?}<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>{? <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> ?}<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>{?elseif?}<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>{?/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>?} 说明:该语句为判断语句 举例:{?<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> $jieqi_cmblocks.title != <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>?} …… {?/<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>?} 解释:如果中间下方的区块的标题有内容,则显示这个区块的标题 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>、截取字符串方法 函数:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>、truncate - 截取固定长度字符串,参数一(必要):截取后长度,参数二:附加字符串。 格式:eg:$var=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123456789</span>;模板里面调用函数: {?$var|truncate:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>?} | {?$var|truncate:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"......"</span>?} 输出:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12345</span> | <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123.</span>..... <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>、替换字符串 函数:str_replace - 字符串替换,参数一:查找的字符串,参数二:替换为字符串 格式:eg:$var=’http://www.3gzww.com‘;模板里面调用函数: {?$var|str_replace:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www"</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"demo"</span>?} 输出: http://demo.3gzww.com <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>、处理时间函数 函数:date - 把数字类型的时间格式化成字符串,参数一:格式化字符串 格式:eg:$time=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1198226131</span>;模板里面调用函数: {?$time|date:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Y-m-d H:i:s"</span>?} 输出:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2007</span>-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">21</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">35</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">31</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>、专用于生成子目录名字的函数 函数:subdirectory - JIEQI CMS 里面专用于生成子目录名字的函数,针对数字的处理,无参数。输出格式类似 <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/12"</span>,其中<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/"</span> 是表示开始一个子目录,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"12"</span>是子目录名字。 格式:eg:$id=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3456</span>;模板里面调用函数:/files/article/html{?$id|subdirectory?}/{$id?}/index.html 输出:/files/article/html/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3456</span>/index.html</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li></ul>
【框架】
JIEQI CMS风格模板以框架的形式存在,无论是JIEQI CMS中的哪个模块,均使用到了该框架,该框架的文件夹为http://你的网站地址/theme/风格文件夹。该文件夹中需要包含五个html文件,theme.html、msgerr.html、msgwin、jumppage.html、msgbox.html,还有一个CSS文件。
theme.html:页面框架模板,适用整个系统,修改网站风格也主要是修改本文件。
jumppage.html:程序跳转页面模板,比如用户登录时候,那个跳转过渡的小窗口。
msgbox.html:内容提示方块模板,通常这个提示信息是指插入到其他页面的。
msgwin.html:内容提示页面模板,跟msgbox.html不同,这是一个完整的提示页面。
msgerr.html:错误信息提示模板,也是一个完整的提示页面。
style.css:通用的css,在theme.html里面调用的,也是整站通用。
二、小说连载系统
JIEQI的风格模板文件的保存地址为:http://你的网站地址/modules/article/templates和http://你的网站地址/modules/article/templates/blocks中,前者包含JIEQI需用的不会以区块形式出现的模板,比如小说信息页面、小说章节内容页面等,后者包含杰奇需要采用区块形式出现的文件,比如首页显示的总点击榜、总推荐榜等。下面对区块文件进行一个说明:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">原创总排行:block_allauthorvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章总排行:block_allvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 总推荐榜: block_allvote<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章总排行:block_articlelist<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 原创更新: block_authorupdate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 封面推荐: block_commend<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 原创日排行:block_dayauthorvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章日排行:block_dayvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 本日推荐: block_dayvote<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 收藏排行: block_goodnum<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 最近更新: block_lastupdate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 转载更新: block_masterupdate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 原创月排行:block_mouthauthorvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章月排行:block_mouthvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 本月推荐: block_mouthvote<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 我的原创文章:block_myarticles<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> block_newreview<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> block_newreviews<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 最新入库: block_postdate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 最新书评: block_reviewslist<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章搜索: block_search<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 字数排行: block_size<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 分类阅读: block_sort<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 排行榜: block_toplist<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 本站推荐: block_toptime<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 我的转载文章:block_transarticles<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 原创周排行:block_weekauthorvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 文章周排行:block_weekvisit<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 本周推荐: block_weekvote<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> 作家工具箱:block_writerbox<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li></ul>
【第二章 CSS文件说明】
杰奇整个框架使用的是http://你的网站地址/theme/风格文件夹/style.css,下面就默认CSS文件中的一些样式参数进行说明,在你设计风格的时候,如果希望采用默认的一样样式,那么请将默认CSS文件中的部分复制到你建立的CSS文件中,并在html文件中按照默认CSS文件的部分内容进行书写布局。
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 基本样式 */</span> * - 清除默认样式 body - 页面主体 a - 链接 p - 段落 h1, h2, h3, h4, h5, h6 - 标题 img - 图像 div - 层 hr - 分割线 ul - 列表 li - 列表栏目 =========================★★★★★============================ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 表格样式 */</span> table - 默认表格 table<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fix</span> - 单元格里面内容比较宽时候隐藏超出部分,而不是把表格撑开导致变形 table<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.grid</span> - 多行多列的表格 table<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.grid</span> caption, <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.gridtop</span> - 表格标题 table<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.grid</span> th, <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.head</span> - 表格第一行项目名称栏 table<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.grid</span> td - 单元格样式 =========================★★★★★============================ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*表格辅助样式*/</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.title</span> - 表格内列的栏目标题 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.even</span> - 偶数行/列 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.odd</span> - 奇数行/列 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.foot</span> - 表格末行 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.bottom</span> - 表格底部 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 表单样式 */</span> form - 默认表单 input - 默认输入框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.text</span> - 单行文本 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.textarea</span> - 多行文本 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.button</span> - 按钮 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.checkbox</span> - 多选框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.radio</span> - 单选框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.select</span> - 下拉框 =========================★★★★★============================ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 布局样式 */</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#wrapper - 总页面容器</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#left - 左边列</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#right - 右边列</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#centers - 中间列(一共为三列时)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#centerm - 中间列(一共为二列时)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#centerl - 中间列(一共为一列时)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#content - 主体内容</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.main</span> - 整页宽度的内容容器 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.m</span>_top - 网页最顶部(通常放快速导航链接) <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.m</span>_head - 网页头部(通常包括网站LOGO和BANNER) <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.h</span>_logo - 网站LOGO <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.h</span>_banner - 网站BANNER <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.h</span>_link - BANNER旁边的链接 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.m</span>_menu - 菜单栏 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.m</span>_foot - 网页底部 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.block</span> - 区块容器 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.blocktitle</span> - 区块标题 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.blockcontent</span> - 区块内容 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.blocknote</span> - 区块底部修饰 =========================★★★★★============================ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*常用样式*/</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ultop</span> - 排行列表 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ulitem</span> - 项目列表 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ulrow</span> - 普通行 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ulcenter</span> - 内容居中行 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ulmul</span> - 多行多列 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fix</span>, <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lm</span> - 内容超出容器时候隐藏超出部分 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fl</span> - 靠左浮动 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fr</span> - 靠右浮动 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.cl</span> - 清除左边 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.cr</span> - 清除右边 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.cb</span> - 清除两边 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.tl</span> - 文本居左 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.tc</span> - 文本居右 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.tr</span> - 文本居中 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.more</span> - “更多”链接 =========================★★★★★============================ <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_navigation - 栏目导航 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_title - 文章标题 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_head - 文章头部 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_content - 文章内容 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_foot - 文章底部 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_label - 属性标签 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_value - 属性内容 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_row - 文章列表里面的一条记录外框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_subject - 文章列表标题 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_tag - 文章列表附加属性 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_description - 文章列表里面的简介 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.c</span>_note - 文章列表里面备注或者相关链接 =========================★★★★★============================ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*醒目效果*/</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.hottext</span> - 热点文字 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.notetext</span> - 注解文字 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.errortext</span> - 错误提示文字 a<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.hotlink</span> - 热点链接 a<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.btnlink</span> - 按钮样式链接 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*常用界面*/</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.jieqiQuote</span> - 引用框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.jieqiCode</span> - 代码框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.jieqiNote</span> - 注解框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.divbox</span> - 带边框容器 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.textbox</span> - 文本框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.popbox</span> - 提示框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#tips - 浮动消息提示框</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.tablist</span> - TAB标签 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.tabcontent</span> - TAB栏目对应的内容 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.pages</span> - 列表页面的分页外框 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.pagelink</span> - 列表页面的分页导航 img<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.avatar</span> - 默认用户头像 <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#jieqi_menu - 下拉菜单</span> </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li></ul>
=========================★★★★★============================
第三章 【不使用系统框架制作首页】
在制作JIEQI首页之前,需要了解JIEQI CMS的一些标签的书写。尽管不使用系统框架,但这也是仅针对于站点首页而言,其它页面还是需要调用系统框架的,因此theme.html文件还是要重新设计,最好能和首页的风格相同,这样便于统一风格。
一、系统标签的书写
系统标签的书写方式为:{? $标签名 ?}
,例如网站地址的标签为:{? $jieqi_url ?}。下面我将列举JIEQI CMS中常用的标签:
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> jieqi_url <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 本机URL的根路径(使用相对路径时候本变量是空的,用绝对路径时候是完整地址,如:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>g中文网www<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.3</span>gzww<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>com) jieqi_rootpath <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站根目录的物理路径,如:E:/web jieqi_local_url <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 本机完整的URL的根路径(跟jieqi_url区别是,使用相对路径时候本变量也是完整地址) jieqi_main_url <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 主服务器的URL地址 jieqi_user_url <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户入口服务器的URL地址 jieqi_host <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站地址里面的主域,如 www<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.3</span>gzww<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>com jieqi_charset <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 当前页面编码,如gbk, big5 jieqi_version <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 系统程序主版本号,如 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.50</span> jieqi_theme <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站当前风格名称,如 jieqidiv jieqi_themeurl <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站当前风格的yrl,如www<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.3</span>gzww<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>com/themes/jiqidiv jieqi_time <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 当前时间,int型 jieqi_sitename <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站名称 jieqi_pagetitle <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网页title jieqi_email <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站联系Email meta_keywords <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站meta关键字 meta_description <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站meta描述 meta_copyright <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站meta版权声明 jieqi_banner <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网站banner jieqi_head <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网页<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>head<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>和<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/head<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>之间附加代码 jieqi_top_bar <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网页顶部通栏代码 jieqi_bottom_bar <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 网页底部通栏代码 jieqi_menu <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 程序生成的下拉菜单赋值成这个变量,在较老版本使用,新版里面菜单直接在theme<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>html里面修改 jieqi_userid <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户ID jieqi_username <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户昵称(用户未设置昵称时候即登录账号) jieqi_useruname <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户名(登录账号) jieqi_group <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户组别数字 jieqi_groupname <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户组别名称 jieqi_score <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户积分 jieqi_experience <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户经验 jieqi_honor <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户头衔 jieqi_vip <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户vip标志 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>非vip,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-attribute" style="box-sizing: border-box;">-vip</span>会员 jieqi_egold <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户虚拟币金额 jieqi_avatar <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户头像图片类型标志 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>无头像图 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-attribute" style="box-sizing: border-box;">-gif</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span><span class="hljs-attribute" style="box-sizing: border-box;">-jpg</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span><span class="hljs-attribute" style="box-sizing: border-box;">-jpeg</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span><span class="hljs-attribute" style="box-sizing: border-box;">-png</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span><span class="hljs-attribute" style="box-sizing: border-box;">-bmp</span> jieqi_newmessage <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 新的站内短信标志,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>无新消息 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>有新消息 jieqi_userstatus <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> 用户状态 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>未登陆 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>管理员 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span>登录用户</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul>
二、首页文件的书写
JIEQI CMS是经过Zend加密的,因此我们不能直接修改index.PHP,因此要想使用自己的首页风格,必须建立一个全新的index.php。制作方法如下:
1、对系统原来的index.php进行备份或者改名;
2、打开记事本、EmEditor或者Dreamweaver,在文件中写入如下信息,并保存为index.php,注意,如果采用记事本或者EmEditor,那么在保存的时候“保存类型”请选择“全部文件(.)”:
<?php
define('JIEQI_MODULE_NAME', 'system'); //定义本页面属于哪个模块
require_once('global.php'); //包含通用程序,每个页面必须包含
jieqi_getconfigs(JIEQI_MODULE_NAME, 'blocks'); //包含区块参数,如果需要在页面调用区块的话
//本函数中,JIEQI_MODULE表示模块名,blocks表示区块配置文件名,配置文件皆在 /configs 目录下,如上例对应的文件是/configs/blocks.php
$jieqi_page_template=JIEQI_ROOT_PATH.'/templates/custom.html'; //设置该页面的模板文件,存在地址和文件名称请根据自己实际的情况进行设置
include_once(JIEQI_ROOT_PATH.'/header.php'); //包含页头处理
$jieqiTpl->assign('jieqi_indexpage',1); //设置首页标志,不是首页请注释本语句,便于模板里面可以判断,给模板其他参数赋值也用这个方法
include_once(JIEQI_ROOT_PATH.'/footer.php'); //包含页尾处理
?>
3、制作custom.html文件
制作custom.html的方法参见其它网页制作方面的书籍,无论是采用表格布局也好,DIV 布局也好,都可以,但是请注意,因为不采用系统框架,所以在首页中所调用的区块所采用的书写方式有所不同。调用某一个区块的标题,采用的是:{? jieqi_pageblocks['区块序号']['区块标题或区块内容'] ?},假设调用的是第10个区块的标题,则书写为:{?jieqi_pageblocks['10']['title'] ?},如果调用的是第11个区块的内容,则书写为:{? $jieqi_pageblocks[‘11’][‘content’] ?}。
制作完成之后,将文件保存到与index.php中所书写的地址
注意:调用区块书写好以后,一定要到网站后台的区块管理中将你所要在首页显示的区块设置为显示状态,否则还是不会显示的
4、制作风格所需的theme.html、jumppage.html、msgbox.html、msgerr.html、msgwin.html文件,制作方法同样参照网页设计方面的书籍,标签的书写请参照默认风格的对应文件。
完成以上四步之后,不使用系统框架的首页就制作完成了,而且能够让整个网站的风格相对统一起来。