Yellow如何制作一个主题

研究Yellow有一段时间,最近一直在看相关主题的代码,起初一看到Yellow的主题代码时,有点懵逼,感觉有点凌乱,默认的主题文件里的html的class或者id基本都是用php直接生成,所以我觉得这样子不方便,其实核心函数和html模板都可以改的,主题的思路与typecho其实是差不多的,甚至更灵活,你可以少去很多判断,让整个主题更灵活,套用别的主题也很方便。

Yellow的主题结构

system/themes/snippets这个文件夹中的php文件都是主题要用到的一些组件,你完全可以自定义。比如说:

snippets/
---------content-blog.php 文章页模块
---------content-blogpages.php 博客首页模块
---------footer.php 尾部模块
---------header.php 头部模块
---------navigation.php 导航模块
---------pages.php 我自己建的,可以理解为独立页面模块
---------pages-404.php 我自己建的,404页面模块
---------pagination.php 翻页模块

可以根据自己的需求来增删自己要用到的模块,我觉得这个真的很赞,让模板可以有很多变化。

Yellow常用的函数

Yellow自带有很多函数的,但其实我们如果自己做主题完全不需要这么多函数,说一些重要的吧,这里只保留了php部分,css和html可以自定义。

头部函数,注意Yellow默认主题的css、js,<header>头部信息,包括Yellow-bar,都是通过这个函数输出来的,,可以编辑system\plugins\Edit.js来修改。

<?php echo $yellow->page->getExtra("header") ?></code>

载入导航

<?php $yellow->snippet($yellow->page->get("navigation")) ?>

navigation.php中可以这么写,意思就是输出所有导航的页面。

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<?php foreach($pages as $page): ?>
<a class="sidebar-nav-item <?php echo $page->isActive() ? "current" : "" ?>" href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a>
<?php endforeach ?>

网站名称

<?php echo $yellow->page->getHtml("sitename") ?>

文章标题

<?php echo $yellow->page->getHtml("titleContent") ?>

文章标题链接

<?php echo $page->getLocation(true) ?>

文章发布时间

<?php echo $yellow->page->getDateHtml("published") ?>

文章正文

<?php echo $yellow->page->getContent() ?>

文章标签要先判断是否存在才显示。

<?php if($yellow->page->isExisting("tag")): ?>
<?php echo $yellow->text->getHtml("blogTag") ?><?php $tagCounter = 0; foreach(preg_split("/\s*,\s*/", $yellow->page->get("tag")) as $tag) { if(++$tagCounter>1) echo ", "; echo "<a class='tag' href=\"".$yellow->page->getPage("blog")->getLocation(true).$yellow->toolbox->normaliseArgs("tag:$tag")."\">".htmlspecialchars($tag)."</a>"; } ?>
<?php endif ?>

载入翻页。

<?php $yellow->snippet("pagination", $yellow->page->getPages()) ?>

pagination.php中可以这么写,翻页效果也就是上一页、下一页这样。

<?php list($name, $pages) = $yellow->getSnippetArgs() ?>
<?php if($pages->isPagination()): ?>
  <?php if($pages->getPaginationPrevious()): ?>
  <a href="<?php echo $pages->getPaginationPrevious() ?>"><?php echo $yellow->text->getHtml("paginationPrevious") ?></a>
  <?php endif ?>
  <?php if($pages->getPaginationNext()): ?>
  <a href="<?php echo $pages->getPaginationNext() ?>"><?php echo $yellow->text->getHtml("paginationNext") ?></a>
  <?php endif ?>
<?php endif ?>

content-blogpages.php中,输出所有文章列表。

<?php foreach($yellow->page->getPages() as $page): ?>
<?php echo $page->getDateHtml("published") ?>
<a href='<?php echo $page->getLocation(true) ?>'><?php echo $page->getHtml("title") ?></a>
<?php echo $yellow->toolbox->createTextDescription($page->getContent(), 0, false, "<!--more-->", " <a href=\"".$page->getLocation(true)."\">".$yellow->text->getHtml("blogMore")."</a>") ?>
<?php endforeach ?>

尾部函数

<?php echo $yellow->page->getExtra("footer") ?>

关于页面模板

Yellow可以自定义的页面模板,在system/themes/templates目录下新建一个xxx.html文件,自定义里面的内容,那么这个就是新的模板了。

在新建页面的时候,在头部输入Template: xxx就可以了,新的页面就是以xxx.html作为模板了。

system/themes/templates下创建的模板文件,都是使用system/themes/snippets里面的组件的,比如:

<?php $yellow->snippet("header") ?>
<?php $yellow->snippet("content-blogpages") ?>
<?php $yellow->snippet("footer") ?>

system/themes/snippets里面的组件都是可以引用的,非常方便。

其它

目前还不知道怎么实现文章内页的上一篇和下一篇的功能,另外Yellow如何进行判断也不清楚,有空再研究下。(已解决,看这里。)

5 条评论
  1. 不亦乐乎

    两边发啊。
    来看看你折腾的怎样了。

    不亦乐乎 2017-07-14 11:18:07   Windows 10 x64 Edition  Google Chrome 59.0.3071.115 回复
    1. 山小炮
      @不亦乐乎

      我的勉强够我用就可以了,你的主题搞得很漂亮。

      山小炮 2017-07-14 14:07:09   iOS 10.3.2  UC 浏览器 11.5.3.966 回复
      1. 不亦乐乎
        @山小炮

        我的主题就是传统布局,还是你的搞的好看。

        不亦乐乎 2017-07-14 14:41:58   Windows 10 x64 Edition  Google Chrome 59.0.3071.115 回复
  2. 不亦乐乎

    不知道是不是空间问题,感觉那个yellow打开的并不快,你那个比我的还慢。

    不亦乐乎 2017-07-14 11:19:34   Windows 10 x64 Edition  Google Chrome 59.0.3071.115 回复
    1. 山小炮
      @不亦乐乎

      我的是放在vps,国外的,国内有些地方可能会慢些,应该和yellow无关,我这里访问还可以噢,打开你的也很快呀。

      山小炮 2017-07-14 14:04:41   iOS 10.3.2  UC 浏览器 11.5.3.966 回复
发表评论
* 号为必填项
评论支持 Emoji 表情