01.AI Blog

<!DOCTYPE html> <html lang="en"> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G6Y2B0WK9P"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-G6Y2B0WK9P'); </script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01.AI Blog</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"> <link rel="icon" type="image/x-icon" href="./assets/images/yi.ico"> <style> :root { --bg-color: #ffffff; --text-color: #333; --card-bg: white; --nav-bg: #f5f5f5; --sidebar-width: 250px; --header-height: 60px; } .dark-theme { --bg-color: #1a1a1a; --text-color: #f5f5f5; --card-bg: #2a2a2a; --nav-bg: #2a2a2a; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--card-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1000; } .logo { display: flex; align-items: center; text-decoration: none; } .logo h1 { font-size: 24px; color: var(--text-color); margin: 0; } .controls { display: flex; align-items: center; } .control-btn, .social-icon { margin-left: 10px; padding: 5px 10px; border: none; background-color: var(--bg-color); color: var(--text-color); cursor: pointer; border-radius: 5px; font-size: 18px; } .content-wrapper { display: flex; flex: 1; margin-top: var(--header-height); height: calc(100vh - var(--header-height)); overflow: hidden; } .sidebar { width: var(--sidebar-width); background-color: var(--nav-bg); padding: 20px; overflow-y: auto; transition: transform 0.3s ease-in-out; position: fixed; top: var(--header-height); bottom: 0; left: 0; z-index: 999; } .sidebar ul { list-style-type: none; padding: 0; } .sidebar li { margin-bottom: 10px; } .sidebar a { color: var(--text-color); text-decoration: none; transition: color 0.3s; display: block; padding: 5px 0; } .sidebar a:hover { color: #007bff; } .sidebar a.h1 { font-weight: bold; font-size: 1.1em; } .sidebar a.h2 { padding-left: 15px; font-size: 0.9em; } main { flex: 1; padding: 40px 20px; margin-left: var(--sidebar-width); overflow-y: auto; } article { background-color: var(--card-bg); padding: 40px; border-radius: 10px; animation: fadeIn 1s ease-in-out; max-width: 800px; margin: 0 auto; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } article h1 { font-size: 2.5em; margin-bottom: 0.5em; } article h2 { font-size: 2em; margin-top: 1.5em; margin-bottom: 0.5em; } article h3 { font-size: 1.5em; margin-top: 1.5em; margin-bottom: 0.5em; } article h4 { font-size: 1.2em; margin-top: 1.5em; margin-bottom: 0.5em; } article p { line-height: 1.6; margin-bottom: 1em; } article ul, article ol { margin-bottom: 1em; padding-left: 2em; } article li { margin-bottom: 0.5em; } article blockquote { border-left: 4px solid #ccc; padding-left: 1em; margin-left: 0; color: #777; } article pre { background-color: #f4f4f4; padding: 1em; border-radius: 5px; overflow-x: auto; } article code { font-family: monospace; background-color: #f4f4f4; padding: 2px 4px; border-radius: 3px; } article img { max-width: 100%; height: auto; display: block; margin: 1em auto; } .dark-theme article pre, .dark-theme article code { background-color: #333; } .back-to-top { position: fixed; bottom: 40px; right: 50px; padding: 10px 15px; background-color: var(--card-bg); color: var(--text-color); border: none; border-radius: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); cursor: pointer; display: none; z-index: 1000; } footer { text-align: center; padding: 20px; background-color: var(--card-bg); } .toggle-sidebar { display: none; position: fixed; top: 70px; left: 10px; z-index: 1001; background-color: var(--card-bg); border: none; border-radius: 5px; padding: 10px; cursor: pointer; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); width: 80%; max-width: 300px; } .sidebar.active { transform: translateX(0); } main { margin-left: 0; } .toggle-sidebar { display: block; } } </style> </head> <body> <header class="header"> <a href="./index.html" class="logo"> <h1>01.AI</h1> </a> <div class="controls"> <button class="control-btn" id="theme-toggle"> <i class="fas fa-moon"></i> </button> <a href="https://github.com/01-ai/Yi-1.5" class="social-icon" target="_blank"> <i class="fab fa-github"></i> </a> <a href="https://discord.gg/rwct6PSp" class="social-icon" target="_blank"> <i class="fab fa-discord"></i> </a> <a href="https://github.com/01-ai/Yi-1.5/issues/2" class="social-icon" target="_blank"> <i class="fab fa-weixin"></i> </a> </div> </header> <button class="toggle-sidebar" id="toggle-sidebar"> <i class="fas fa-bars"></i> </button> <div class="content-wrapper"> <nav class="sidebar" id="sidebar"> </nav> <main id="blog-container"> </main> </div> <button class="back-to-top" id="back-to-top"> <i class="fas fa-arrow-up"></i> </button> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const blogContainer = document.getElementById('blog-container'); const sidebar = document.getElementById('sidebar'); const urlParams = new URLSearchParams(window.location.search); const post = urlParams.get('post'); if (post) { const blogPath = `./blogs/${post}`; fetch(blogPath) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.text(); }) .then(markdown => { marked.setOptions({ highlight: function(code, lang) { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; }, langPrefix: 'hljs language-' }); const article = document.createElement('article'); article.innerHTML = marked.parse(markdown); blogContainer.appendChild(article); document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block); }); // 提取标题并更新 <title> 标签 const titleMatch = markdown.match(/^#\s+(.+)$/m); if (titleMatch && titleMatch[1]) { const title = titleMatch[1].trim(); document.title = `${title} - 01.AI Blog`; } // 生成目录 generateTableOfContents(article, sidebar); }) .catch(error => { console.error('Error loading blog post:', error); blogContainer.innerHTML = '<p>抱歉，无法加载博客文章。</p>'; }); } else { blogContainer.innerHTML = '<p>未指定博客文章。</p>'; } }); function generateTableOfContents(article, sidebar) { const headings = article.querySelectorAll('h1, h2'); const toc = document.createElement('ul'); headings.forEach((heading, index) => { const li = document.createElement('li'); const a = document.createElement('a'); const id = `heading-${index}`; heading.id = id; a.textContent = heading.textContent; a.href = `#${id}`; a.classList.add(heading.tagName.toLowerCase()); a.addEventListener('click', (e) => { e.preventDefault(); heading.scrollIntoView({ behavior: 'smooth' }); if (window.innerWidth <= 768) { sidebar.classList.remove('active'); } }); li.appendChild(a); toc.appendChild(li); }); sidebar.appendChild(toc); } const themeToggle = document.getElementById('theme-toggle'); const body = document.body; const icon = themeToggle.querySelector('i'); themeToggle.addEventListener('click', () => { body.classList.toggle('dark-theme'); icon.classList.toggle('fa-moon'); icon.classList.toggle('fa-sun'); }); const backToTopButton = document.getElementById('back-to-top'); const mainContent = document.querySelector('main'); mainContent.addEventListener('scroll', () => { if (mainContent.scrollTop > 300) { backToTopButton.style.display = 'block'; } else { backToTopButton.style.display = 'none'; } }); backToTopButton.addEventListener('click', () => { mainContent.scrollTo({ top: 0, behavior: 'smooth' }); }); const toggleSidebarButton = document.getElementById('toggle-sidebar'); const sidebar = document.getElementById('sidebar'); toggleSidebarButton.addEventListener('click', () => { sidebar.classList.toggle('active'); }); // 点击侧边栏外的区域时关闭侧边栏 document.addEventListener('click', (e) => { if (window.innerWidth <= 768 && !sidebar.contains(e.target) && e.target !== toggleSidebarButton) { sidebar.classList.remove('active'); } }); </script> </body> </html>

CINXE.COM

01.AI Blog