得劲

根据一些个人习惯所做的修改记录
记录一些根据个人习惯对Typecho和主题的修改,以作备忘。 对Typecho的修改 1.修改后台页面宽度 在撰写...
扫描右侧二维码阅读全文
08
2018/08

根据一些个人习惯所做的修改记录

记录一些根据个人习惯对Typecho和主题的修改,以作备忘。

对Typecho的修改

1.修改后台页面宽度

在撰写和编辑文章的时候还是版式宽一些更方便一些
文件位置:
主目录>/管理目录/css/grid.css
找到
@media(min-width:1200px){.container{max-width:1160px;}
修改为
@media(min-width:1200px){.container{max-width:95%;}

2.快捷设置外观

刚拿到主题的时候难免不熟悉,每次想要设置都要很多步骤:

先登录>点击进入后台>选择控制台>点击外观>点击设置外观

这样太不方便了,由于第一次使用Typecho,
不了解用什么钩子能直接给后台添加一个外观设置的按钮,
只好利用自带的Hello World插件实现了。
编辑文件:
主目录>/usr/plugins/HelloWorld/Plugin.php
最后一段:

 /**
     * 插件实现方法
     * 
     * @access public
     * @return void
     */
    public static function render()
    {
        echo '<a href="options-theme.php"><span class="message success">'
            . htmlspecialchars(Typecho_Widget::widget('Widget_Options')->plugin('HelloWorld')->word)
            . '</span></a>';
    }
}

添加了到外观设置的链接
<a href="options-theme.php">###</a>
这样需要设置主题的时候,进入后台直接点击Hello World 就可以了。

主题修改

自定义CSS样式

添加了一些css样式适应主题透明模式。
可以在后台>设置外观>开发者设置>自定义CSS 里面直接添加;
也可以保存为.css文件然后在后台>设置外观>开发者设置>自定义输出head头部的HTML代码里面进行引入:
<link rel="stylesheet" href="#css文件地址#" type="text/css" />

/*牛仔纹背景图*/
.app{    background: url(https://src.sr/dejin/img/fix.png) repeat;}
/*首页头像自动旋转*/
.thumb-lg{width:130px;}
.avatar{-webkit-transition: 0.4s;-webkit-transition: -webkit-transform 0.4s ease-out;transition: transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; }
.avatar:hover{transform: rotateZ(360deg);-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);}
#aside-user span.avatar{animation-timing-function:cubic-bezier(0,0,.07,1)!important;border: 0 double;border-color: rgba(255,255,255,.5);}
#aside-user span.avatar:hover{transform:rotate(360deg) scale(1.2);border-width:5px;animation:avatar .5s}
/*首页标题字大小*/
.panel-small .index-post-title {font-size: 18px;font-weight: bold;}
/*首页头图*/
.item-thumb-small {height: 160px;margin: 17px; border: none;   border-radius: 15px;}
/*首页文章图片获取焦点放大*/
.item-thumb{cursor: pointer;  transition: all 0.6s;}
.item-thumb:hover{transform: scale(1.05);}
.item-thumb-small{cursor: pointer;  transition: all 0.6s;}
.item-thumb-small:hover{transform: scale(1.05);}
/*内容页样式*/
button i {padding-right: 10px;}
.tip{width:100%;} 
table {background-color: rgba(0,0,0,.6);}
#post-content h1, #post-content h2, #post-content h3, #post-content h4, #post-content h5, #post-content h6 {background-color: rgba(0,0,0,.1);padding: 8px 10px;border-left: 3px solid #000;}
.comment-content-true a, .wrapper-lg .entry-content a {  border-bottom: 0;}
thead{ border-bottom: 3px solid #333;border-left: 2px solid rgba(0,0,0,.3);}
code {background-color: #4CAF50;border-left: 3px solid #2196F3;}
/*左侧栏样式*/
.app-aside{border-right: 1px dotted #999;}
.app-aside-folded .bg-light .dk a ,.setting_body_panel{background-color: rgba(0,0,0,.5);}/*折叠后子目录背景,主题设置面板背景*/
.panel-small,.panel,.bg-white {background: rgba(0,0,0,.1);}
@media (min-width: 1200px){
/*首页文字紧凑*/
.panel-small .post-meta {float: left; width: 70%;padding: 15px;}
.panel-small .summary { min-height: 83px;}
.app.container,.app.container .app-header { width: 100%;max-width:100%;}/*全屏*/
}
/*站点信息*/
#categories-2  h3 { font-size: 10px; padding-left: 15px;}
#categories-2{color:#dcdde6;padding:0}
#categories-2 ul li {border: 0;padding: 8px 23px;}
.app-aside-folded #categories-2{display:none;}/*折叠后隐藏*/
/*代码高亮背景*/
.hljs { background: rgba(0, 0, 0, 0.45);}

站点信息

站点信息移到左侧
主题文件夹下component文件夹sidebar.php内找到如下这段代码转移到aside.php</nav>之前

                  <!--博客信息-->
         <?php if (@!in_array('info',$this->options->sidebarSetting)): ?>
      <section id="categories-2" class="widget widget_categories wrapper-md  clear">
                                  <li class="line dk"></li>
       <h3 class="widget-title m-t-none text-md"><?php _me("博客信息") ?></h3>
       <ul class="list-group">
           <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
           <li class="list-group-item"> <i class="glyphicon glyphicon-file text-muted"></i> <span class="badge
           pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章数目") ?></li>
           <li class="list-group-item"> <i class="glyphicon glyphicon-comment text-muted"></i> <span class="badge
           pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
           <li class="list-group-item"> <i class="glyphicon glyphicon-equalizer text-muted"></i> <span class="badge
           pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
           <li class="list-group-item"> <i class="glyphicon glyphicon-refresh text-muted"></i> <span class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后更新") ?></li>
       </ul>
      </section>
      <?php endif; ?>

上面增加了一句<li class="line dk"></li>分割线,css样式看上一条目。

文章链接

文章页下方添加文章出处链接
主题文件夹下找到post.php在相应位置添加如下代码:

<p class="content-copyright">本文链接:
    <a target="_blank" href="<?php $this->permalink() ?>"><?php $this->permalink() ?>
    </a><br>
    如需转载,请注明出处,谢谢。
</p>
Last modification:August 21st, 2018 at 05:01 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment