给文字加小提示

[shijiafodizi]

比如想给生僻字加拼音，或者加一些小的注释，需要鼠标悬停的时候看到注释的内容。可以使用这个方法。一般都是只在这一个地方使用，如果要多处使用，可以采用页面链接的方式自行更改。

效果如图：

用link的方式加小标注，标注加在后面的()中。标注中写 注: 后面的冒号必须要英文的，以便识别为外部链接：

这是其他文字[需要加标注的文字](注: 小标注)…

在CSS中加入下面代码：

/*=====小标注，提示类====*/

a[href*="注"]{  
  color:inherit;
  display: inline;  
}
a[href*="注"]:before {
  content: attr(href);
  display:none;
}

a.external-link[href*="注"]:hover::before {
  width:200px;
  display:inline-block;
  background:var(--ls-page-blockquote-bg-color, #f7f7f7);
  border:1px solid white;
  padding:8px;
  margin:25px 0 0 10px;
  font-size: 0.8em;
  /*注释定位*/
  position:absolute;
  z-index: 1;
  top: 50%;
  left: 30%;
  margin-left: -60px;  
} 

[shimu527]

感谢分享!
问一个问题,我试了下,似乎只适用于md,不适用于org

[shijiafodizi]

谢谢反馈。这种方法主要采用了外部链接的一个表达。在org里外部链接是什么方式，我们也用什么方式就可以了。

[handuo]

实现sticky note类似的文字提示，很酷的效果！

1. custom.css里添加代码

.sticky {
  margin-top: 50px;
  position: relative;
}
.sticky > :last-child {
  color: #333;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 12px 10px -7px rgb(0 0 0 / 20%);
  background: #eae672;
  transform: rotate(2deg);
}
.sticky > :first-child {
  background-color: #aaa;
  display: block;
  height: 32px;
  width: 2px;
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 1;
  padding: 0;
}
.sticky > :first-child:after {
  background-color: #A31;
  background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
              inset 3px 3px 3px hsla(0,0%,100%,.2),
              inset -3px -3px 3px hsla(0,0%,0%,.2),
              23px 20px 3px hsla(0,0%,0%,.15);
  content: '';
  height: 12px;
  left: -5px;
  position: absolute;
  top: -10px;
  width: 12px;
}
.sticky > :first-child:before {
  background-color: hsla(0,0%,0%,0.1);
  box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
  content: '';
  height: 24px;
  width: 2px;
  left: 0;
  position: absolute;
  top: 8px;
  transform: rotate(57.5deg);
  transform-origin: 50% 100%;
}

当然如果觉得上面的那个顶针太花哨，不想要，可以直接复制这个

.sticky {
  margin-top: 50px;
  position: relative;
}
.sticky > :last-child {
  color: #333;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 12px 10px -7px rgb(0 0 0 / 20%);
  background: #eae672;
  transform: rotate(2deg);
}

当然了，这种情况下你在笔记里输入#-BEGIN_STICKY时就不需要后面加上span那一行了。

2. 添加sticky note

直接在笔记里输入：

#+BEGIN_STICKY
<span class="pin"></span>
内容字数补丁紫薯布丁🍮
#+END_STICKY

3. 修改颜色

在.sticky > :last-child 里面修改
background 后面就是背景色
color后面就是字体颜色
width 后面是宽度

4. 进阶

你甚至可以在css里，对应的代码块前面加上.dark-theme 和.white-theme来规定明暗主题下不同的sticky note的颜色

[xulei-shl]

2. 添加sticky note

• 可以在config的commands的配置<sticky指令快捷输入

 :commands
 [["sticky" "#+BEGIN_STICKY
<span class=\"pin\"></span>

#+END_STICKY"]]

[shijiafodizi]

@handuo @xulei-shl 两位的分享太棒了，sticky note很酷！
请教一下，你的class pin有什么用？

[handuo]

你是说<span class=\"pin\"></span> 这段代码吗?它是为了展示sticky note上方的小针的, 如果没有这行代码格式就会乱.

PS: 现在最新版的logseq已经支持pinned的预格式代码块了,只要输入

#+BEGIN_PINNED 
测试 紫薯布丁
#+END_PINNED

或者直接输入< Pinned
就可以获得如下的效果

[gaoyuxin]

sos！
为什么我的直接变成一个页面了


第一次还好好的，之后有把几个不同类型代码加入custom.css ，删除后，在custom.css里什么类型的代码都没用了，已经捣鼓两天了

[No_wonder]

SOS
我的也变成了一个页面，第一次也直接变成了页面