Share mã nguồn tool tra cứu thông tin chi tiết blogspot
Share mã nguồn tool tra cứu thông tin chi tiết blogspot
Hello! Lại là 1 chuyên mục share code tiếp đây. Như các bạn đã biết hôm nay ngày 19/10 là ngày gió mùa đông bắc đầu tiên trong năm về, theo mô hình dự báo chúnh xác nhất thì đợt rét này chưa cảm nhận được rõ rệt gì mấy đâu. Miền bắc nước ta vừa mới khắc phục xong thì bão mới lại xuất hiện gần biển phía miền nam và miền trung, thiên tai rất khốc liệt gây ra khó khăn cho chúng ta. Vẫn như thường lệ theo định kỳ Trick Pro mình lại lên bài share code cho anh em dùng. Nay mình sẽ Share mã nguồn tool tra cứu thông tin chi tiết blogspot, ở bài viết trước có 1 anh mong muốn mình share code thì nay mình lên bài share. Còn ngại gì mà tiếc không để lại cho mình một lượt bình luận, một lượt chia sẻ để mình có động lực share các bài viết thú vị tiếp theo.
 |
| Share mã nguồn tool tra cứu thông tin chi tiết blogspot |
Share mã nguồn tool tra cứu thông tin chi tiết blogspot
Dưới đây là mã nguồn tool tra cứu thông tin chi tiết blogspot, các bạn chỉ cần sửa chỗ api thay api vào đó là
<style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f7f6; color: #333; }
.container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
h1 { color: #007bff; text-align: center; }
.input-group { display: flex; gap: 10px; margin-bottom: 20px; }
#blogUrlInput { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
#fetchBtn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
#fetchBtn:hover { background-color: #0056b3; }
#loading { text-align: center; font-size: 18px; color: #555; display: none; }
#loading-message { margin-top: 10px; font-style: italic; }
table { width: 100%; border-collapse: collapse; margin-top: 0; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
th { background-color: #f2f2f2; font-weight: bold; }
tr:nth-child(even) { background-color: #f9f9f9; }
.label { background-color: #e0e0e0; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-right: 5px; display: inline-block; margin-bottom: 5px; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
.section-title { font-size: 1.5em; color: #333; margin-top: 20px; border-bottom: 2px solid #007bff; padding-bottom: 5px; }
#error { color: red; text-align: center; font-weight: bold; margin-top: 15px; }
.tabs-container { margin-top: 30px; }
.tab-buttons { display: flex; border-bottom: 2px solid #ccc; }
.tab-button { background: none; border: none; padding: 12px 20px; cursor: pointer; font-size: 16px; transition: all 0.2s ease-in-out; border-bottom: 3px solid transparent; }
.tab-button:hover { background-color: #f0f0f0; }
.tab-button.active { font-weight: bold; color: #007bff; border-bottom: 3px solid #007bff; }
.tab-content { display: none; padding-top: 20px; }
.tab-content.active { display: block; }</style>
<div class="container">
<h1>🛠️ Công cụ Tra cứu Thông tin Blogspot</h1>
<div class="input-group">
<input type="text" id="blogUrlInput" placeholder="Nhập URL blog (ví dụ: https://googleblog.blogspot.com)">
<button id="fetchBtn">🔍 Tra cứu</button>
</div>
<div id="loading">
<p>Đang tải dữ liệu, vui lòng chờ...</p>
<p id="loading-message"></p>
</div>
<div id="error"></div>
<div id="results" style="display: none;">
<h2 class="section-title">📊 Thông tin chung</h2>
<table id="blogInfoTable">
<tbody>
<tr><th>URL Blog</th><td id="blogUrl"></td></tr>
<tr><th>ID Blog</th><td id="blogId"></td></tr>
<tr><th>Tiêu đề</th><td id="blogTitle"></td></tr>
<tr><th>Mô tả</th><td id="blogDescription"></td></tr>
<tr><th>Ngày tạo</th><td id="blogPublished"></td></tr>
<tr><th>Cập nhật gần nhất</th><td id="blogUpdated"></td></tr>
<tr><th>Ngôn ngữ</th><td id="blogLocale"></td></tr>
<tr><th>Tổng bài đăng</th><td id="postsTotal"></td></tr>
<tr><th>Tổng trang (Page)</th><td id="pagesTotal"></td></tr>
<tr><th>Tổng bình luận (Toàn bộ)</th><td id="commentsTotal"></td></tr>
</tbody>
</table>
<div class="tabs-container">
<div class="tab-buttons">
<button class="tab-button active" onclick="openTab(event, 'tab-posts')">📝 Danh sách Bài đăng</button>
<button class="tab-button" onclick="openTab(event, 'tab-pages')">📄 Danh sách Trang</button>
<button class="tab-button" onclick="openTab(event, 'tab-comments')">💬 Danh sách Bình luận</button>
</div>
<div id="tab-posts" class="tab-content active">
<table id="postsTable">
<thead><tr><th>Tiêu đề bài đăng</th><th>Người đăng</th><th>Labels</th><th>Ngày đăng</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div id="tab-pages" class="tab-content">
<table id="pagesTable">
<thead><tr><th>Tiêu đề trang</th><th>Người đăng</th><th>Ngày đăng</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div id="tab-comments" class="tab-content">
<table id="commentsTable">
<thead><tr><th>Nội dung bình luận</th><th>Người bình luận</th><th>Bài viết</th><th>Ngày bình luận</th></tr></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<script> const API_KEY = 'Dit_Me_Thay_Api_Tai_Day'; // !!! THAY API KEY CỦA BẠN VÀO ĐÂY !!!
const BASE_URL = 'https://www.googleapis.com/blogger/v3/blogs';
const fetchBtn = document.getElementById('fetchBtn');
const blogUrlInput = document.getElementById('blogUrlInput');
const loadingDiv = document.getElementById('loading');
const loadingMessage = document.getElementById('loading-message');
const resultsDiv = document.getElementById('results');
const errorDiv = document.getElementById('error');
function openTab(evt, tabName) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-button");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
fetchBtn.addEventListener('click', async () => {
const blogUrl = blogUrlInput.value.trim();
if (!blogUrl || API_KEY === 'YOUR_API_KEY') {
errorDiv.textContent = !blogUrl ? 'Vui lòng nhập URL của blog.' : 'Vui lòng cấu hình API Key trong mã nguồn.';
return;
}
resetUI();
loadingDiv.style.display = 'block';
try {
loadingMessage.textContent = 'Đang lấy thông tin blog...';
const blogResponse = await fetch(`${BASE_URL}/byurl?url=${encodeURIComponent(blogUrl)}&key=${API_KEY}`);
if (!blogResponse.ok) throw new Error(`Không tìm thấy blog hoặc có lỗi xảy ra. Status: ${blogResponse.status}`);
const blogData = await blogResponse.json();
const blogId = blogData.id;
displayBlogInfo(blogData);
loadingMessage.textContent = 'Đang tải danh sách bài đăng và trang...';
const [postsData, pagesData] = await Promise.all([
fetchAllItems(`${BASE_URL}/${blogId}/posts`),
fetchAllItems(`${BASE_URL}/${blogId}/pages`)
]);
displayItems(postsData, 'postsTable', createPostRow);
displayItems(pagesData, 'pagesTable', createPageRow);
document.getElementById('postsTotal').textContent = postsData.length;
document.getElementById('pagesTotal').textContent = pagesData.length;
// *** THAY ĐỔI QUAN TRỌNG: Tạo một bản đồ tra cứu bài viết ***
// Chuyển mảng postsData thành một Map để tra cứu ID nhanh hơn
const postLookup = new Map(postsData.map(post => [post.id, { title: post.title, url: post.url }]));
loadingMessage.textContent = `Đang tải toàn bộ bình luận từ ${postsData.length} bài đăng...`;
const allComments = await fetchAllCommentsFromPosts(blogId, postsData);
// *** CẬP NHẬT: Truyền bản đồ tra cứu vào hàm hiển thị bình luận ***
displayItems(allComments, 'commentsTable', (comment) => createCommentRow(comment, postLookup));
document.getElementById('commentsTotal').textContent = allComments.length;
resultsDiv.style.display = 'block';
} catch (error) {
console.error('Lỗi khi lấy dữ liệu:', error);
errorDiv.textContent = `Đã xảy ra lỗi: ${error.message}. Vui lòng kiểm tra lại URL blog và API Key.`;
} finally {
loadingDiv.style.display = 'none';
}
});
async function fetchAllCommentsFromPosts(blogId, posts) {
let allComments = [];
for (const [index, post] of posts.entries()) {
if (post.replies && post.replies.totalItems > 0) {
loadingMessage.textContent = `Đang xử lý bài đăng ${index + 1}/${posts.length}: "${post.title}"`;
const postCommentsUrl = `${BASE_URL}/${blogId}/posts/${post.id}/comments`;
const commentsForPost = await fetchAllItems(postCommentsUrl);
allComments = allComments.concat(commentsForPost);
}
}
return allComments;
}
function resetUI() {
resultsDiv.style.display = 'none';
errorDiv.textContent = '';
document.querySelector('#postsTable tbody').innerHTML = '';
document.querySelector('#pagesTable tbody').innerHTML = '';
document.querySelector('#commentsTable tbody').innerHTML = '';
loadingMessage.textContent = '';
const firstTabButton = document.querySelector('.tab-button');
const firstTabContent = document.querySelector('.tab-content');
if (firstTabButton) {
document.querySelector('.tab-button.active')?.classList.remove('active');
document.querySelector('.tab-content.active')?.classList.remove('active');
firstTabButton.classList.add('active');
firstTabContent.style.display = 'block';
}
}
async function fetchAllItems(initialUrl) {
let allItems = [];
let url = `${initialUrl}?key=${API_KEY}&maxResults=500`;
if (initialUrl.includes('/posts') && !initialUrl.includes('/comments')) {
url += '&fetchBodies=false';
}
while (url) {
const response = await fetch(url);
const data = await response.json();
if (data.items) { allItems = allItems.concat(data.items); }
if(data.nextPageToken){
url = `${initialUrl}?key=${API_KEY}&maxResults=500&pageToken=${data.nextPageToken}`;
if (initialUrl.includes('/posts') && !initialUrl.includes('/comments')) {
url += '&fetchBodies=false';
}
} else {
url = null;
}
}
return allItems;
}
function displayBlogInfo(data) {
document.getElementById('blogUrl').innerHTML = `<a href="${data.url}" target="_blank">${data.url}</a>`;
document.getElementById('blogId').textContent = data.id;
document.getElementById('blogTitle').textContent = data.name;
document.getElementById('blogDescription').textContent = data.description || 'Không có mô tả.';
document.getElementById('blogPublished').textContent = new Date(data.published).toLocaleString('vi-VN');
document.getElementById('blogUpdated').textContent = new Date(data.updated).toLocaleString('vi-VN');
document.getElementById('blogLocale').textContent = data.locale.language;
}
function displayItems(items, tableId, rowCreator) {
const tableBody = document.querySelector(`#${tableId} tbody`);
tableBody.innerHTML = '';
if (items && items.length > 0) {
items.forEach(item => tableBody.appendChild(rowCreator(item)));
} else {
const row = tableBody.insertRow();
const cell = row.insertCell();
cell.colSpan = 4;
cell.textContent = 'Không có dữ liệu.';
cell.style.textAlign = 'center';
}
}
function createPostRow(post) {
const row = document.createElement('tr');
const labelsHtml = post.labels ? post.labels.map(label => `<span class="label">${label}</span>`).join(' ') : 'Không có';
const authorHtml = post.author.url ? `<a href="${post.author.url}" target="_blank">${post.author.displayName}</a>` : post.author.displayName;
row.innerHTML = `<td><a href="${post.url}" target="_blank">${post.title}</a></td><td>${authorHtml}</td><td>${labelsHtml}</td><td>${new Date(post.published).toLocaleString('vi-VN')}</td>`;
return row;
}
function createPageRow(page) {
const row = document.createElement('tr');
const authorHtml = page.author.url ? `<a href="${page.author.url}" target="_blank">${page.author.displayName}</a>` : page.author.displayName;
row.innerHTML = `<td><a href="${page.url}" target="_blank">${page.title}</a></td><td>${authorHtml}</td><td>${new Date(page.published).toLocaleString('vi-VN')}</td>`;
return row;
}
// *** HÀM TẠO HÀNG BÌNH LUẬN ĐÃ ĐƯỢC CẬP NHẬT ***
function createCommentRow(comment, postLookup) {
const row = document.createElement('tr');
const content = comment.content.replace(/<[^>]*>/g, '').substring(0, 150) + '...';
const authorHtml = comment.author.url ? `<a href="${comment.author.url}" target="_blank">${comment.author.displayName}</a>` : comment.author.displayName;
// Dùng bản đồ tra cứu để lấy thông tin bài viết gốc
const postInfo = postLookup.get(comment.post.id);
const postLink = postInfo
? `<a href="${postInfo.url}" target="_blank">${postInfo.title}</a>`
: 'Bài viết không xác định';
row.innerHTML = `<td>${content}</td><td>${authorHtml}</td><td>${postLink}</td><td>${new Date(comment.published).toLocaleString('vi-VN')}</td>`;
return row;
}
// Chặn F12, Ctrl+Shift+I, Ctrl+U
document.onkeydown = function (e) {
// F12
if (e.keyCode === 123) {
return false;
}
// Ctrl+Shift+I
if (e.ctrlKey && e.shiftKey && e.keyCode === 73) {
return false;
}
// Ctrl+U
if (e.ctrlKey && e.keyCode === 85) {
return false;
}
};
// Chặn chuột phải
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
alert("Chức năng này đã bị vô hiệu hoá!");
});</script>
Hướng dẫn lấy mã api để thay
Bước 1: Truy cập trang web của console.cloud.google.com
Bước 2: Tạo app
Bước 3: Ở mục tìm kiếm gõ Blogger API
Bước 4: Kích hoạt blogger api
Bước 5: Vào mục tạo khóa api và tạo cho mình api web app blogger api xong nhớ điền địa chỉ trang web của mình vào và lấy mã api.
Lời kết
Trên đây là mình Share mã nguồn tool tra cứu thông tin chi tiết blogspot. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!
Copyright © Trick Pro
1 nhận xét