【typecho优化】给后台撰写文章添加“常用标签选择”功能

一、教程

通过修改 ./admin/write-post.php 文件，为Typecho后台文章撰写页面添加常用标签选择功能，方便快速选取已有标签，提高编辑效率。

找到

<section class="typecho-post-option">
    <label for="token-input-tags" class="typecho-label"><?php _e('标签'); ?></label>
    <p><input id="tags" name="tags" type="text" value="<?php $post->tags(',', false); ?>"
              class="w-100 text"/></p>
</section>

替换为

<section class="typecho-post-option">
    <label for="token-input-tags" class="typecho-label"><?php _e('标签'); ?></label>
    <p>
        <input id="tags" name="tags" type="text" value="<?php $post->tags(',', false); ?>" class="w-100 text" />
        
        <style>
            .tagshelper { margin-top: 15px; }
            .tagshelper-list { list-style: none; border: 1px solid #D9D9D6; padding: 6px 12px; max-height: 240px; overflow: auto; background-color: #FFF; border-radius: 2px; }
            .tagshelper a { cursor: pointer; padding: 2px 6px; margin: 2px 2px; display: inline-block; border-radius: 2px; text-decoration: none; border: 1px solid #e2e2e2; background: #f9f9f9; font-size: 13px; color: #666; }
            .tagshelper a:hover { background: #467B96; color: #fff; border-color: #467B96; }
        </style>

        <?php
        $tagsWidget = Typecho_Widget::widget('Widget_Metas_Tag_Cloud', 'sort=count&desc=1&limit=200');
        $tagsHtml = '';

        if ($tagsWidget->have()) {
            while ($tagsWidget->next()) {
                $tagName = $tagsWidget->name;
                $safeName = addslashes($tagName);
                $tagsHtml .= "<a onclick=\"$('#tags').tokenInput('add', {id: '{$safeName}', tags: '{$safeName}'});\">{$tagName}</a>";
            }
        } else {
            $tagsHtml = '暂无标签';
        }
        ?>

        <script>
            window.addEventListener('load', function() {
                if (typeof $ !== 'undefined') {
                    var tagsList = <?php echo json_encode($tagsHtml); ?>;
                    
                    var container = '<div class="tagshelper">常用标签选择：<div class="tagshelper-list">' + tagsList + '</div></div>';
                    $('#tags').after(container);
                }
            });
        </script>
    </p>
</section>