diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 61fa80f..a8748ab 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -1 +1,107 @@
-/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */
\ No newline at end of file
+/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */
+
+    /*neodb*/
+    
+    .db-card {
+        margin: 2rem 3rem;
+        background: #33669930;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
+    }
+    
+    .db-card-subject {
+        display: flex;
+        align-items: flex-start;
+        line-height: 1.6;
+        padding: 12px;
+        position: relative
+    }   
+    .dark-mode .db-card {
+        background: #252627
+    }
+    
+    .db-card-content {
+        flex: 1 1 auto
+    }
+    
+    .db-card-post {
+        width: 96px;
+        margin-right: 15px;
+        display: flex;
+        flex: 0 0 auto
+    }
+    
+    .db-card-title {
+        margin-bottom: 5px;
+        font-size: 18px
+    }
+    
+    .db-card-title a {
+        text-decoration: none!important
+    }
+    
+    .db-card-abstract,
+    .db-card-comment {
+        font-size: 14px;
+        overflow: hidden;
+        max-height: 3rem
+    }
+    
+    .db-card-cate {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: #f99b0170;
+        padding: 1px 8px;
+        font-size: small;
+        font-style: italic;
+        border-radius: 0 8px 0 8px;
+        text-transform: capitalize
+    }
+    
+    .db-card-post img {
+        width: 96px!important;
+        height: 96px!important;
+        border-radius: 4px;
+        -o-object-fit: cover;
+        object-fit: cover
+    }
+    
+    .rating {
+        margin: 0 0 5px;
+        font-size: 13px;
+        line-height: 1;
+        display: flex;
+        align-items: center
+    }
+    
+    .rating .allstardark {
+        position: relative;
+        color: #f99b01;
+        height: 16px;
+        width: 80px;
+        background-size: auto 100%;
+        margin-right: 8px;
+        background-repeat: repeat;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==)
+    }
+    
+    .rating .allstarlight {
+        position: absolute;
+        left: 0;
+        color: #f99b01;
+        height: 16px;
+        overflow: hidden;
+        background-size: auto 100%;
+        background-repeat: repeat;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+)
+    }
+    
+    @media(max-width: 550px) {
+        .db-card {
+            margin: .8rem 1rem
+        }
+        .db-card-comment {
+            display: none
+        }
+    }
\ No newline at end of file
diff --git a/layouts/shortcodes/neodb.html b/layouts/shortcodes/neodb.html
new file mode 100644
index 0000000..9765168
--- /dev/null
+++ b/layouts/shortcodes/neodb.html
@@ -0,0 +1,29 @@
+{{ $dbUrl := .Get 0 }}
+{{ $dbApiUrl := "https://neodb.social/api/" }}
+{{ $dbType := "" }}
+
+{{ if ( findRE `^.*neodb\.social\/.*` $dbUrl ) }}
+    {{ $dbType = replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
+{{ else }}
+    {{ $dbType = $dbUrl }}
+    {{ $dbApiUrl = "https://neodb.social/api/catalog/fetch?url=" }}
+{{ end }}
+
+{{ $dbFetch := getJSON $dbApiUrl $dbType }}
+
+{{ if $dbFetch }}
+    {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
+    <div class="db-card">
+        <div class="db-card-subject">
+            <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
+            <div class="db-card-content">
+                <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
+                <div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
+                <div class="db-card-abstract">{{ $dbFetch.brief }}</div>
+            </div>
+            <div class="db-card-cate">{{ $dbFetch.category }}</div>
+        </div>
+    </div>
+{{else}}
+    <p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
+{{end}}
\ No newline at end of file