静态HTML站点搜索功能优化：如何让页面链接与标题并列显示

嘿，我来帮你搞定这个搜索结果加跳转链接的问题！你现在的核心问题是查询语句里没获取page_link字段，而且输出逻辑里也没把标题和链接关联起来，所以没法实现点击跳转。咱们一步步来改：

第一步：修改SQL查询语句 #

你原来的查询只选中了page_title，得把page_link也加进查询字段里，这样才能拿到跳转用的地址：

<?php 
if(isset($_GET['keywords'])) { 
    $keywords = $dbc->escape_string($_GET['keywords']); 
    // 新增page_link字段到查询结果中
    $query = $dbc->query(" 
        SELECT page_title, page_link FROM contents 
        WHERE page_contents LIKE '%{$keywords}%' OR page_title LIKE '%{$keywords}%' 
    "); 
} 
?>

第二步：输出搜索结果时关联标题与链接 #

接下来在展示搜索结果的部分，把每个标题用<a>标签包裹，将page_link作为跳转地址。如果需要让链接文本和标题并列显示，可以额外添加一行展示链接的代码，再用CSS调整布局：

<div class="result-count">Found <?php echo $query->num_rows; ?> results</div>
<div class="search-results">
    <?php if($query->num_rows > 0): ?>
        <?php while($row = $query->fetch_assoc()): ?>
            <div class="result-item">
                <!-- 把标题做成可点击的链接 -->
                <a href="<?php echo htmlspecialchars($row['page_link']); ?>" class="result-title">
                    <?php echo htmlspecialchars($row['page_title']); ?>
                </a>
                <!-- 额外显示链接文本，和标题并列 -->
                <span class="result-url"><?php echo htmlspecialchars($row['page_link']); ?></span>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p>No results found for "<?php echo htmlspecialchars($keywords); ?>"</p>
    <?php endif; ?>
</div>

小补充：用CSS实现并列布局 #

如果要让标题和链接文本真正并排显示，给.result-item加个Flex布局就行：

.result-item {
    display: flex;
    gap: 10px; /* 标题和链接之间的间距 */
    align-items: center;
    margin-bottom: 12px;
}
.result-url {
    color: #666;
    font-size: 14px;
}

重要提醒 #

记得用htmlspecialchars()转义输出的内容，这能避免XSS安全漏洞，是开发里的好习惯哦！

内容的提问来源于stack exchange，提问作者Addam B