Blog程式修改

你希望標籤可以 隨時增加或減少，並且 橫向排列，

這樣就需要 JavaScript 動態生成標籤，而不是固定 HTML 內容。

---

📌 1. 功能需求

✅ 可新增、刪除主分類與細分類
✅ 標籤橫向排列，而非垂直
✅ 點擊主分類，展開/收合對應的細分類
✅ 子標籤點擊後，搜尋 Blogger 對應標籤文章

---

📜 2. 改進後的動態標籤雲

🔹 HTML + CSS + JavaScript

<div class="tag-cloud">
    <h2>標籤雲</h2>
    <div id="tag-container"></div>

    <!-- 新增標籤輸入框 -->
    <div class="tag-input">
        <input type="text" id="mainTagInput" placeholder="輸入主分類">
        <input type="text" id="subTagInput" placeholder="輸入細分類 (用逗號分隔)">
        <button onclick="addTag()">➕ </button>
    </div>
</div>

<style>
/* 標籤雲樣式 */
.tag-cloud {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* 主分類按鈕（橫向排列） */
.tag-main {
    display: inline-block;
    background: #ff6600;
    color: white;
    padding: 8px 12px;
    border: none;
    font-size: 14px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}
.tag-main:hover {
    background: #ff4500;
}

/* 子標籤（橫向排列） */
.tag-sub {
    display: none;
    margin-top: 5px;
}
.tag-sub a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
    background: #f4f4f4;
    border-radius: 5px;
    margin: 3px;
}
.tag-sub a:hover {
    background: #ddd;
}

/* 新增標籤輸入框 */
.tag-input {
    margin-top: 15px;
    display: flex;
    gap: 5px;
}
.tag-input input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
}
.tag-input button {
    padding: 5px 10px;
    background: #008000;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
.tag-input button:hover {
    background: #006400;
}
</style>

<script>
// 存放標籤的資料
let tags = [
    { main: "程式", sub: ["Python", "JavaScript", "Flask", "Django"] },
    { main: "藝術", sub: ["Photoshop", "Illustrator", "UI-UX"] },
    { main: "科技", sub: ["AI", "Blockchain", "BigData"] },

    { main: "生活", sub: ["Python", "JavaScript", "Flask", "Django"] },

    { main: "宗教", sub: ["Python", "JavaScript", "Flask", "Django"] },
    { main: "音樂", sub: ["Photoshop", "Illustrator", "UI-UX"] }, 

];

// 渲染標籤雲
function renderTags() {
    let tagContainer = document.getElementById("tag-container");
    tagContainer.innerHTML = ""; // 清空舊內容

    tags.forEach((tag, index) => {
        let tagCategory = document.createElement("div");
        tagCategory.classList.add("tag-category");

        // 創建主分類按鈕
        let mainButton = document.createElement("button");
        mainButton.classList.add("tag-main");
        mainButton.innerText = tag.main;
        mainButton.onclick = function () {
            let subTags = this.nextElementSibling;
            subTags.style.display = (subTags.style.display === "block") ? "none" : "block";
        };

        // 創建細分類區塊
        let subDiv = document.createElement("div");
        subDiv.classList.add("tag-sub");

        tag.sub.forEach(sub => {
            let subTag = document.createElement("a");
            subTag.href = `/search/label/${sub}`;
            subTag.innerText = sub;
            subDiv.appendChild(subTag);
        });

        // 創建刪除按鈕
        let deleteBtn = document.createElement("button");
        deleteBtn.innerText = "🗑️";
        deleteBtn.style.marginLeft = "5px";
        deleteBtn.style.background = "#ff0000";
        deleteBtn.style.color = "white";
        deleteBtn.style.border = "none";
        deleteBtn.style.padding = "5px 8px";
        deleteBtn.style.cursor = "pointer";
        deleteBtn.style.borderRadius = "5px";
        deleteBtn.onclick = function () {
            tags.splice(index, 1); // 刪除該分類
            renderTags(); // 重新渲染
        };

        // 組合元素
        tagCategory.appendChild(mainButton);
        tagCategory.appendChild(deleteBtn);
        tagCategory.appendChild(subDiv);
        tagContainer.appendChild(tagCategory);
    });
}

// 新增標籤
function addTag() {
    let mainTag = document.getElementById("mainTagInput").value.trim();
    let subTags = document.getElementById("subTagInput").value.trim().split(",");

    if (mainTag === "" || subTags.length === 0 || subTags[0] === "") {
        alert("請輸入主分類與至少一個細分類！");
        return;
    }

    tags.push({ main: mainTag, sub: subTags.map(tag => tag.trim()) });
    renderTags(); // 重新渲染標籤雲

    // 清空輸入框
    document.getElementById("mainTagInput").value = "";
    document.getElementById("subTagInput").value = "";
}

// 初次渲染
renderTags();
</script>

---

📌 3. 功能與改進點

✅ 動態標籤管理

• 主分類（Tag Main） 可自由新增與刪除
• 細分類（Tag Sub） 可自由增加，每個主分類可包含多個細分類
• 點擊 主分類按鈕，展開或收合 細分類

✅ 標籤橫向排列

• 主分類與細分類 以 inline-block 顯示
• 使用者可以更 直觀地找到分類與標籤

✅ 新增與刪除功能

• 新增分類時，輸入 主分類名稱 + 細分類（用逗號分隔）
• 刪除分類時，點擊 🗑️ 按鈕，即可刪除該分類

---

📌 4. 如何加入 Blogger？

1️⃣ 進入 Blogger 後台
2️⃣ 版面配置 → 新增小工具 → HTML/JavaScript
3️⃣ 貼上上方的程式碼 → 儲存
4️⃣ 檢視部落格，測試標籤雲是否能動態管理

---

🎯 5. 最終效果

✅ 標籤雲可動態增加/刪除分類與細分類
✅ 標籤排列方式由垂直改為「橫向排列」
✅ 可點擊標籤來搜尋 Blogger 文章

這樣就可以 更靈活地管理你的部落格分類 了！
請問這樣的功能符合你的需求嗎？😊

你希望標籤可以 隨時增加或減少，並且 橫向排列，
這樣就需要 JavaScript 動態生成標籤，而不是固定 HTML 內容。

---

📌 1. 功能需求

✅ 可新增、刪除主分類與細分類
✅ 標籤橫向排列，而非垂直
✅ 點擊主分類，展開/收合對應的細分類
✅ 子標籤點擊後，搜尋 Blogger 對應標籤文章

---

📜 2. 改進後的動態標籤雲

🔹 HTML + CSS + JavaScript

<div class="tag-cloud">
    <h2>標籤雲</h2>
    <div id="tag-container"></div>

    <!-- 新增標籤輸入框 -->
    <div class="tag-input">
        <input type="text" id="mainTagInput" placeholder="輸入主分類">
        <input type="text" id="subTagInput" placeholder="輸入細分類 (用逗號分隔)">
        <button onclick="addTag()">➕ 新增分類</button>
    </div>
</div>

<style>
/* 標籤雲樣式 */
.tag-cloud {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* 主分類按鈕（橫向排列） */
.tag-main {
    display: inline-block;
    background: #ff6600;
    color: white;
    padding: 8px 12px;
    border: none;
    font-size: 14px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}
.tag-main:hover {
    background: #ff4500;
}

/* 子標籤（橫向排列） */
.tag-sub {
    display: none;
    margin-top: 5px;
}
.tag-sub a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
    background: #f4f4f4;
    border-radius: 5px;
    margin: 3px;
}
.tag-sub a:hover {
    background: #ddd;
}

/* 新增標籤輸入框 */
.tag-input {
    margin-top: 15px;
    display: flex;
    gap: 5px;
}
.tag-input input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
}
.tag-input button {
    padding: 5px 10px;
    background: #008000;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
.tag-input button:hover {
    background: #006400;
}
</style>

<script>
// 存放標籤的資料
let tags = [
    { main: "📚 程式設計", sub: ["Python", "JavaScript", "Flask", "Django"] },
    { main: "🎨 設計與藝術", sub: ["Photoshop", "Illustrator", "UI-UX"] },
    { main: "📰 科技與新聞", sub: ["AI", "Blockchain", "BigData"] }
];

// 渲染標籤雲
function renderTags() {
    let tagContainer = document.getElementById("tag-container");
    tagContainer.innerHTML = ""; // 清空舊內容

    tags.forEach((tag, index) => {
        let tagCategory = document.createElement("div");
        tagCategory.classList.add("tag-category");

        // 創建主分類按鈕
        let mainButton = document.createElement("button");
        mainButton.classList.add("tag-main");
        mainButton.innerText = tag.main;
        mainButton.onclick = function () {
            let subTags = this.nextElementSibling;
            subTags.style.display = (subTags.style.display === "block") ? "none" : "block";
        };

        // 創建細分類區塊
        let subDiv = document.createElement("div");
        subDiv.classList.add("tag-sub");

        tag.sub.forEach(sub => {
            let subTag = document.createElement("a");
            subTag.href = `/search/label/${sub}`;
            subTag.innerText = sub;
            subDiv.appendChild(subTag);
        });

        // 創建刪除按鈕
        let deleteBtn = document.createElement("button");
        deleteBtn.innerText = "🗑️";
        deleteBtn.style.marginLeft = "5px";
        deleteBtn.style.background = "#ff0000";
        deleteBtn.style.color = "white";
        deleteBtn.style.border = "none";
        deleteBtn.style.padding = "5px 8px";
        deleteBtn.style.cursor = "pointer";
        deleteBtn.style.borderRadius = "5px";
        deleteBtn.onclick = function () {
            tags.splice(index, 1); // 刪除該分類
            renderTags(); // 重新渲染
        };

        // 組合元素
        tagCategory.appendChild(mainButton);
        tagCategory.appendChild(deleteBtn);
        tagCategory.appendChild(subDiv);
        tagContainer.appendChild(tagCategory);
    });
}

// 新增標籤
function addTag() {
    let mainTag = document.getElementById("mainTagInput").value.trim();
    let subTags = document.getElementById("subTagInput").value.trim().split(",");

    if (mainTag === "" || subTags.length === 0 || subTags[0] === "") {
        alert("請輸入主分類與至少一個細分類！");
        return;
    }

    tags.push({ main: mainTag, sub: subTags.map(tag => tag.trim()) });
    renderTags(); // 重新渲染標籤雲

    // 清空輸入框
    document.getElementById("mainTagInput").value = "";
    document.getElementById("subTagInput").value = "";
}

// 初次渲染
renderTags();
</script>

---

📌 3. 功能與改進點

✅ 動態標籤管理

• 主分類（Tag Main） 可自由新增與刪除
• 細分類（Tag Sub） 可自由增加，每個主分類可包含多個細分類
• 點擊 主分類按鈕，展開或收合 細分類

✅ 標籤橫向排列

• 主分類與細分類 以 inline-block 顯示
• 使用者可以更 直觀地找到分類與標籤

✅ 新增與刪除功能

• 新增分類時，輸入 主分類名稱 + 細分類（用逗號分隔）
• 刪除分類時，點擊 🗑️ 按鈕，即可刪除該分類

---

📌 4. 如何加入 Blogger？

1️⃣ 進入 Blogger 後台
2️⃣ 版面配置 → 新增小工具 → HTML/JavaScript
3️⃣ 貼上上方的程式碼 → 儲存
4️⃣ 檢視部落格，測試標籤雲是否能動態管理

---

🎯 5. 最終效果

✅ 標籤雲可動態增加/刪除分類與細分類
✅ 標籤排列方式由垂直改為「橫向排列」
✅ 可點擊標籤來搜尋 Blogger 文章

這樣就可以 更靈活地管理你的部落格分類 了！
請問這樣的功能符合你的需求嗎？😊