「只看正面留言」之類的進階功能

「只看正面留言」之類的進階功能 也可以加^^
【html lang="zh-TW">
【head>
    〈meta charset="UTF-8">
    【style>
    4th部落格 ID: 578558（搜尋 + 負面預設收合版）【/style>   
        body { 
            font-family: Arial, "微軟正黑體", sans-serif; 
            line-height: 1.7; 
            max-width: 960px; 
            margin: 0 auto; 
            padding: 20px; 
            background: #f9f9f9;
            color: #333;
        }
        h2, h3 { color: #1a3c5e; }
        .blog { 
            background: white; 
            border: 1px solid #e0e0e0; 
            padding: 18px; 
            margin: 20px 0; 
            border-radius: 8px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .date { color: #555; font-size: 0.95em; margin-bottom: 8px; }
        .title { color: #2c5282; margin-bottom: 12px; }
        .posted { font-size: 0.9em; color: #666; margin-top: 12px; }
        
        .controls { margin: 20px 0; text-align: center; }
        .controls button, .search-box {
            padding: 10px 16px;
            font-size: 1em;
            border-radius: 6px;
            border: 1px solid #d1d5db;
        }
        .search-box {
            width: 300px;
            margin-right: 10px;
        }
        .controls button {
            cursor: pointer;
            border: none;
            background: #2563eb;
            color: white;
        }
        .controls button:hover { background: #1d4ed8; }
        /* 回應區塊 */
        .comment-item {
            margin: 12px 0;
            transition: all 0.3s;
            display: block; /* 預設顯示，搜尋時會隱藏 */
        }
        .comment-item.hidden { display: none; }
        .comment-item.negative {
            border: 2px solid #ef4444;
            background: #fef2f2;
            border-radius: 8px;
            padding: 4px;
        }
        .comment-header {
            cursor: pointer;
            background: #f0f4f8;
            padding: 12px 16px;
            border-radius: 6px;
            transition: all 0.2s ease;
            border-left: 4px solid #a0c4ff;
        }
        .comment-header:hover {
            background: #e3f2fd;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        .comment-preview {
            color: #1e40af;
            font-weight: 500;
            margin: 6px 0 0 0;
            font-size: 0.95em;
        }
        .toggle-btn {
            color: #15803d;
            font-weight: bold;
            margin-left: 12px;
            font-size: 0.95em;
        }
        .comment-body {
            display: none;
            padding: 16px;
            background: #fdfdfd;
            border-top: 1px solid #e5e7eb;
            border-radius: 0 0 6px 6px;
        }
        .comment-body.expanded {
            display: block;
        }
    
部落格 ID: 578558（留言搜尋＋負面預設收合）


    
    
2008/02/14
    
ctuEE76

    
（Adam 的文章內容、照片、神仙眷侶...）
回應區

    
    全部展開
    全部收合

    

        02於 2008/10/10 16:32 回應
        [展開]
        
    
    

        2008/08/15 Ruby Palace, Middletown, NJ
        神仙眷侶 HsF (1976 cTU心理)、H育m (ctuEE76)
        照片見主文。Adam學長，其他照片中人名可否幫忙寫一下？...
    
 
    

        4th生於 2008/12/23 07:59 回應
        [展開]
        
    
    

        悲哀，看來02辛苦建立起來的4th部落格已淪陷為請海門徒的宣傳區了。也為ctuEE76全體學長有此同學惋惜。Bye Bye!
    

    

        清海是神棍於 2008/12/27 12:41 回應
        [展開]
        
    
    

        當你吹噓清海的法力無邊，卻不知她在別人眼中是生活糜爛、斂財詐騙的神棍，這就造成認知的差異。行為證明一切，多說無益。
    
// 動態產生預覽
function generatePreview(text) {
    text = text.replace(/]+>/g, '').trim();
    const sentences = text.split(/[。！？n]{1,2}/).filter(s => s.trim());
    if (sentences.length >= 2) {
        return sentences[0] + '。' + sentences[1] + '...';
    }
    return text.substring(0, 80) + (text.length > 80 ? '...' : '');
}
// 自動填預覽 + 負面偵測 + 負面預設收合
document.querySelectorAll('.comment-item').forEach(item => {
    const body = item.querySelector('.comment-body');
    const preview = item.querySelector('.comment-preview');
    if (body && preview) {
        preview.textContent = generatePreview(body.innerHTML);
    }
    
    const negativeKeywords = ['悲哀', '走火入魔', '神棍', '詐騙', '精神污染', 'Bye Bye', '淪陷', '瓦釜', '黃鐘', '可悲', '噁心', '滾'];
    const text = (body ? body.innerText : '').toLowerCase();
    if (negativeKeywords.some(kw => text.includes(kw.toLowerCase()))) {
        item.classList.add('negative');
        // 負面留言預設不展開
        const btn = item.querySelector('.toggle-btn');
        if (btn) btn.textContent = '[展開]';
    }
});
// 單則展開/收合
function toggleComment(header) {
    const body = header.nextElementSibling;
    const btn = header.querySelector('.toggle-btn');
    if (body.classList.contains('expanded')) {
        body.classList.remove('expanded');
        btn.textContent = '[展開]';
    } else {
        body.classList.add('expanded');
        btn.textContent = '[收合]';
    }
}
// 全部展開 / 收合
function expandAll() { 
    document.querySelectorAll('.comment-body').forEach(b => b.classList.add('expanded'));
    document.querySelectorAll('.toggle-btn').forEach(b => b.textContent = '[收合]');
}
function collapseAll() { 
    document.querySelectorAll('.comment-body').forEach(b => b.classList.remove('expanded'));
    document.querySelectorAll('.toggle-btn').forEach(b => b.textContent = '[展開]');
}
// 即時搜尋過濾
function filterComments() {
    const input = document.getElementById('searchInput').value.toLowerCase().trim();
    document.querySelectorAll('.comment-item').forEach(item => {
        const text = (item.querySelector('.comment-body')?.innerText || '').toLowerCase();
        const headerText = (item.querySelector('.comment-header')?.innerText || '').toLowerCase();
        if (input === '' || text.includes(input) || headerText.includes(input)) {
            item.classList.remove('hidden');
        } else {
            item.classList.add('hidden');
        }
    });
}
【/script>
【/body>
【/html>
坛主:lkkl于2026_02_14 9:44:10编辑