手把手教你写Typecho主题——Admin主题
浏览 263 | 评论 22 | 字数 5999
安和
2020年03月30日
  • 前言

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

    扒后台

    直接 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版看看

    本文作者:安和
    本文链接:https://lolicorn.com/333.html
    最后修改时间:2020-04-27 16:56:25
    本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
    评论
    与本文无关评论请发留言板。请不要水评论,谢谢。
    textsms
    支持 Markdown 语法
    email
    link
    评论列表
    已有 22 条评论
    2020-05-11 23:04
    想要那种删掉主题版权就禁止使用主题的
    2020-05-12 11:26
    @AFYUN 我目前是没见过这种主题,现在留不留版权都已经完全凭自觉了
    写个自定义字段 然后在版权输出处调用 如果调用为空就关闭页面这样子 但是也没用 把判定删了就完事了
    2020-05-01 20:26
    斯。。。我以前还真见过有人用这种主题
    当时我们还在调侃他内裤外穿
    (笑)
    2020-05-01 21:11
    @Neko (笑)
    2020-04-28 21:11
    现在的高中生厉害啊,我高中还在沉迷网络小说
    2020-04-29 10:11
    @Ryan 我现在基本什么都不会hhhh 发的东西也都是一天之内能全部学会的
    2020-04-17 20:53
    这就是高中生吗,爱了爱了
    2020-04-17 22:12
    @TniAsu 我是高中生 ×
    我是有害垃圾 √
    2020-04-09 16:34
    好强!但是不是wp……(笑w
    2020-04-10 10:44
    @恶魔菌. WP我不会鸭hhh