窗的美化
窗的美化

窗的美化

我用的是WordPress自带的主题TwentySeventeen, 之所以用它,是因为在几个自带主题中挑选一遍,还是2017年这种带主页图片的主题比较讨喜。

选好主题图片,导入以前的记录,很好,Bindow回来了。

但是我还没那么容易满足,谁让整个页面显得那么单调呢?

美好却孤独的窗在看着你…

然后,用我最爱的魔法,就能让窗变成这样

你说什么?我可没说过这话!

我一直都知道一言(hitokoto)的API可以让你从它的数据库里随机引用一句话,那么很好,就让一言替我说话。

我用过一言的移动端API,里面的句子有很多是动漫相关的,我不太感兴趣,而且我比较喜欢能够自定义,所以直接把要读取的一言文件放在自己的服务器上本地调用应该是最好的选择。(API可能会死,但本地还可以留存)

这里是引用张戈博客里面的一段代码来实现从根目录下hitokoto文件夹里读取hitokoto.txt的:

以上代码保存为index.php,然后上传到网站根目录下的hitokoto文件夹。

修改主题对我来说还是有点难度的,借助F12的力量,找到PHP文件后,就可以开工了。具体的主页文件是.\template-parts\header\header-image.php (主页图片.php),而张戈博客里给出的代码段则是:

<?php
//获取句子文件的绝对路径
//如果你介意别人可能会拖走这个文本,可以把文件名自定义一下,或者通过Nginx禁止拉取也行。
$path = dirname(__FILE__);
$file = file($path."/hitokoto.txt");

//随机读取一行
$arr  = mt_rand( 0, count( $file ) - 1 );
$content  = trim($file[$arr]);

//编码判断,用于输出相应的响应头部编码
if (isset($_GET['charset']) && !empty($_GET['charset'])) {
    $charset = $_GET['charset'];
    if (strcasecmp($charset,"gbk") == 0 ) {
        $content = mb_convert_encoding($content,'gbk', 'utf-8');
    }
} else {
    $charset = 'utf-8';
}
header("Content-Type: text/html; charset=$charset");

//格式化判断,输出js或纯文本
if ($_GET['format'] === 'js') {
    echo "function hitokoto(){document.write('" . $content ."');}";
} else {
    echo $content;
}

我原先是想直接copy进去就能实现上图的效果,可惜把这两行代码嵌入之后,什么也没发生。没办法,只能一点点理解代码的上下文。有趣的是,文字好像只是隐藏在了图片下方。期间,问了问同学,知道了通过设置css的z-index低显示层级,那么我就通过F12找到了隐藏在图片下面的文字,设置z-index和其他一些相关的东西之后,文字就能很好的显示在正中间了。

就在我以为事情已经结束的时候,又出现了几个问题:

  1. F12中的css文件刷新页面之后就没了,还需要把它保存到css文件中去才行;
  2. 一言能很好地显示在主页上,但在其他页面,一言也显示在了页面中央,必须要设置判断;
  3. 主页里,一言出现后标题和副标题消失了;

第一个问题不是很难,但也花了我一点时间。我原本想在style.css里直接加入hitokoto的css属性,可是网页像不领情,最后,通过主题页里的“添加额外css”,添加了hitokoto的css,搞定了这个问题;

第二个问题我通过Google查询得知,需要判断是否在主页,再决定是否添加一言,代码如下:

<?php if(is_front_page() && is_home()): ?>
<div class="custom-header">
    <script type="text/javascript" src="//www.bindow.top/hitokoto/?format=js&charset=utf-8"></script>
<div id="hitokoto" class="hitokoto"><script>hitokoto()</script></div>
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
    <div>

<?php get_template_part( 'template-parts/hader/site', 'branding' ); ?>
    </div><!-- .custom-header -->
    <?php else: ?>
 <!-- <div class="custom-header"> -->
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header -->
<?php endif; ?>

这里通过is_front_page() && is_home()判断了是否在主页,再分支添加或不添加一言。

效果不错,但是这也引发了第三个问题,就是窗的标题和副标题没了。由于我并不了解php,这个问题在我尝试很久之后放弃解决,毕竟,没有标题也挺好看。

光是这一个小小的一言添加,就折腾了我一天,我们又向那个方向前进了一天啊!

那么,晚安了,Bindow,你应该喜欢一言。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据