Zotero笔记插件模板+自定义样式

Zotero笔记模板+自定义样式

这篇属于前面的笔记功能的集大成的一节。（代码在最后）

删减了多余的模板内容，并将内置样式进行修改。

最终效果如下，随时调用不同的样式，新建笔记只保留抓取信息和总结部分的内容。

请在微信客户端打开

1.内置笔记格式修改

内置笔记样式，效果如下：修改后的笔记样式，如下：

请在微信客户端打开

2.固定样式模板内容

自动抓取信息：

包括：文章标题，作者，时间，期刊名看完之后的总结，如图所示：

请在微信客户端打开

使用方法：

新建笔记

选中任意文献条目：新建条目笔记，用新设置好的模板：新建笔记如下：

请在微信客户端打开

调用各种样式的使用快捷键：

一级标题： #加回车键二级标题： ## 加回车键三级四级标题以此类推：项目编号： - 加回车三个 - 为分割线/：可以弹出一些样式内容，如下：掌握以上的内容用来做笔记够用了。

代码：

Zotero笔记编辑器代码，复制的位置参考：Zotero笔记插件（2）：better note笔记模板设置

${await new Promise(async (r) => {
    let res = `<h1>${topItem.getField("title")}</h1>
<h2>🔍基础信息</h2>
<ul>
  <li><b>作者: </b>${topItem.getCreators().map((au) => au.firstName + " " + au.lastName).join("; ")}</li>
  <li><b>期刊: </b>${topItem.getField("publicationTitle")}</li>
  <li><b>日期: </b>${topItem.getField("date")}</li>
</ul>  
<hr>

<hr>

<h2>📚 总结 (定调)</h2>
<ul>
  <li><strong>本书精华收获</strong>：<br>
    <ul>
      <li> </li>
    </ul>
  </li>
  <li><strong>延伸阅读推荐</strong>：<br>
    <ul>
      <li> </li>
    </ul>
  </li>
</ul>`



;
    r(res);
  })}

HTML测试代码，用于在codePen中测试CSS代码样式：

</head>

<body class="primary-editor">

<h1>H1 标题测试</h1>

<h2>H2 标题测试</h2>

<p>
这是一个普通段落，用来测试 <strong>加粗效果</strong> 和 <em>斜体效果</em>。
</p>

<h3>H3 标题测试</h3>
<h4>H4 标题测试</h4>
<p>
包含一个链接：<a href="#">点击这里</a>
</p>

<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>

<blockquote>
这是引用块，用来测试背景色、左边框和文字颜色。
用于长文本强调区域。
</blockquote>

</body>
</html>

笔记样式CSS格式，复制在设置中的内置编辑器中，操作请参照：Zotero better notes 自定义默认格式最终代码：

.primary-editor,
body {
  background: #000000 !important;
}

h1 {
  font-size: 1.7em !important;
  color: #C0C0C0 !important;
  background: #000000 !important;

  border-bottom: 5px solid #008000 !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;

  !text-align: center !important;
}

h2 {
  font-size: 1.35em !important;
  font-weight: 700 !important;
  color: #8FA9C7 !important;
  background: #000000 !important;

  border-left: none !important;
  border-bottom: 2px solid #3A6EA5 !important; /* 新增：下划线颜色 */

  padding-left: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;

  margin-top: 18px !important;
  margin-bottom: 10px !important;

  line-height: 1.35 !important;
}



h3 {
  font-size: 1.15em !important;
  font-weight: 650 !important;
  color: #7F95AD !important;
  background: #000000 !important;

  border-left: none !important;
  border-bottom: none !important;

  padding-left: 4px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;

  margin-top: 14px !important;
  margin-bottom: 8px !important;

  line-height: 1.35 !important;
}

h4 {
  font-size: 1.05em !important;
  font-weight: 650 !important;
  color: #00C853 !important;   /* 强绿色标题 */
  background: #000000 !important;



  padding-left: 10px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;

  margin-top: 12px !important;
  margin-bottom: 8px !important;

  line-height: 1.4 !important;
}



p {
  font-size: 1em !important;
  font-weight: 400 !important;
  color: #C0C0C0 !important;
  background: #000000 !important;

  line-height: 1.75 !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

li {
  font-size: 1em !important;
  color: #C0C0C0 !important;
  line-height: 1.7 !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

ul,
ol {
  color: #C0C0C0 !important;
  padding-left: 26px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

strong,
b {
  color: #E0E0E0 !important;
  font-weight: 700 !important;
}

em,
i {
  color: #A8B8C8 !important;
}

a {
  color: #7DB7E8 !important;
  text-decoration: none !important;
}

a:hover {
  color: #A7D8FF !important;
  text-decoration: underline !important;
}

blockquote {
  color: #AAB4C2 !important;
  background: #0A0A0A !important;

  border-left: 4px solid #008000 !important;
  padding: 8px 12px !important;
  margin: 12px 0 !important;

  line-height: 1.7 !important;
}