分类:人物图鉴：修订间差异

来自SOKA CAFE
可视化wikitext
Banmad3n
Banmad3n（留言 | 贡献） （Edit）
小
 
（未显示1个用户的6个中间版本）
第1行： 第1行：
{{提示
{{提示
|内容='''人物图鉴'''<br><small><div style="margin-top: 6px;line-height:22px;">本页面为SOKA CAFE站点中“人物图鉴”区的中心页，用以收录相关人物信息。</div></small>
|内容='''人物图鉴'''<br><small><div style="margin-top: 6px;line-height:22px;">本页面为SOKA CAFE站点中“人物图鉴”区的中心页，用以收录相关人物信息。</div></small>
第21行： 第20行：
             border-radius: 12px;
             border-radius: 12px;
             padding: 20px;
             padding: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
         }
         }


        /* ---------- 标题 ---------- */
         .title-bar {
         .title-bar {
             display: flex;
             display: flex;
第29行： 第28行：
             justify-content: center;
             justify-content: center;
             margin-bottom: 20px;
             margin-bottom: 20px;
            position: relative;
         }
         }


第35行： 第33行：
             content: "";
             content: "";
             flex: 1;
             flex: 1;
             height: 2px;
             height: 1px;
             background: #ccc;
             background: #eee;
             margin: 0 20px;
             margin: 0 20px;
         }
         }
第44行： 第42行：
             font-weight: bold;
             font-weight: bold;
             color: #333;
             color: #333;
            white-space: nowrap;
         }
         }


        /* ---------- 搜索框：去边框，改为柔和底色 ---------- */
         .search-box {
         .search-box {
             width: 100%;
             width: 100%;
             padding: 12px 16px;
             padding: 12px 16px;
             border: 1px solid #ddd;
             border: none;
            background: #f7f7f8;
             border-radius: 8px;
             border-radius: 8px;
             margin-bottom: 20px;
             margin-bottom: 20px;
             font-size: 16px;
             font-size: 16px;
             outline: none;
             outline: none;
             transition: border-color 0.3s;
             transition: background 0.3s;
         }
         }


         .search-box:focus {
         .search-box:focus {
             border-color: #4facfe;
             background: #f0f5fb;
            box-shadow: 0 0 0 3px rgba(79,172,254,0.2);
         }
         }


        /* ---------- 筛选面板 ---------- */
         .filter-panel {
         .filter-panel {
            border-bottom: 1px solid #eee;
             padding-bottom: 16px;
             padding-bottom: 16px;
             margin-bottom: 20px;
             margin-bottom: 20px;
        }
        .filter-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            padding: 0 8px;
         }
         }


第92行： 第73行：


         .filter-section h3 {
         .filter-section h3 {
             font-size: 16px;
             font-size: 15px;
             font-weight: 500;
             font-weight: 500;
             margin-bottom: 8px;
             margin-bottom: 8px;
             color: #555;
             color: #888;
         }
         }


第106行： 第87行：
         .filter-tag {
         .filter-tag {
             padding: 6px 14px;
             padding: 6px 14px;
             background: #f0f2f5;
             background: #f7f7f8;
             border: 1px solid #ddd;
             border: none;
             border-radius: 20px;
             border-radius: 20px;
             cursor: pointer;
             cursor: pointer;
             font-size: 14px;
             font-size: 14px;
             transition: all 0.3s;
            color: #555;
             transition: background 0.25s, color 0.25s;
            user-select: none;
        }
 
        .filter-tag:hover {
            background: #eef4fb;
         }
         }


         .filter-tag.active {
         .filter-tag.active {
             background: #4facfe;
             background: rgba(79,172,254,0.15);
            color: #fff;
             color: #2c8cf0;
             border-color: #4facfe;
         }
         }


第123行： 第109行：
             color: #4facfe;
             color: #4facfe;
             background: transparent;
             background: transparent;
            border-color: #4facfe;
         }
         }


         .filter-tag.link-tag:hover {
         .filter-tag.link-tag:hover {
             background: rgba(79,172,254,0.1);
             background: rgba(79,172,254,0.08);
         }
         }


        /* ---------- 人物网格 ---------- */
         .org-grid {
         .org-grid {
             display: grid;
             display: grid;
第141行： 第127行：
             border-radius: 8px;
             border-radius: 8px;
             overflow: hidden;
             overflow: hidden;
             transition: all 0.3s ease;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         }


         .org-card:hover {
         .org-card:hover {
             transform: translateY(-5px);
             transform: translateY(-5px);
             box-shadow: 0 6px 16px rgba(0,0,0,0.1);
             box-shadow: 0 6px 16px rgba(0,0,0,0.08);
         }
         }


         .org-img {
         .org-img {
             width: 100%;
             width: 100%;
             height: 240px;
             height: auto;
             object-fit: cover;
             object-fit: cover;
             border-radius: 6px;
             border-radius: 6px;
             border: 1px solid #eee;
             border: none;
            display: block;
            background: #f5f5f5;
        }
 
        .empty-tip {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px 0;
            color: #aaa;
            font-size: 14px;
         }
         }


第179行： 第175行：
                 <h3>身份</h3>
                 <h3>身份</h3>
                 <div class="filter-tags">
                 <div class="filter-tags">
                     <span class="filter-tag" data-filter="non-religious">非政教人士</span>
                     <span class="filter-tag" data-category="identity" data-filter="non-religious">非政教人士</span>
                     <span class="filter-tag" data-filter="religious">政教人士</span>
                     <span class="filter-tag" data-category="identity" data-filter="religious">政教人士</span>
                 </div>
                 </div>
             </div>
             </div>
第187行： 第183行：
                 <h3>所属团体势力</h3>
                 <h3>所属团体势力</h3>
                 <div class="filter-tags">
                 <div class="filter-tags">
                     <span class="filter-tag" data-filter="soka">创价学会</span>
                     <span class="filter-tag" data-category="group" data-filter="soka">创价学会</span>
                     <span class="filter-tag" data-filter="nichiren">日莲正宗</span>
                     <span class="filter-tag" data-category="group" data-filter="nichiren">日莲正宗</span>
                     <span class="filter-tag" data-filter="kensho">显正会</span>
                     <span class="filter-tag" data-category="group" data-filter="kensho">显正会</span>
                     <span class="filter-tag" data-filter="neutral">其他</span>
                     <span class="filter-tag" data-category="group" data-filter="neutral">中立 / 其他</span>
                 </div>
                 </div>
             </div>
             </div>
第197行： 第193行：
                 <h3>主要登场于</h3>
                 <h3>主要登场于</h3>
                 <div class="filter-tags">
                 <div class="filter-tags">
                     <span class="filter-tag" data-filter="main">本篇作品</span>
                     <span class="filter-tag" data-category="appearance" data-filter="main">本篇作品</span>
                     <span class="filter-tag" data-filter="side">编外作品</span>
                     <span class="filter-tag" data-category="appearance" data-filter="side">编外作品</span>
                 </div>
                 </div>
             </div>
             </div>
第205行： 第201行：
                 <h3>主要职业</h3>
                 <h3>主要职业</h3>
                 <div class="filter-tags">
                 <div class="filter-tags">
                     <span class="filter-tag" data-filter="actor">演员</span>
                     <span class="filter-tag" data-category="job" data-filter="actor">演员</span>
                     <span class="filter-tag" data-filter="vocal">歌手（Vocal）</span>
                     <span class="filter-tag" data-category="job" data-filter="vocal">歌手 / Vocal</span>
                     <span class="filter-tag" data-filter="musician">乐手</span>
                     <span class="filter-tag" data-category="job" data-filter="musician">乐手</span>
                     <span class="filter-tag" data-filter="worker">工人</span>
                     <span class="filter-tag" data-category="job" data-filter="worker">工人</span>
                     <span class="filter-tag" data-filter="teacher">教师</span>
                     <span class="filter-tag" data-category="job" data-filter="teacher">教师</span>
                     <span class="filter-tag" data-filter="artist">美术家</span>
                     <span class="filter-tag" data-category="job" data-filter="artist">美术家</span>
                     <span class="filter-tag" data-filter="athlete">运动员</span>
                     <span class="filter-tag" data-category="job" data-filter="athlete">运动员</span>
                     <span class="filter-tag" data-filter="dancer">舞者</span>
                     <span class="filter-tag" data-category="job" data-filter="dancer">舞者</span>
                     <span class="filter-tag" data-filter="journalist">记者</span>
                     <span class="filter-tag" data-category="job" data-filter="journalist">记者</span>
                     <span class="filter-tag" data-filter="doctor">医生</span>
                     <span class="filter-tag" data-category="job" data-filter="doctor">医生</span>
                     <span class="filter-tag" data-filter="lawyer">律师</span>
                     <span class="filter-tag" data-category="job" data-filter="lawyer">律师</span>
                 </div>
                 </div>
             </div>
             </div>
第232行： 第228行：


<script>
<script>
     const wikiDomain = "https://soka.cafe";  
(function () {
     const wikiDomain = "https://soka.cafe";
     const orgData = [
     const orgData = [
         {
         { imgName: "图鉴久本雅美.jpg", link: "久本雅美", name: "久本雅美", tags: ["non-religious", "soka", "main", "actor"] },
            imgName: "图鉴久本雅美.jpg",
         { imgName: "图鉴柴田理惠.jpg", link: "柴田理惠", name: "柴田理惠", tags: ["non-religious", "soka", "main", "actor"] },
            link: "久本雅美",
         { imgName: "图鉴男子部石川.jpg", link: "石川", name: "石川", tags: ["non-religious", "soka", "main"] },
            name: "久本雅美",
         { imgName: "图鉴齐藤房子.jpg", link: "齐藤房子", name: "齐藤房子", tags: ["non-religious", "soka", "main"] },
            tags: ["non-religious", "soka", "main", "actor"]
         { imgName: "图鉴森雅晴.jpg", link: "森雅晴", name: "森雅晴", tags: ["non-religious", "neutral", "main", "actor"] },
        },
         { imgName: "图鉴古贺清.jpg", link: "古贺清", name: "古贺清", tags: ["non-religious", "neutral", "main", "actor"] },
         {
        { imgName: "图鉴元气安.jpg", link: "元气安", name: "元气安", tags: ["non-religious", "neutral", "main", "actor"] },
            imgName: "图鉴柴田理惠.jpg",
         { imgName: "挑同图鉴仓地.png", link: "仓地透", name: "仓地透", tags: ["non-religious", "soka", "main", "worker"] },
            link: "柴田理惠",
         { imgName: "图鉴背后灵.jpg", link: "背后灵", name: "背后灵", tags: ["non-religious", "soka", "main"] },
            name: "柴田理惠",
        { imgName: "图鉴大岛正幸.jpg", link: "大岛正幸", name: "大岛正幸", tags: ["non-religious", "soka", "main", "worker"] },
            tags: ["non-religious", "soka", "main", "actor"]
        { imgName: "图鉴大野俊三.jpg", link: "大野俊三", name: "大野俊三", tags: ["non-religious", "soka", "main", "musician"] },
        },
        { imgName: "图鉴城达也.jpg", link: "城达也", name: "城达也", tags: ["non-religious", "soka", "main", "vocal"] },
         {
        { imgName: "人物图鉴阿尔伯特.jpg", link: "阿尔伯特·城间", name: "阿尔伯特·城间", tags: ["non-religious", "soka", "main", "vocal"] },
            imgName: "图鉴男子部石川.jpg",
         { imgName: "图鉴马尼修.jpg", link: "马尼修·卡普尔", name: "马尼修·卡普尔", tags: ["non-religious", "soka", "main", "vocal"] },
            link: "石川",
         { imgName: "图鉴凯瑟琳.jpg", link: "凯瑟琳·卡什", name: "凯瑟琳·卡什", tags: ["non-religious", "neutral", "main", "musician"] },
            name: "石川",
        { imgName: "图鉴内斯特.jpg", link: "内斯特·托雷斯", name: "内斯特·托雷斯", tags: ["non-religious", "soka", "main", "musician"] },
            tags: ["non-religious", "soka", "main"]
        { imgName: "图鉴高桥.jpg", link: "高桥乔治", name: "高桥乔治", tags: ["non-religious", "soka", "main", "vocal", "musician"] },
        },
        { imgName: "图鉴山崎旭萃.jpg", link: "山崎旭萃", name: "山崎旭萃", tags: ["non-religious", "soka", "main", "musician"] },
         {
        { imgName: "图鉴伊藤日出夫.jpg", link: "伊藤日出夫", name: "伊藤日出夫", tags: ["non-religious", "soka", "main", "musician"] },
            imgName: "图鉴齐藤房子.jpg",
         { imgName: "图鉴松田芳正.jpg", link: "松田芳正", name: "松田芳正", tags: ["non-religious", "neutral", "main", "musician"] }
            link: "齐藤房子",
            name: "齐藤房子",
            tags: ["non-religious", "soka", "main"]
        },
         {
            imgName: "图鉴森雅晴.jpg",
            link: "森雅晴",
            name: "森雅晴",
            tags: ["non-religious", "neutral", "main", "actor"]
        },
         {
            imgName: "图鉴古贺清.jpg",
            link: "古贺清",
            name: "古贺清",
            tags: ["non-religious", "neutral", "main", "actor"]
         },
         {
            imgName: "图鉴元气安.jpg",
            link: "元气安",
            name: "元气安",
            tags: ["non-religious", "neutral", "main", "actor"]
         },
         {
            imgName: "挑同图鉴仓地.png",
            link: "仓地透",
            name: "仓地透",
            tags: ["non-religious", "soka", "main", "woker"]
         },
     ];
     ];


     const orgGrid = document.getElementById("orgGrid");
     const orgGrid = document.getElementById("orgGrid");
     let activeFilters = new Set();
     const searchBox = document.querySelector(".search-box");
    const filterTags = document.querySelectorAll(".filter-tag[data-category]");
 
    // 按分类分组存储已选标签：同分类内为 OR，跨分类为 AND
    const activeFilters = {};


     function getWikiImageUrl(imgName) {
     function getWikiImageUrl(imgName) {
第291行： 第264行：
     }
     }


     function renderOrgCards(filteredData = orgData) {
     function renderOrgCards(data) {
         orgGrid.innerHTML = "";
         orgGrid.innerHTML = "";
         filteredData.forEach(org => {
 
         if (data.length === 0) {
            const tip = document.createElement("div");
            tip.className = "empty-tip";
            tip.textContent = "没有符合条件的人物";
            orgGrid.appendChild(tip);
            return;
        }
 
        data.forEach(org => {
             const card = document.createElement("a");
             const card = document.createElement("a");
             card.className = "org-card";
             card.className = "org-card";
第302行： 第284行：
             img.src = getWikiImageUrl(org.imgName);
             img.src = getWikiImageUrl(org.imgName);
             img.alt = org.name;
             img.alt = org.name;
             img.onerror = function() {
            img.loading = "lazy";
             img.onerror = function () {
                this.onerror = null;
                 this.src = `${wikiDomain}/Special:FilePath/默认图片.png`;
                 this.src = `${wikiDomain}/Special:FilePath/默认图片.png`;
             };
             };
第310行： 第294行：
         });
         });
     }
     }
    // 筛选标签
    document.querySelectorAll('.filter-tag:not(.link-tag)').forEach(tag => {
        tag.addEventListener('click', function() {
            const filter = this.dataset.filter;
            if (activeFilters.has(filter)) {
                activeFilters.delete(filter);
                this.classList.remove('active');
            } else {
                activeFilters.add(filter);
                this.classList.add('active');
            }
            applyFilters();
        });
    });
    // 搜索
    const searchBox = document.querySelector(".search-box");
    searchBox.addEventListener("input", applyFilters);


     function applyFilters() {
     function applyFilters() {
         const keyword = searchBox.value.toLowerCase().trim();
         const keyword = searchBox.value.toLowerCase().trim();
         let filtered = [...orgData];
         const categories = Object.keys(activeFilters).filter(c => activeFilters[c].size > 0);


         // 标签筛选
         let filtered = orgData.filter(item => {
        if (activeFilters.size > 0) {
             // 跨分类 AND：每个已启用的分类都必须至少命中一个该分类下选中的标签
             filtered = filtered.filter(item => {
            return categories.every(cat =>
                 return item.tags.some(t => activeFilters.has(t));
                 Array.from(activeFilters[cat]).some(f => item.tags.includes(f))
             });
             );
         }
         });


        // 关键词搜索
         if (keyword) {
         if (keyword) {
             filtered = filtered.filter(item =>
             filtered = filtered.filter(item => item.name.toLowerCase().includes(keyword));
                item.name.toLowerCase().includes(keyword)
            );
         }
         }


第351行： 第313行：
     }
     }


     renderOrgCards();
    filterTags.forEach(tag => {
        tag.addEventListener("click", function () {
            const category = this.dataset.category;
            const filter = this.dataset.filter;
 
            if (!activeFilters[category]) {
                activeFilters[category] = new Set();
            }
 
            if (activeFilters[category].has(filter)) {
                activeFilters[category].delete(filter);
                this.classList.remove("active");
            } else {
                activeFilters[category].add(filter);
                this.classList.add("active");
            }
 
            applyFilters();
        });
    });
 
    searchBox.addEventListener("input", applyFilters);
 
     renderOrgCards(orgData);
})();
</script>
</script>
</body>
</body>
</html>
</html>
[[分类:中心页]]
[[分类:中心页]]

2026年8月8日 (六) 17:28的最新版本

人物图鉴
本页面为SOKA CAFE站点中“人物图鉴”区的中心页，用以收录相关人物信息。

整体页面

人物图鉴

身份

非政教人士 政教人士

所属团体势力

创价学会 日莲正宗 显正会 中立 / 其他

主要登场于

本篇作品 编外作品

主要职业

演员 歌手 / Vocal 乐手 工人 教师 美术家 运动员 舞者 记者 医生 律师

其他

問題発言シリーズ 900シリーズ

取自“https://soka.cafe/index.php?title=分类:人物图鉴&oldid=3352”