瀏覽代碼

:sparkles: created youtube thumbnail grabber | inserting yt thumbs in list

tags/0.9.0
J 5 年之前
父節點
當前提交
4c26d7d565
共有 2 個文件被更改,包括 37 次插入3 次删除
  1. 9
    2
      vue-theme/src/pages/list.vue
  2. 28
    1
      vue-theme/src/utils/helpers.js

+ 9
- 2
vue-theme/src/pages/list.vue 查看文件

9
         .posts(:class="{ 'is-grid': grid }")
9
         .posts(:class="{ 'is-grid': grid }")
10
             section(v-for="post in posts" :key="post.slug").shadow.post
10
             section(v-for="post in posts" :key="post.slug").shadow.post
11
                 router-link(:to="`/${type}/${post.slug}`")
11
                 router-link(:to="`/${type}/${post.slug}`")
12
-                    p {{ post.featured }}
12
+                    p(v-if="post.featured") {{ post.featured }}
13
+                    img(v-else-if="JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="YouTube")
14
+                    p(v-else-if="post.hero") {{ post.hero }}
15
+                    p(v-else) ERROR: no thumbnail
16
+
13
                     h4 {{ post.title }} 
17
                     h4 {{ post.title }} 
14
                     p(style="font-size: 9px;") {{ post.date }}
18
                     p(style="font-size: 9px;") {{ post.date }}
15
 
19
 
29
 import sidebar from '@/components/sidebars/sidebar'
33
 import sidebar from '@/components/sidebars/sidebar'
30
 import { postTypeGetters, scrollTop } from './mixin-post-types'
34
 import { postTypeGetters, scrollTop } from './mixin-post-types'
31
 
35
 
32
-import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'
36
+import { convertTitleCase, typeFromRoute, sortTypes, ytThumbnail } from '@/utils/helpers'
33
 
37
 
34
 export default {
38
 export default {
35
     components: { sidebar },
39
     components: { sidebar },
68
         },
72
         },
69
     },
73
     },
70
     methods: {
74
     methods: {
75
+        getThumbnailFromYt(url) {
76
+            return ytThumbnail(url, 'medium')
77
+        },
71
         setHeroAndGetPosts() {
78
         setHeroAndGetPosts() {
72
             let type = convertTitleCase(this.type)
79
             let type = convertTitleCase(this.type)
73
             
80
             

+ 28
- 1
vue-theme/src/utils/helpers.js 查看文件

51
     return type
51
     return type
52
 }
52
 }
53
 
53
 
54
-export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes }
54
+const ytThumbnail = (url, desiredSize) =>{
55
+    const remove = [
56
+        '',
57
+        'https:',
58
+        'http:',
59
+        'youtu.be'
60
+    ]
61
+    const videoId = url.split('/').filter(urlSection => !remove.includes(urlSection))
62
+    
63
+    let size = '0'
64
+    switch (desiredSize) {
65
+        case 'medium':
66
+            size = 'mqdefault'
67
+            break
68
+        case 'large':
69
+            size = 'hqdefault'
70
+            break
71
+        case 'standard':
72
+            size = 'sddefault'
73
+            break
74
+        case 'max':
75
+            size = 'maxresdefault'
76
+            break
77
+    }
78
+    return `https://img.youtube.com/vi/${videoId[0]}/${size}.jpg`
79
+}
80
+
81
+export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes, ytThumbnail }

Loading…
取消
儲存