feat: add title for social icons.

.vscode/settings.json

@@ -149,7 +149,8 @@
     "yual",
     "yufan",
     "yyjn",
-    "zeabur"
+    "zeabur",
+    "zhihu"
   ],
   "[mdx]": {
     "editor.defaultFormatter": "unifiedjs.vscode-mdx"

options.ts

@@ -137,13 +137,13 @@ const options: z.input<typeof Options> = {
       link: 'https://github.com/syhily',
     },
     {
-      name: 'Twitter',
+      name: '知乎',
-      icon: 'icon-twitter',
+      icon: 'icon-zhihu-square-fill',
       type: 'link',
-      link: 'https://twitter.com/amehochan',
+      link: 'https://www.zhihu.com/people/syhily',
     },
     {
-      name: 'Wechat',
+      name: '微信',
       icon: 'icon-wechat',
       type: 'qrcode',
       title: '扫码加我微信好友',

src/assets/styles/globals.css

@@ -1399,6 +1399,7 @@ textarea.form-control {
 @media (min-width: 1200px) and (max-width: 1399.98px) {
   .list-desc .h-2x {
     -webkit-line-clamp: 1;
+    line-clamp: 1;
   }
 }
 
@@ -1638,6 +1639,7 @@ a:hover .overlay {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
   -webkit-box-orient: vertical;
 }
 
@@ -1645,6 +1647,7 @@ a:hover .overlay {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 1;
   -webkit-box-orient: vertical;
 }
 
@@ -1652,6 +1655,7 @@ a:hover .overlay {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 1;
   -webkit-box-orient: vertical;
 }
 
@@ -1659,6 +1663,7 @@ a:hover .overlay {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
+  line-clamp: 1;
   -webkit-box-orient: vertical;
 }
 
@@ -2044,12 +2049,6 @@ a:hover .overlay {
   }
 }
 
-.not-by-ai {
-  display: block;
-  margin-bottom: 10px;
-  width: 120px;
-}
-
 .site-submenu {
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2687,6 +2686,7 @@ a:hover .overlay {
   flex-wrap: wrap;
 }
 
+/* Astro Badge */
 .astro-badge:hover stop:first-child {
   stop-color: #3245ff;
 }
@@ -2694,6 +2694,20 @@ a:hover .overlay {
   stop-color: #bc52ee;
 }
 
+/* Not By AI Badge */
+.not-by-ai {
+  display: block;
+  margin-bottom: 10px;
+  width: 120px;
+  --not-by-ai-background: var(--btn-secondary);
+  --not-by-ai-line: var(--color-light);
+}
+
+.not-by-ai:hover {
+  --not-by-ai-background: var(--color-light);
+  --not-by-ai-line: var(--btn-secondary);
+}
+
 /*--------------------------------------------------------------
     widget style
 --------------------------------------------------------------*/

src/components/header/Header.astro

@@ -28,91 +28,90 @@ import options from '@/options';
       </ul>
     </div>
     <div class="site-submenu">
-      <div class="not-by-ai">
       <a href="https://notbyai.fyi" rel="nofollow" target="_blank" title="Not By AI!!!">
-          <svg viewBox="0 0 131 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="not-by-ai" viewBox=" 0 0 131 42" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M0.5 0.5H116C124.008 0.5 130.5 6.99187 130.5 15V41.5H15C6.99187 41.5 0.5 35.0081 0.5 27V0.5Z"
-              fill="#20283b"
+            fill="var(--not-by-ai-background)"
             stroke="#ACACAC"></path>
           <path
             d="M17.9605 24.1575C21.4266 26.9643 26.3836 26.9643 29.8497 24.1575L28.5095 22.5026C25.8248 24.6766 21.9854 24.6766 19.3007 22.5026L17.9605 24.1575Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
-            <path d="M19.404 20.5134V17.6365H21.5336V20.5134H19.404Z" fill="#e8e9ea"></path>
+          <path d="M19.404 20.5134V17.6365H21.5336V20.5134H19.404Z" fill="var(--not-by-ai-line)"></path>
-            <path d="M26.012 17.6365V20.5134H28.1415V17.6365H26.012Z" fill="#e8e9ea"></path>
+          <path d="M26.012 17.6365V20.5134H28.1415V17.6365H26.012Z" fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M35 21.5C35 27.8513 29.8513 33 23.5 33C17.1487 33 12 27.8513 12 21.5C12 15.1487 17.1487 10 23.5 10C29.8513 10 35 15.1487 35 21.5ZM32.8705 21.5C32.8705 26.6752 28.6752 30.8705 23.5 30.8705C18.3248 30.8705 14.1295 26.6752 14.1295 21.5C14.1295 16.3248 18.3248 12.1295 23.5 12.1295C28.6752 12.1295 32.8705 16.3248 32.8705 21.5Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M62.844 12.1721L63.0435 12.8831L63.2294 12.8197C63.5169 12.7216 63.8276 12.6155 64.1503 12.5052V15.0552C64.1503 15.1818 64.1005 15.2208 63.9709 15.2208C63.8612 15.2208 63.4922 15.2208 63.0634 15.211C63.1631 15.4156 63.2628 15.7273 63.2928 15.9123C63.901 15.9123 64.28 15.8929 64.5293 15.776C64.7686 15.6591 64.8583 15.4545 64.8583 15.0455V12.2629C65.2106 12.1421 65.5673 12.0195 65.9154 11.8994L65.8057 11.2273C65.4898 11.3348 65.1706 11.4415 64.8583 11.5441V9.63961H65.8057V8.95779H64.8583V7H64.1503V8.95779H62.9936V9.63961H64.1503V11.7732C63.6577 11.9301 63.2064 12.0683 62.844 12.1721Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M67.0322 10.7695C66.3142 10.7695 66.1347 10.5162 66.1347 9.8052V7.39935H68.7474V9.32792H66.763V9.81494C66.763 10.1169 66.8128 10.2045 67.0322 10.2045H68.2986C68.4781 10.2045 68.7474 10.1948 68.9069 10.1656C68.9134 10.2165 68.92 10.2777 68.9268 10.3422C68.941 10.4754 68.9566 10.6224 68.9767 10.7208C68.8371 10.7597 68.5779 10.7695 68.3086 10.7695H67.0322ZM66.763 7.90584H68.1391V8.82143H66.763V7.90584Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M70.0736 10.7208C69.3656 10.7208 69.1861 10.4773 69.1861 9.76623V7.39935H71.8087V9.2987H69.8144V9.77597C69.8144 10.0682 69.8642 10.1656 70.0936 10.1656H71.4198C71.5993 10.1656 71.8985 10.1461 72.058 10.1071C72.068 10.2825 72.0979 10.5357 72.1179 10.6721C71.9783 10.7208 71.709 10.7208 71.4298 10.7208H70.0736ZM69.8144 7.90584H71.2104V8.79221H69.8144V7.90584Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M67.83 14.1299C67.2715 14.6753 66.3142 15.1818 65.4567 15.5032C65.6262 15.6201 65.9054 15.8539 66.035 15.9805C66.8727 15.6104 67.8898 14.9968 68.5081 14.3831L67.83 14.1299Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M69.4554 14.4513C70.2132 14.9091 71.1905 15.5812 71.6791 16L72.2974 15.6104C71.7788 15.1818 70.7916 14.539 70.0437 14.1007L69.4554 14.4513Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M51.4761 15.9318C50.798 15.5617 49.6612 15.0942 48.5344 14.7338L49.0031 14.2468C50.1299 14.5974 51.3564 15.0552 52.0844 15.4253L51.4761 15.9318Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M43 15.4156C44.067 15.1623 45.4032 14.6656 46.0713 14.2468L46.7594 14.6753C45.9218 15.1721 44.5855 15.6786 43.5185 15.9513C43.4088 15.8052 43.1596 15.5519 43 15.4156Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M57.1556 7.21693C57.1571 7.15007 57.1585 7.0868 57.1601 7.02922H57.9877L57.9868 7.0714C57.9788 7.4194 57.968 7.88942 57.9233 8.43665C58.0639 9.58208 58.6711 13.7136 62.2258 15.2597C62.0064 15.4253 61.787 15.6786 61.6773 15.8831C59.1702 14.7391 58.0901 12.3347 57.5998 10.5147C57.13 12.4644 56.0681 14.6445 53.63 15.9221C53.5004 15.7273 53.2511 15.5032 53.0217 15.3474C57.0193 13.3717 57.1185 8.89288 57.1556 7.21693Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M76.0586 9.43506C76.1376 9.06022 76.2116 8.69288 76.2761 8.3539L75.5283 8.27597C75.3089 9.50325 74.9299 11.1688 74.6408 12.1623L75.3986 12.2305C75.4264 12.1301 75.4552 12.0226 75.4848 11.9091H79.3699C79.3296 12.3408 79.2883 12.7224 79.2455 13.0584H73.0851V13.7403H79.1462C79.0034 14.5883 78.8408 15.0239 78.6395 15.1916C78.5198 15.289 78.4002 15.2987 78.1708 15.2987C77.9215 15.2987 77.2334 15.2987 76.5454 15.2305C76.675 15.4253 76.7747 15.7175 76.7947 15.9221C77.4429 15.961 78.091 15.9708 78.4201 15.9513C78.799 15.9318 79.0284 15.8636 79.2677 15.6396C79.532 15.3814 79.7263 14.8409 79.8969 13.7403H82V13.0584H79.991C80.0434 12.6344 80.0943 12.1472 80.1452 11.5877C80.1552 11.4805 80.1751 11.2565 80.1751 11.2565H75.6483C75.7379 10.8862 75.8303 10.4846 75.92 10.0779H80.2948V9.43506H76.0586Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M66.1746 11.6266V12.25H67.5109V13.3799H65.7558V14.0032H72.1079V13.3799H70.5523V12.25H71.8785V11.6266H70.5523V10.9643H69.8642V11.6266H68.189V10.9838H67.5109V11.6266H66.1746ZM68.189 13.3799V12.25H69.8642V13.3799H68.189Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M43.1895 14.0909V13.4675H44.6254V9.06494H47.1383V8.4513H43.4687V7.81818H47.1383V7.00974H47.8762V7.81818H51.7852V8.4513H47.8762V9.06494H50.6385V13.4675H52.0445V14.0909H43.1895ZM45.3434 13.4675H49.8906V12.7857H45.3434V13.4675ZM45.3434 12.3182H49.8906V11.7338H45.3434V12.3182ZM45.3434 11.2565H49.8906V10.6818H45.3434V11.2565ZM45.3434 10.224H49.8906V9.58117H45.3434V10.224Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
-            <path d="M73.3245 9.65909V7.52597H81.7607V9.65909H80.9829V8.20779H74.0624V9.65909H73.3245Z" fill="#e8e9ea"
+          <path
-            ></path>
+            d="M73.3245 9.65909V7.52597H81.7607V9.65909H80.9829V8.20779H74.0624V9.65909H73.3245Z"
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M105.32 26.2505C105.32 25.9898 105.336 25.4196 105.336 25.4196H101.424V23.8717H105.573C105.764 26.2238 106.11 28.471 106.651 30.2984C105.776 31.2876 104.759 32.1157 103.612 32.7515C104.107 33.2077 104.953 34.2016 105.288 34.7067C106.138 34.1597 106.93 33.5082 107.658 32.7639C108.338 33.9391 109.193 34.6415 110.254 34.6415C111.898 34.6415 112.649 33.9572 113 30.78C112.377 30.5356 111.563 29.9817 111.036 29.4277C110.956 31.4155 110.765 32.2301 110.445 32.2301C110.06 32.2301 109.67 31.686 109.312 30.7655C110.465 29.1244 111.389 27.1985 112.058 25.0611L109.711 24.4908C109.396 25.6095 108.983 26.659 108.478 27.6243C108.264 26.4884 108.09 25.2105 107.974 23.8717H112.84V21.5418H111.142L111.946 20.6945C111.387 20.1568 110.27 19.4399 109.455 19L108.05 20.4175C108.553 20.7329 109.148 21.1437 109.647 21.5418H107.835C107.811 20.7923 107.808 20.0385 107.827 19.2933H105.384C105.387 20.0364 105.403 20.7892 105.433 21.5418H98.9812V26.4297C98.9812 28.5642 98.9014 31.4481 97.7199 33.3707C98.2468 33.6477 99.3006 34.5275 99.6997 35C100.514 33.7498 100.957 32.0088 101.189 30.2753C101.506 30.8638 101.745 31.7506 101.775 32.4257C102.51 32.4257 103.18 32.4094 103.612 32.3279C104.091 32.2301 104.458 32.0672 104.809 31.5947C105.192 31.0733 105.272 29.5743 105.32 26.2505ZM101.197 30.2141C101.316 29.3052 101.378 28.4 101.406 27.5703H103.058C103.023 29.1922 102.963 29.8644 102.829 30.0631C102.701 30.2261 102.558 30.2749 102.35 30.2749C102.102 30.2749 101.674 30.2596 101.197 30.2141Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M86.8673 22.112C87.1314 21.4187 87.3672 20.705 87.565 19.9939L85.1541 19.4399C84.6112 21.6395 83.5893 23.8717 82.3599 25.2077C82.9507 25.5336 83.9885 26.2342 84.4515 26.6415C84.9297 26.0332 85.4007 25.2744 85.839 24.4257H88.9062V26.9185H84.7709V29.1996H88.9062V32.002H82.8708V34.3157H97.4005V32.002H91.3332V29.1996H95.9156V26.9185H91.3332V24.4257H96.5543V22.112H91.3332V19.277H88.9062V22.112H86.8673Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M47.3436 28.4645C47.4377 28.0285 47.4856 27.6141 47.4988 27.2444H43.8462V25.11H47.5026V23.4807H43.6866V21.2811H47.5026V19.3585H49.8018V27C49.8018 29.8513 48.9396 33.0611 45.0278 34.9837C44.6446 34.4134 43.9261 33.6802 43.3672 33.224C44.7784 32.6761 45.7414 31.786 46.3804 30.8057C45.6568 30.9237 44.9507 31.0375 44.2921 31.1436L43.4151 31.2851L43 28.9226C44.1273 28.8236 45.7056 28.6496 47.3436 28.4645Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M72.6755 34.3305L67.632 19.7976H64.2697L59.1875 34.3305H62.2986L63.2841 31.3431H68.5306L69.4484 34.3305H72.6755ZM65.9218 23.1202L67.6996 28.8388H64.0861L65.9218 23.1202Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M53.7456 19.3585V21.2811H57.9289V23.4807H53.7456V25.11H57.5457V27.2444H53.7456V28.9063H58.2163V31.1059H53.7456V34.7556H51.4144V19.3585H53.7456Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
           <path
             d="M75.2125 22.2696V31.8618H73.4582V34.3339H79.719V31.8618H78.169V22.2696H79.719V19.7976H73.4582V22.2696H75.2125Z"
-              fill="#e8e9ea"></path>
+            fill="var(--not-by-ai-line)"></path>
         </svg>
       </a>
-      </div>
       {
         options.socials.map((social) => {
           if (social.type === 'qrcode') {

src/components/image/QRDialog.astro

@@ -24,6 +24,7 @@ const svg = new QRCode({
   class={className
     ? `nice-dialog ${className}`
     : 'nice-dialog btn btn-dark btn-icon btn-circle single-popup button-social'}
+  title={name}
 >
   <span>
     <i class={`iconfont ${icon}`}></i>

src/components/like/LikeShare.astro

@@ -30,6 +30,7 @@ const weibo = querystring.stringify({
   <a
     href={`https://connect.qq.com/widget/shareqq/index.html?${qq}`}
     class="btn btn-light btn-icon btn-md btn-circle mx-1 qq"
+    title="分享到 QQ 空间"
   >
     <span>
       <i class="iconfont icon-QQ"></i>
@@ -45,6 +46,7 @@ const weibo = querystring.stringify({
   <a
     href={`https://service.weibo.com/share/share.php?${weibo}`}
     class="btn btn-light btn-icon btn-circle btn-md mx-1 weibo"
+    title="分享到微博"
   >
     <span>
       <i class="iconfont icon-weibo"></i>

src/components/search/SearchIcon.astro

@@ -1,4 +1,4 @@
-<div class="global-search btn btn-dark btn-icon btn-circle site-search-toggler button-social">
+<div class="global-search btn btn-dark btn-icon btn-circle site-search-toggler button-social" title="搜索">
   <span>
     <i class="iconfont icon-search"></i>
   </span>