Akina的一点小修改

笔记

Akina的一些小修改

Akina for Typecho是由[缺乏维生素](https://zhebk.cn/Web/Akina.html)移植自`Wordpress`

因为个人觉得有些不完善,所以加点小修改

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

1
2
3
4
5
6
7
8
9
<!-- 聚焦内容 -->
<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>

修改为

1
2
3
4
5
6
7
8
9
<!-- 聚焦内容 -->
<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

1
2
3
4
5
6
7
8
$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);

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$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 {}花括号里面,保存就成了

1
object-fit: cover;

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

1
2
3
<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

1
2
3
4
5
6
7
8
<?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>标签之前

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

完成刷新下吧。

Comments