本站主题页面优化记录

1.修改内容页图片大小

这样做的目的是为了在手机设备上，照片能够占满整个屏幕宽度，而在其他设备上保持一个较小的宽度。
源代码默认图片是 width: 100%;再加上内容也是 width: 100%;，就等于图片占满整个宽度，显得特别丑
编辑主题文件 index.php
在 head 标签内添加如下代码

<style>
 /* 默认情况下，照片宽度为50% */
    img {
      width: 50%;
    }

    /* 在手机设备上，照片宽度为100% */
    @media only screen and (max-width: 600px) {
      img {
        width: 100%;
      }
    }
</style>

2.修改内容区域大小

编辑主题文件 index.php
在 head 标签内添加如下代码

<style>
html{
      width: 80%;
    }

    
    @media only screen and (max-width: 600px) {
      html{
        width: 100%;
      }
    }
</style>

默认情况下，整个HTML文档的宽度为80%。
当屏幕宽度小于或等于600像素时（即手机设备），整个HTML文档的宽度变为100%。
这样做的目的是为了在手机设备上，整个HTML文档能够占满整个屏幕宽度，而在其他设备上保持一个较小的宽度。

3.整体居中显示

编辑主题文件 index.php
在 style 标签 内添加如下代码

html{
width: 80%;
margin:0 auto;

}

4.链接字体显示黑色并去除下划线，悬停显示红色

编辑主题文件 index.php
在 style 标签 内添加如下代码

<style>
    /* 去除链接下划线并将链接字体颜色修改为黑色 */
    a {
        text-decoration: none;
        color: #000;
    }

    /* 在悬停时将链接字体颜色修改为红色 */
    a:hover {
        text-decoration: underline;
        color: #ff0000; /* 红色 */
    }
</style>

此代码为我自己优化

5.添加搜索

其实这个主题非常简洁，但是如果随着时间推移，文章越来越多，想要快速找到某篇文章还是比较麻烦。
在主题文件内，先添加搜索文件，命名为 search.php

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<?php $this->need('index.php'); ?>

<div class="main">
    <article class="post">
       <h2 class="post-title"><?php echo $this->getKeywords() ? $this->getKeywords() . ' 的搜索结果' : '搜索结果'; ?></h2>

        <?php if ($this->have()): ?>
            <ul>
                <?php while($this->next()): ?>
                    <?php if (stripos($this->title, $this->getKeywords()) !== false): ?>
                        <li>
                            <span class="post-meta"><?php $this->date('Y-m-d'); ?></span>
                            <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
                        </li>
                    <?php endif; ?>
                <?php endwhile; ?>
            </ul>
        <?php else: ?>
            <p><?php _e('你来到了没有搜索结果的荒原'); ?></p>
        <?php endif; ?>
    </article>
</div>

回到主题的 index.php 在想要放入搜索框的位置添加以下代码

<form method="get" class="search-form" action="<?php $this->options->siteUrl(); ?>">
    <input type="text" id="s" name="s" class="text" placeholder="<?php _e('搜索关键词...'); ?>" />
    <input type="hidden" name="type" value="search" />
    <button type="submit" class="submit"><?php _e('搜索'); ?></button>
</form>