AKINA小魔改

释放双眼,带上耳机,听听看~!

Akina for Typecho是由缺乏维生素移植自WordPress
因为个人觉得有些不完善,所以加点小修改

聚焦

作者聚焦图片是写死了的,所以给主题小小修改一下就可以在后台给聚焦加标题图片链接了
修改位置:index.php

<!-- 聚焦内容 -->
<div class="top-feature">
    <h1 class="fes-title">聚焦</h1>
        <div class="feature-content">
            <li class="feature-1"><a href="<?php $this->options->feature1();?>"><div class="feature-title"><span class="foverlay">feature1</span></div><img src="<?php echo theurl; ?>images/feature/feature1.jpg"></a></li>
            <li class="feature-2"><a href="<?php $this->options->feature2();?>"><div class="feature-title"><span class="foverlay">feature2</span></div><img src="<?php echo theurl; ?>images/feature/feature2.jpg"></a></li>
            <li class="feature-3"><a href="<?php $this->options->feature3();?>"><div class="feature-title"><span class="foverlay">feature3</span></div><img src="<?php echo theurl; ?>images/feature/feature3.jpg"></a></li>
        </div>
</div>

修改为

<!-- 聚焦内容 -->
<div class="top-feature">
    <h1 class="fes-title">聚焦</h1>
        <div class="feature-content">
            <li class="feature-1"><a href="<?php $this->options->feature1();?>"><div class="feature-title"><span class="foverlay"><?php $this->options->title1();?></span></div><img src="<?php $this->options->n1();?>"></a></li>
            <li class="feature-2"><a href="<?php $this->options->feature2();?>"><div class="feature-title"><span class="foverlay"><?php $this->options->title2();?></span></div><img src="<?php $this->options->n2();?>"></a></li>
            <li class="feature-3"><a href="<?php $this->options->feature3();?>"><div class="feature-title"><span class="foverlay"><?php $this->options->title3();?></span></div><img src="<?php $this->options->n3();?>"></a></li>
        </div>
</div>

修改位置:functions.php

    $feature1 = new Typecho_Widget_Helper_Form_Element_Text('feature1', NULL,NULL, _t('聚焦内容1'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature1);
  
    $feature2 = new Typecho_Widget_Helper_Form_Element_Text('feature2', NULL,NULL, _t('聚焦内容2'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature2);
  
    $feature3 = new Typecho_Widget_Helper_Form_Element_Text('feature3', NULL,NULL, _t('聚焦内容3'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature3);

修改为

    $feature1 = new Typecho_Widget_Helper_Form_Element_Text('feature1', NULL,NULL, _t('聚焦文章1'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature1);
    $n1 = new Typecho_Widget_Helper_Form_Element_Text('n1', NULL,'/usr/themes/Akina/images/feature/feature1.jpg', _t('聚焦图片1'), _t('默认图/usr/themes/Akina/images/feature/feature1.jpg'));
    $form->addInput($n1);
    $title1 = new Typecho_Widget_Helper_Form_Element_Text('title1', NULL,'/usr/themes/Akina/images/feature/feature1.jpg', _t('标题1'));
    $form->addInput($title1);
  
    $feature2 = new Typecho_Widget_Helper_Form_Element_Text('feature2', NULL,NULL, _t('聚焦文章2'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature2);
    $n2 = new Typecho_Widget_Helper_Form_Element_Text('n2', NULL,'/usr/themes/Akina/images/feature/feature2.jpg', _t('聚焦图片2'), _t('默认图/usr/themes/Akina/images/feature/feature2.jpg'));
    $form->addInput($n2);
    $title2 = new Typecho_Widget_Helper_Form_Element_Text('title2', NULL,'/usr/themes/Akina/images/feature/feature1.jpg', _t('标题2'));
    $form->addInput($title2);
  
    $feature3 = new Typecho_Widget_Helper_Form_Element_Text('feature3', NULL,NULL, _t('聚焦文章3'), _t('请规范填写,需https://,http://或者//'));
    $form->addInput($feature3);
    $n3 = new Typecho_Widget_Helper_Form_Element_Text('n3', NULL,'/usr/themes/Akina/images/feature/feature3.jpg', _t('聚焦图片3'), _t('默认图/usr/themes/Akina/images/feature/feature3.jpg'));
    $form->addInput($n3);
    $title3 = new Typecho_Widget_Helper_Form_Element_Text('title3', NULL,'/usr/themes/Akina/images/feature/feature1.jpg', _t('标题3'));
    $form->addInput($title3);

有些乱,凑合着用

聚焦图片自动裁剪

配合上面的修改一起用,主题原本是没有自动裁剪图片功能的,没有事先裁剪好,图片会拉伸
修改位置:css/style.css
将下面代码添加到.top-feature img {}花括号里面,保存就成了

object-fit: cover;

添加灯箱效果

这个是因为在pc端看不见小图片我给加上去的,代码来自Typecho文章图片添加灯箱效果
修改位置:header.php </head>标签之前

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!--如果主题已经引用了jQuery库,可以忽略这条-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>

修改位置:post.php

<?php $this->content(); ?>
#改为-------
<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

修改位置:footer.php </body>标签之前

<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

完成刷新下吧。

人已赞赏
知识分享

给博客加个萌萌的备案

2020-9-1 12:20:00

知识分享

使用Aria2Drive搭建网盘

2020-9-2 12:22:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索