[Item/Text] 笔记模板 #1429

haojiubujian1 · 2025-08-07T13:00:36Z

haojiubujian1
Aug 7, 2025

Description

如何实现这样的笔记模板呢

Screenshots

Test on Zotero version

zotero 7

Test on Better Notes version

any

Template Type

Item

Template Share Code

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学术文献笔记模板</title>
    <style>
        /* === 基础样式 === */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: #f9f7ff;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(123, 31, 162, 0.15);
            overflow: hidden;
            padding: 25px;
            margin: 0 auto 30px;
            max-width: 1000px;
            position: relative;
        }
        
        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #7B1FA2, #4A148C);
            border-radius: 10px 10px 0 0;
        }
        
        /* === 超链接样式 === */
        a,
        a:visited {
            color: #42B983;
            text-decoration: underline;
        }

        a:hover,
        a:focus {
            color: rgba(255, 69, 0, 0.5);
        }

        /* === 引用样式 === */
        blockquote {
            border-left: 4px solid #4caf50;
            background-color: #e8f5e9;
            color: #2e7d32;
            padding: 0.01px;
            margin: 0px 0;
        }

        blockquote p {
            margin: 10px;
            padding-top: 0px;
        }

        /* === 加粗样式 === */
        b, strong {
            font-size: 1em;
            color: rgba(255, 69, 0, 1);
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 2px;
        }

        /* === 标题样式 === */
        h1 {
            font-size: 1.2em;
            margin-bottom: 2em;
            margin-right: 5px;
            padding: 8px 15px;
            letter-spacing: 2px;
            color: #000000;
            border-left: 10px solid rgba(240, 19, 19, 0.5);
            background: rgba(240, 19, 19, 0.25);
            border-radius: 5px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.5);
            text-align: center;
        }

        h2 {
            font-size: 1em;
            margin-bottom: 2em;
            margin-right: 5px;
            padding: 8px 15px;
            letter-spacing: 2px;
            color: #000000;
            border-left: 10px solid rgba(102, 204, 153, 0.5);
            background: rgba(102, 204, 153, 0.25);
            border-radius: 5px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.5);
            text-align: center;
        }

        h3 {
            font-size: 1.1em;
            margin-right: 5px;
            letter-spacing: 2px;
            padding: 10px 10px;
            padding-left: 20px !important;
            background: rgba(246, 249, 247, 0.7);
            border-left: 10px solid rgba(66, 185, 131, 0.8);
            border-radius: 5px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.5);
        }

        /* === 列表设计 === */
        ul { 
            list-style-type: disc; 
            border-left: 5px solid #a8d08d;
            border-radius: 10px;
            padding: 10px 0 10px 30px;
            margin: 15px 0;
        }

        ol {
            list-style-type: decimal;
            border-left: 5px solid #a8d08d;
            border-radius: 10px;
            padding: 10px 0 10px 30px;
            margin: 15px 0;
        }

        /* 删除一级列表以外的左边框 */
        ul ul, ol ol {
            border-left: none;
            font-size: 14px;
        }

        /* 添加分割线 */
        ul li:not(ul ul li):not(ul li:first-child),
        ol li:not(ol ol li):not(ol li:first-child) {
            border-top: 3px solid #ccc;
            padding-top: 8px;
            margin-top: 8px;
        }

        /* 根据嵌套层级改变颜色 */
        ul>li::marker,
        ol>li::marker {
            color: red;
            font-size: 15px;
        }

        ul>li>ul>li::marker,
        ul>li>ol>li::marker,
        ol>li>ul>li::marker,
        ol>li>ol>li::marker {
            color: rgb(44, 80, 196);
            font-size: 15px;
        }

        ul>li>ul>li>ul>li::marker,
        ul>li>ul>li>ol>li::marker,
        ul>li>ol>li>ul>li::marker,
        ul>li>ol>li>ol>li::marker,
        ol>li>ul>li>ul>li::marker,
        ol>li>ul>li>ol>li::marker,
        ol>li>ol>li>ul>li::marker,
        ol>li>ol>li>ol>li::marker {
            color: green;
            font-size: 15px;
        }

        ul ul ul ul li::marker,
        ol ol ol ol li::marker {
            color: #ccc;
        }

        /* === 文献笔记专用样式 === */
        .metadata-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .metadata-table tr td {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .metadata-table tr:last-child td {
            border-bottom: none;
        }
        
        .metadata-table tr:nth-child(odd) td {
            background-color: #f8f5ff;
        }
        
        .metadata-table tr:nth-child(even) td {
            background-color: #f0ebfa;
        }
        
        .section {
            margin: 30px 0;
            padding: 20px;
            border-radius: 8px;
            background: linear-gradient(to right, rgba(123, 31, 162, 0.03), rgba(123, 31, 162, 0.01));
            border-left: 3px solid #7B1FA2;
            position: relative;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            color: #fff;
            background: linear-gradient(90deg, #66cdaa, #20B2AA);
            padding: 12px 20px;
            border-radius: 6px;
            margin: -15px -15px 20px -20px;
            font-size: 18px;
            font-weight: 600;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .section-title.research-content {
            background: linear-gradient(90deg, #87cefa, #1E90FF);
        }
        
        .section-title.personal-summary {
            background: linear-gradient(90deg, #afeeee, #008B8B);
        }
        
        .subsection {
            margin: 25px 0;
            padding-left: 15px;
            border-left: 3px solid #E1BEE7;
        }
        
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }
        
        .tag {
            background: #E1BEE7;
            color: #4A148C;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .journal-highlight {
            color: #d32f2f;
            font-weight: 700;
        }
        
        .publication-tag {
            background: #4A148C;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            display: inline-block;
            margin: 0 3px;
        }
        
        .content-area {
            min-height: 120px;
            padding: 15px;
            margin-top: 10px;
            border: 1px dashed #BA68C8;
            border-radius: 8px;
            background: #fdfcff;
        }
        
        .content-area:focus {
            outline: none;
            border: 1px solid #7B1FA2;
            background: #fff;
        }
        
        .footer-note {
            text-align: center;
            margin-top: 30px;
            color: #7B1FA2;
            font-size: 14px;
            font-style: italic;
            padding: 15px;
            border-top: 1px dashed #D1C4E9;
        }
        
        /* === 响应式设计 === */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            h1, h2 {
                font-size: 1em;
                padding: 6px 10px;
            }
            
            h3 {
                font-size: 0.95em;
                padding: 8px;
            }
            
            .section-title {
                font-size: 16px;
                padding: 10px 15px;
            }
            
            .metadata-table tr td {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <h1>
            (2023-09-15) Advanced Machine Learning Techniques: A Comprehensive Review (高级机器学习技术：全面综述)
        </h1>
        
        <!-- 元数据表格 -->
        <table class="metadata-table">
            <!-- 作者 -->
            <tr>
                <td>
                    <b>作者:</b> John Smith; Jane Doe; Robert Johnson; Emily Williams; Michael Brown; et al.
                </td>
            </tr>
            
            <!-- 期刊 -->
            <tr>
                <td>
                    <b>期刊: <b class="journal-highlight">Journal of Artificial Intelligence Research</b></b>
                    <b> （发表日期: 2023-09-15）</b>
                </td>
            </tr>
            
            <!-- 期刊分区 -->
            <tr>
                <td>
                    <b>期刊分区: </b>
                    <span class="publication-tag">Q1</span>
                    <span class="publication-tag">Top 5%</span>
                    <span class="publication-tag">CCF-A</span>
                    <span class="publication-tag">IF: 12.5</span>
                </td>
            </tr>
            
            <!-- 本地链接 -->
            <tr>
                <td>
                    <b>本地链接: </b><a href="#">advanced_ml_techniques_review.pdf</a>
                </td>
            </tr>
            
            <!-- DOI or URL -->
            <tr>
                <td>
                    <b>DOI: </b><a href="#">https://doi.org/10.1234/jaair.2023.56789</a>
                </td>
            </tr>
            
            <!-- 摘要 -->
            <tr>
                <td>
                    <b>摘要翻译: </b><i>本文全面回顾了先进的机器学习技术，包括深度学习、强化学习和迁移学习的最新进展。我们分析了这些技术在计算机视觉、自然语言处理等领域的应用，并讨论了未来的研究方向和挑战...</i>
                </td>
            </tr>
            
            <!-- 标签 -->
            <tr>
                <td>
                    <b>标签:</b>
                    <div class="tag-container">
                        <span class="tag">#机器学习</span>
                        <span class="tag">#深度学习</span>
                        <span class="tag">#人工智能</span>
                        <span class="tag">#文献综述</span>
                        <span class="tag">#研究方法</span>
                    </div>
                </td>
            </tr>
            
            <!-- 笔记日期 -->
            <tr>
                <td>
                    <b>笔记日期: </b>2023-10-20 14:30:45
                </td>
            </tr>
        </table>
        
        <!-- 研究核心 -->
        <div class="section">
            <div class="section-title">
                📜 研究核心
            </div>
            <blockquote><p>Tips: 做了什么，解决了什么问题，创新点与不足？</p></blockquote>
            
            <div class="subsection">
                <h3>⚙️ 内容</h3>
                <div class="content-area" contenteditable="true">
                    <ul>
                        <li>提出了一种新的机器学习框架</li>
                        <li>解决了传统方法在复杂数据上的性能问题</li>
                        <li>在多个基准数据集上进行了验证</li>
                    </ul>
                </div>
            </div>
            
            <div class="subsection">
                <h3>💡 创新点</h3>
                <div class="content-area" contenteditable="true">
                    <ol>
                        <li>创新的模型架构设计
                            <ul>
                                <li>多模态数据融合</li>
                                <li>自适应学习机制</li>
                            </ul>
                        </li>
                        <li>高效的计算优化方法</li>
                        <li>可解释性增强技术</li>
                    </ol>
                </div>
            </div>
            
            <div class="subsection">
                <h3>🧩 不足</h3>
                <div class="content-area" contenteditable="true">
                    <ul>
                        <li>计算资源要求较高</li>
                        <li>在小样本场景下表现不佳</li>
                        <li>缺乏理论证明</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 研究内容 -->
        <div class="section">
            <div class="section-title research-content">
                🔁 研究内容
            </div>
            
            <div class="subsection">
                <h3>💧 数据</h3>
                <div class="content-area" contenteditable="true">
                    <p>使用了5个公开数据集：</p>
                    <ul>
                        <li>ImageNet - 140万张图像</li>
                        <li>COCO - 33万张图像</li>
                        <li>LibriSpeech - 1000小时语音</li>
                    </ul>
                </div>
            </div>
            
            <div class="subsection">
                <h3>👩🏻‍💻 方法</h3>
                <div class="content-area" contenteditable="true">
                    <ol>
                        <li>数据预处理
                            <ol>
                                <li>标准化</li>
                                <li>增强</li>
                            </ol>
                        </li>
                        <li>模型构建</li>
                        <li>训练策略</li>
                    </ol>
                </div>
            </div>
            
            <div class="subsection">
                <h3>🔬 实验</h3>
                <div class="content-area" contenteditable="true">
                    <ul>
                        <li>对比实验
                            <ul>
                                <li>与传统方法比较</li>
                                <li>与SOTA方法比较</li>
                            </ul>
                        </li>
                        <li>消融实验</li>
                        <li>鲁棒性测试</li>
                    </ul>
                </div>
            </div>
            
            <div class="subsection">
                <h3>📜 结论</h3>
                <div class="content-area" contenteditable="true">
                    <blockquote>
                        <p>该方法在多个任务上取得了最先进的结果，特别是在复杂场景下表现优异。</p>
                    </blockquote>
                </div>
            </div>
        </div>
        
        <!-- 个人总结 -->
        <div class="section">
            <div class="section-title personal-summary">
                🤔 个人总结
            </div>
            <blockquote><p>Tips: 你对哪些内容产生了疑问，你认为可以如何改进？</p></blockquote>
            
            <div class="subsection">
                <h3>🙋‍♀️ 重点记录</h3>
                <div class="content-area" contenteditable="true">
                    <ul>
                        <li>模型架构的创新点</li>
                        <li>实验设计的严谨性</li>
                        <li>实际应用的可能性</li>
                    </ul>
                </div>
            </div>
            
            <div class="subsection">
                <h3>📌 待解决</h3>
                <div class="content-area" contenteditable="true">
                    <ol>
                        <li>如何降低计算资源需求？</li>
                        <li>能否应用到实时系统？</li>
                        <li>在小样本场景的改进方向</li>
                    </ol>
                </div>
            </div>
            
            <div class="subsection">
                <h3>💭 思考启发</h3>
                <div class="content-area" contenteditable="true">
                    <blockquote>
                        <p>该方法可以结合迁移学习解决领域适应问题，具有广阔的应用前景。</p>
                    </blockquote>
                </div>
            </div>
        </div>
        
        <div class="footer-note">
            本笔记模板由 Zotero Better Notes 生成 | 最后更新于 2023-10-20
        </div>
    </div>
</body>
</html>

Anything else

.

windingwind · 2025-08-07T13:57:15Z

windingwind
Aug 7, 2025
Maintainer

善用搜索

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[Item/Text] 笔记模板 #1429

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

[Item/Text] 笔记模板 #1429

Uh oh!

haojiubujian1 Aug 7, 2025

Description

Screenshots

Test on Zotero version

Test on Better Notes version

Template Type

Template Share Code

Anything else

Replies: 1 comment

Uh oh!

windingwind Aug 7, 2025 Maintainer

haojiubujian1
Aug 7, 2025

windingwind
Aug 7, 2025
Maintainer