TYPO3 12单页网站新闻详情返回链接锚点跳转问题

核心思路 #

把首页新闻区块的内容元素UID从列表页传递到详情页，返回时通过锚点定位到该区块，避免重复滚动。

步骤1：修改列表页新闻链接，传递区块UID #

在新闻列表模板（如News/List.html）中，给<n:link>添加additionalParams，传入当前新闻区块的UID：

<n:link 
    newsItem="{newsItem}" 
    settings="{settings}" 
    title="{newsItem.title}"
    additionalParams="{tx_news_pi1: {blockUid: cObject.uid}}"
>
    查看详情
</n:link>

注：如果模板中当前内容元素的变量不是cObject，可替换为data（部分模板上下文用data.uid），确保获取的是新闻区块的内容元素UID。

步骤2：确保新闻区块有对应ID #

检查新闻区块的前端容器，确保带有TYPO3默认的内容元素ID格式c{uid}，如果自定义了模板，手动添加：

<div id="c{cObject.uid}" class="news-section">
    <!-- 新闻列表内容 -->
</div>

步骤3：修改详情页返回链接，添加锚点 #

方案A：直接在模板中获取参数

无需修改控制器，直接通过request对象获取URL参数生成锚点：

<f:link.page 
    pageUid="{settings.backPid}"
    fragment="{f:if(condition: request.getQueryParams()['tx_news_pi1']['blockUid'], then: 'c{request.getQueryParams()[\'tx_news_pi1\'][\'blockUid\']}', else: '')}"
>
    返回新闻列表
</f:link.page>

方案B：通过控制器传递变量（更清晰）

在NewsController的detailAction中接收参数并赋值给视图：

public function detailAction(\GeorgRinger\News\Domain\Model\News $news): \Psr\Http\Message\ResponseInterface
{
    // 获取传递的blockUid参数
    $blockUid = $this->request->getQueryParams()['tx_news_pi1']['blockUid'] ?? null;
    $this->view->assign('blockUid', $blockUid);
    
    // 原有业务逻辑
    return $this->htmlResponse();
}

然后在详情页模板中使用该变量生成返回链接：

<f:link.page 
    pageUid="{settings.backPid}"
    fragment="{f:if(condition: blockUid, then: 'c{blockUid}', else: '')}"
>
    返回新闻列表
</f:link.page>

验证效果 #

点击新闻详情链接后，URL会带有?tx_news_pi1[blockUid]=xxx参数；点击返回链接时，页面会直接滚动到ID为cxxx的新闻区块位置。

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