typecho文章编辑界面新增参考文章功能

因为再写技术博客的时候总是要很多的参考文章。直接在文章引用感觉怪怪的。所以自己更改了一些数据结构，接口。

效果为这样的：

![微信图片_2025-08-25_223652_204.png#B #S #R #60%](https://blog.iletter.top/usr/uploads/2025/08/2136440465.png)

## 增加数据库字段
typecho_contents这个表增加一个字段post_links，类型为text

## 修改接口文件

路径在var/Widget/Contents/Post下面的Edit.php文件

## 修改编辑文章文件
文件地址在admin路径下的write-post.php文件，新增部分。css暂时不写了

``` php
                    
                    <section class="typecho-post-option reference-links-section" id="reference-links-section">
                        <label class="typecho-label toggle-reference-section" style="cursor: pointer;">
                            <span class="toggle-icon" style="float: left;"><i class="i-caret-right"></i></span>
                             <?php _e('参考文章'); ?>
                        </label>
                        <div class="reference-links-container" id="post-links-container">
                            <?php
                            // 从数据库获取数据
                            $links = [];
                            if ($post->have()) {
                                $db = Typecho\Db::get();
                                $result = $db->fetchRow($db->select('post_links')->from('table.contents')->where('cid = ?', $post->cid));
                                if (!empty($result) && !empty($result['post_links'])) {
                                    $postLinks = $result['post_links'];
                                    $links = json_decode($postLinks, true);
                                    if (!is_array($links)) $links = [];
                                }
                            }
                            
                            // 如果没有数据，添加一个空行
                            if (empty($links)) {
                                $links = [['name' => '', 'link' => '']];
                            }
                            
                            foreach ($links as $index => $link):
                            ?>
                            <div class="reference-link-item">
                                <div class="reference-link-inputs">
                                    <input type="text" 
                                           name="post_links[<?php echo $index; ?>][name]" 
                                           placeholder="<?php _e('链接名称'); ?>" 
                                           value="<?php echo htmlspecialchars($link['name'] ?? ''); ?>" 
                                           class="text reference-link-name" />
                                    <input type="url" 
                                           name="post_links[<?php echo $index; ?>][link]" 
                                           placeholder="<?php _e('https://'); ?>" 
                                           value="<?php echo htmlspecialchars($link['link'] ?? ''); ?>" 
                                           class="text reference-link-url" />
                                </div>
                                <div class="reference-link-actions">
                                    <button type="button" class="btn btn-xs remove-reference-link" title="<?php _e('删除'); ?>">
                                        <i class="i-delete"></i>
                                    </button>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="reference-links-footer">
                            <button type="button" id="add-reference-link" class="btn btn-xs">
                                <i class="i-plus"></i> <?php _e('添加引用'); ?>
                            </button>
                            <span class="reference-links-help"><?php _e('温故而知新，添加相关的参考链接，记忆更牢固。'); ?></span>
                        </div>
                    </section>
                    
```

受限于代码长度过长，使得文章无法正常解析，可以点击链接下载。

### 点击下载：
[代码.zip](https://blog.iletter.top/usr/uploads/2025/08/4140979538.zip)

因为再写技术博客的时候总是要很多的参考文章。直接在文章引用感觉怪怪的。所以自己更改了一些数据结构，接口。

效果为这样的：

![微信图片_2025-08-25_223652_204.png#B #S #R #60%](https://blog.iletter.top/usr/uploads/2025/08/2136440465.png)

## 增加数据库字段
typecho_contents这个表增加一个字段post_links，类型为text

## 修改接口文件

路径在var/Widget/Contents/Post下面的Edit.php文件

## 修改编辑文章文件
文件地址在admin路径下的write-post.php文件，新增部分。css暂时不写了

``` php
                    
                    <section class="typecho-post-option reference-links-section" id="reference-links-section">
                        <label class="typecho-label toggle-reference-section" style="cursor: pointer;">
                            <span class="toggle-icon" style="float: left;"><i class="i-caret-right"></i></span>
                             <?php _e('参考文章'); ?>
                        </label>
                        <div class="reference-links-container" id="post-links-container">
                            <?php
                            // 从数据库获取数据
                            $links = [];
                            if ($post->have()) {
                                $db = Typecho\Db::get();
                                $result = $db->fetchRow($db->select('post_links')->from('table.contents')->where('cid = ?', $post->cid));
                                if (!empty($result) && !empty($result['post_links'])) {
                                    $postLinks = $result['post_links'];
                                    $links = json_decode($postLinks, true);
                                    if (!is_array($links)) $links = [];
                                }
                            }
                            
                            // 如果没有数据，添加一个空行
                            if (empty($links)) {
                                $links = [['name' => '', 'link' => '']];
                            }
                            
                            foreach ($links as $index => $link):
                            ?>
                            <div class="reference-link-item">
                                <div class="reference-link-inputs">
                                    <input type="text" 
                                           name="post_links[<?php echo $index; ?>][name]" 
                                           placeholder="<?php _e('链接名称'); ?>" 
                                           value="<?php echo htmlspecialchars($link['name'] ?? ''); ?>" 
                                           class="text reference-link-name" />
                                    <input type="url" 
                                           name="post_links[<?php echo $index; ?>]<div class="list-group list-group-lg list-group-sp row" style="margin: 0"></div>" 
                                           placeholder="<?php _e('https://'); ?>" 
                                           value="<?php echo htmlspecialchars($link['link'] ?? ''); ?>" 
                                           class="text reference-link-url" />
                                </div>
                                <div class="reference-link-actions">
                                    <button type="button" class="btn btn-xs remove-reference-link" title="<?php _e('删除'); ?>">
                                        <i class="i-delete"></i>
                                    </button>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="reference-links-footer">
                            <button type="button" id="add-reference-link" class="btn btn-xs">
                                <i class="i-plus"></i> <?php _e('添加引用'); ?>
                            </button>
                            <span class="reference-links-help"><?php _e('温故而知新，添加相关的参考链接，记忆更牢固。'); ?></span>
                        </div>
                    </section>
                    
```

受限于代码长度过长，使得文章无法正常解析，可以点击链接下载。

### 点击下载：
[代码.zip](https://blog.iletter.top/usr/uploads/2025/08/4140979538.zip)

最后修改：2025 年 08 月 25 日