安和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. krau
    krau
    4月1日

    ctrl+c
    ctrl+v
    好了,我学会了(

    回复

    1. 安和
      安和
      4月1日

      正解 (大嘘

      回复