本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
源代码
1.进入到网页根目录，按照以下路径依次进入:.../usr/themes/handsome,然后在该目录下新建一个php文件
2.复制以下代码到上面所创建的php文件中,根据需要，自行修改时间轴的内容部分
<?php /** * 时间轴日志 * * @package custom */ ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) { exit; } ?> <?php $this->need('component/header.php');?> <!-- aside --> <?php $this->need('component/aside.php');?> <!-- / aside --> <?php require 'libs/ParserDom.php'; ?> <!-- <div id="content" class="app-content"> --> <style> } .timeline{ width:100%; max-width:800px; background: #fffde4; padding: 100px 50px; position: relative; box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0,0,0,0.3); } .timeline:after{ content:""; display:table; clear:both; } .content{ clear:both; text-align:left; position:relative; } .content .title{ marign-bottom:0.5em; float:left; width:33%; padding-right:30px; text-align:right; position:relative; } .content .title:before{ content:""; position:absolute; width:8px; height:8px; border:4px solid salmon; background-color:#fff; border-radius:100%; top:15%; right:-8px; z-index:9999; } .content .title h3{ margin:0; font-size:120%; } .content .title p{ margin:0; font-size:100%; } .content .fishc{ margin:0 0 3em; float:right; width:66%; padding-left:30px; } .content .fishc p:first-child{ margin-top:0; font-weight:400; } .content .fishc ul{ color:#aaa; padding-left:0; list-style-type:none; } .content .fishc ul li:before{ content:"-"; margin-right:00.5em; } </style> <div id="loadingbar" class="butterbar hide"> <span class="bar"></span> </div> <a class="off-screen-toggle hide"></a> <main class="app-content-body" <?php Content::returnPageAnimateClass($this); ?>> <div class="hbox hbox-auto-xs hbox-auto-sm"> <!--文章--> <div class="col"> <!--标题下的一排功能信息图标：作者/时间/浏览次数/评论数/分类--> <?php echo Content::exportPostPageHeader($this, $this->user->hasLogin(),true); ?> <div class="wrapper-md" id="post-panel"> <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl);?> <!--博客文章样式 begin with .blog-post--> <div id="postpage" class="blog-post"> <article class="single-post panel"> <!--文章页面的头图--> <?php echo Content::exportHeaderImg($this); ?> <!--文章内容--> <div id="post-content" class="wrapper-lg"> <div class="entry-content l-h-2x"> <div class="booklist"> <div class="timeline"> <div class="content"> <div class="title"> <h3>2022年3月10日</h3> <p>网站初搭建            </p> </div> <div class="fishc"> <p>利用typecho平台强力推动建站，宝塔平台一键式搭站！</p> <ul> <li>腾讯云租用服务器</li> <li>腾讯云租用网站域名</li> <li>进行网站首次备案</li> </ul> </div> </div> <div class="content"> <div class="title"> <h3>2022年3月11日</h3> <p>网站首次内容更新     <br>迎接1.0版本！       </p> </div> <div class="fishc"> <p>利用模板更新网站外观,并且进行文章发表</p> <ul> <li>更换主题模板Kratos</li> <li>发表微积分下册全套习题</li> <li>发表Python课后习题源代码</li> </ul> </div> </div> <div class="content"> <div class="title"> <h3>2022年3月21日</h3> <p>网站首次重大更新！<br>迎接2.0版本           </p> </div> <div class="fishc"> <p>网站UI的重新更换,采用强力JOE模板,进行多功能扩展！</p> <ul> <li>采用Joe模板，进行了网站外观的重新设计</li> <li>新的独立页面！包括网站作者简介，休闲空间，灵动空间</li> <li>新的首页轮播图！可以快速到达常用站点</li> <li>新的拓展小功能！包括人生倒计时，标签云</li> </ul> </div> </div> </div> <?php echo Content::postContent($this, $this->user->hasLogin());?> </div> </div> </article> </div> <!--评论--> <?php $this->need('component/comments.php')?> </div> </div> <!--文章右侧边栏开始--> <?php $this->need('component/sidebar.php');?> <!--文章右侧边栏结束--> </div> </main> <!-- footer --> <?php $this->need('component/footer.php');?> <!-- / footer -->
模板使用
在Typecho创建模板中，选择自定义模板中的"时间轴日志"
注意事项
请大家根据自己的需要对时间轴模板中的内容进行修改,上述内容为博主的个人网站的搭建日志,供读者进行参考
