安和Blog

是非成败转头成空

2020年03月30日

手把手教你写Typecho主题——Admin主题

看起来很难,但实际上手你才会发现,这一切都很简单

前言

看起来很难,但实际上手你才会发现,这一切都很简单。

扒后台

直接 Ctrl+S 把Typecho的后台扒下来

主题化

然后在你的 Themes 文件夹内新建一个Admin文件夹,然后新建一个 index.php 把这段粘贴到开头

<?php
/**
 * 基于Typecho后台写的一款主题。
 * 
 * @package Admin
 * @author 安和
 * @version 1.0
 * @link http://lolicorn.com
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;?>

然后出去新建个 head.php 粘贴刚刚复制到的头部代码,再把原来的这个路径改成调用主题地址,公共库有的就不要调用本地的,最后把标题改成调用当前页面

<html class="no-js"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php $this->archiveTitle(array( 'category' => _t('分类 %s 下的文章'), 'search' => _t('包含关键字 %s 的文章'), 'tag' => _t('标签 %s 下的文章'), 'author' => _t('%s 发布的文章') ), '', ' - '); ?><?php $this->options->title(); ?><?php if($this->is('index')): ?> - <?php $this->options->description() ?><?php endif; ?></title><!--输出当前标题 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/style.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/grid.css'); ?>">
<!--把调用的样式改成主题文件夹 -->
<style>@media print {#ghostery-purple-box {display:none !important}}</style></head>

然后新建一个 header.php 把那个黑条条的代码弄进来
然后一样是需要做一些修改 删了控制台,然后把概要改成返回首页

<!--删掉多余的内容 -->
<div class="typecho-head-nav clearfix" role="navigation">
<nav id="typecho-nav-list">
<ul class="root">
<li class="parent"><a href="<?php $this->options->siteUrl(); ?>">概要</a></li>
<!-- 概要改成返回首页 也可以直接改成首页这些hhh -->
</ul>
<ul class="root">
<li class="parent"><a href="<?php $this->options->siteUrl(); ?>/post.html">文章</a></li>
<!-- 这里后续做一个独立页面 用来显示全部文章,一样的道理,直接扒后台的就行 -->
</ul>
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php while($pages->next()): ?>
<ul class="root">
<li class="parent"><a href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a></li>
</ul>
<?php endwhile; ?> <!-- 输出自定义页面 -->
<!-- 把下面的用户删掉 有需要可以加点别的 或者弄个登录用户判断 我看到feed大佬那里是搞了个游客 -->

这下顶栏OK之后直接搞首页内容就行了

加上两行调用

$this->need('heade.php');
$this->need('header.php');

然后粘贴 并修改下首页

<div class="main">
<div class="container typecho-dashboard">
<div class="typecho-page-title">
<h2>网站概要</h2>
</div>
<div class="col-mb-12 welcome-board" role="main">
              <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
               <p>目前有 <em><?php $stat->publishedPostsNum() ?></em> 篇文章, 并有 <em><?php $stat->publishedCommentsNum() ?></em> 条评论在 <em><?php $stat->categoriesNum() ?></em> 个分类中. </p>
</div>
            <div class="col-mb-12 col-tb-4" role="complementary">
                <section class="latest-link">
                    <h3><?php _e('最近发布的文章'); ?></h3>
<!-- 调用Typecho自带的统计函数 -->
                    <?php Typecho_Widget::widget('Widget_Contents_Post_Recent', 'pageSize=10')->to($posts); ?>
                    <ul>
                    <?php if($posts->have()): ?>
                    <?php while($posts->next()): ?>
                        <li>
                            <span><?php $posts->date('n.j'); ?></span>
                            <a href="<?php $posts->permalink(); ?>" class="title"><?php $posts->title(); ?></a>
                        </li>
                    <?php endwhile; ?>
                    <?php else: ?>
                        <li><em><?php _e('暂时没有文章'); ?></em></li>
                    <?php endif; ?>
                    </ul>
                </section>
            </div>
 <div class="col-mb-12 col-tb-4" role="complementary">
                <section class="latest-link">
                    <h3><?php _e('最近得到的回复'); ?></h3>
                    <ul>
                        <?php Typecho_Widget::widget('Widget_Comments_Recent', 'pageSize=10')->to($comments); ?>
                        <?php if($comments->have()): ?>
                        <?php while($comments->next()): ?>
                        <li>
                            <span><?php $comments->date('n.j'); ?></span>
                            <a href="<?php $comments->permalink(); ?>" class="title"><?php $comments->author(true); ?></a>:
                            <?php $comments->excerpt(35, '...'); ?>
                        </li>
                        <?php endwhile; ?>
                        <?php else: ?>
                        <li><?php _e('暂时没有回复'); ?></li>
                        <?php endif; ?>
                    </ul>
                </section>
            </div>
<div class="col-mb-12 col-tb-4" role="complementary">
<section class="latest-link">
<h3>友情链接</h3>
<!-- 这里需要友情链接插件的支持 -->
<div id="typecho-message">
<ul><li><?php Links_Plugin::output("SHOW_TEXT", 10); ?></li></ul>
</div>
</section>
</div>
</div>
</div>
</div>

页脚

把底下的版权信息和js调用弄到页脚
新建一个footer.php

<!-- 页脚 -->
<!-- 版权声明 -->
<div class="typecho-foot" role="contentinfo">
<div class="copyright">
<a href="http://typecho.org/" class="i-logo-s" target="_blank">Typecho</a>
<p>由 <a href="http://typecho.org/" target="_blank">Typecho</a> 强力驱动</p>
<p>Theme By <a href="https://lolicorn.com/" target="_blank">安和</a></p>
<!-- 改成自己的就行啦 反正我也没费多少功夫哈哈哈 -->
</div>
</div>
<!-- 引用js文件 这里是在保存的后台页面的底下 -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="<?php $this->options->themeUrl('/js/typecho.css');?>"></script>

然后在index.php里调用

<?php $this->need('header.php'); ?>

这样 首页就OK了 (目前咕咕咕 有空再写

注明

本主题创意来自 Feed 但并未使用这位大佬的代码
本主题的代码以Github上的版本为准,如果按照本文写的出错的话,建议对照Github版看看

评论卡

评论区

已有 22 条评论

  1. AFYUN
    AFYUN
    5月11日

    想要那种删掉主题版权就禁止使用主题的

    回复

    1. 安和
      安和
      5月12日

      我目前是没见过这种主题,现在留不留版权都已经完全凭自觉了
      写个自定义字段 然后在版权输出处调用 如果调用为空就关闭页面这样子 但是也没用 把判定删了就完事了

      回复

  2. Neko
    Neko
    5月1日

    斯。。。我以前还真见过有人用这种主题
    当时我们还在调侃他内裤外穿
    (笑)

    回复

    1. 安和
      安和
      5月1日

      (笑)

      回复

  3. Ryan
    Ryan
    4月28日

    现在的高中生厉害啊,我高中还在沉迷网络小说

    回复

    1. 安和
      安和
      4月29日

      我现在基本什么都不会hhhh 发的东西也都是一天之内能全部学会的

      回复

  4. TniAsu
    TniAsu
    4月17日

    这就是高中生吗,爱了爱了

    回复

    1. 安和
      安和
      4月17日

      我是高中生 ×
      我是有害垃圾 √

      回复

  5. 恶魔菌.
    恶魔菌.
    4月9日

    好强!但是不是wp……(笑w

    回复

    1. 安和
      安和
      4月10日

      WP我不会鸭hhh

      回复

  6. Lvtu
    Lvtu
    4月6日

    好牛的样子 。。。。

    回复

    1. 安和
      安和
      4月7日

      看起来好牛hhh

      回复

  7. saky
    saky
    4月3日

    复制粘贴,emmm,学会了

    回复

    1. 安和
      安和
      4月3日

      大部分我都加了注释的,可能还不够详细(

      回复

  8. 神代Lingki
    神代Lingki
    4月3日

    没有什么是复制粘贴不能解决的:)

    回复

    1. 安和
      安和
      4月3日

      如果有_____

      回复

  9. 油油
    油油
    4月2日

    貌似很难的亚子

    回复

    1. 安和
      安和
      4月2日

      回复

  10. 小石
    小石
    4月2日

    什么时候教我手把手写wordpress主题

    回复

    1. 安和
      安和
      4月2日

      等你把我教会了(

      回复