文章49
标签16
分类4

手把手教你写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版看看

本文作者:安和
本文链接:https://lolicorn.com/333.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可

22 评论

  1. AFYUN 2020年5月11日 回复
    想要那种删掉主题版权就禁止使用主题的
    1. 安和 2020年5月12日 回复
      回复 AFYUN: 我目前是没见过这种主题,现在留不留版权都已经完全凭自觉了
      写个自定义字段 然后在版权输出处调用 如果调用为空就关闭页面这样子 但是也没用 把判定删了就完事了
  2. Neko 2020年5月1日 回复
    斯。。。我以前还真见过有人用这种主题
    当时我们还在调侃他内裤外穿
    (笑)
    1. 安和 2020年5月1日 回复
      回复 Neko: (笑)
  3. Ryan 2020年4月28日 回复
    现在的高中生厉害啊,我高中还在沉迷网络小说
    1. 安和 2020年4月29日 回复
      回复 Ryan: 我现在基本什么都不会hhhh 发的东西也都是一天之内能全部学会的
  4. TniAsu 2020年4月17日 回复
    这就是高中生吗,爱了爱了
    1. 安和 2020年4月17日 回复
      回复 TniAsu: 我是高中生 ×
      我是有害垃圾 √
  5. 恶魔菌. 2020年4月9日 回复
    好强!但是不是wp……(笑w
    1. 安和 2020年4月10日 回复
      回复 恶魔菌.: WP我不会鸭hhh
  6. Lvtu 2020年4月6日 回复
    好牛的样子 。。。。
    1. 安和 2020年4月7日 回复
      回复 Lvtu: 看起来好牛hhh
  7. saky 2020年4月3日 回复
    复制粘贴,emmm,学会了
    1. 安和 2020年4月3日 回复
      回复 saky: 大部分我都加了注释的,可能还不够详细(
  8. 神代Lingki 2020年4月3日 回复
    没有什么是复制粘贴不能解决的:)
    1. 安和 2020年4月3日 回复
      回复 神代Lingki: 如果有_____
  9. 油油 2020年4月2日 回复
    貌似很难的亚子
    1. 安和 2020年4月2日 回复
  10. 小石 2020年4月2日 回复
    什么时候教我手把手写wordpress主题
    1. 安和 2020年4月2日 回复
      回复 小石: 等你把我教会了(