-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
2035 lines (940 loc) · 97.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Microsoft YaHei:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<link rel="alternate" href="/atom.xml" title="Haclk's Top" type="application/atom+xml" />
<meta property="og:type" content="website">
<meta property="og:title" content="Haclk's Top">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Haclk's Top">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Haclk's Top">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title>Haclk's Top</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Haclk's Top</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-schedule">
<a href="/schedule/" rel="section">
<i class="menu-item-icon fa fa-fw fa-calendar"></i> <br />
日程表
</a>
</li>
<li class="menu-item menu-item-commonweal">
<a href="/404/" rel="section">
<i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
公益404
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/09/02/即刻产品分析报告/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="芝士混子">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Haclk's Top">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/09/02/即刻产品分析报告/" itemprop="url">即刻产品分析报告</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-09-02T07:40:04+08:00">
2018-09-02
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/产品/" itemprop="url" rel="index">
<span itemprop="name">产品</span>
</a>
</span>
</span>
<span id="/2018/09/02/即刻产品分析报告/" class="leancloud_visitors" data-flag-title="即刻产品分析报告">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">阅读次数:</span>
<span class="leancloud-visitors-count"></span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="1-产品背景"><a href="#1-产品背景" class="headerlink" title="1. 产品背景"></a>1. 产品背景</h2><p>按照即刻，在App Store中的描述：“「即刻」是一个年轻人的兴趣社区，每时每刻都有好玩、有料的动态。从今日热议到只有你关心的冷门兴趣，「即刻」什么都有。如果你受够了标题党和垃圾推送，就想看和自己兴趣相投的人分享有趣好玩的内容，「即刻」就是为你量身定做的。”</p>
<h3 id="1-1-产品概况"><a href="#1-1-产品概况" class="headerlink" title="1.1 产品概况"></a>1.1 产品概况</h3><p>即刻最早的定位是通过打破各个平台内容限制，以主题订阅的新闻资讯类app。而现在得益于其优质、活跃的用户，也在做社区内容的转型。 </p>
<ul>
<li>新闻资讯<br>在已经被今日头条算法推介下信息暴力冲刷的一统江湖之中，即刻成为了内容分发平台中一块仍然坚守「审美」与「趣味」的“法外飞地”。<br>在4月之前，iOS系统新闻类APP中，即刻排名第4。 </li>
<li>兴趣社区<br>随着4月即刻4.0版本的发布，即刻基本完成了由新闻资讯类App到社交平台的转型。在iOS端的App Store中，分类改为社交类，在其中排名最高达到第6名，过程中波动不大，始终在前20名之中，当前排名第18。<h3 id="1-2-体验环境"><a href="#1-2-体验环境" class="headerlink" title="1.2 体验环境"></a>1.2 体验环境</h3></li>
<li>日期：2018-08-28</li>
<li>版本：4.11.1</li>
<li>平台：iOS 11 - iPhone 8 PLUS<h3 id="1-3-「即刻」发展"><a href="#1-3-「即刻」发展" class="headerlink" title="1.3 「即刻」发展"></a>1.3 「即刻」发展</h3>即刻自2015年成立以来，变受到了许多人的关注，其「鲜活」的特性、直击当下人们的痛点，使得其能快速成长。以下便是其成立三年多来经历的主要事件：<br><img src="/Users/admin/OneDrive - std.uestc.edu.cn/产品/即刻分析报告/时间流.png" alt="时间流"></li>
</ul>
<h2 id="2-用户分析"><a href="#2-用户分析" class="headerlink" title="2. 用户分析"></a>2. 用户分析</h2><p>根据酷传网显示的数据，是即刻在Android几大国内应用商店的下载量汇总统计。恰好可以发现一个，在2017年9月的拐点。在这之前，下载量温和增长，在这之后，下载量增速迅速增加。<br><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuz5t4e52j31kw0ixadc.jpg" alt="即刻Android下载量统计"><br>回顾发现，2017年9月恰好是即刻支持「个人用户发布动态」的时间节点。便可明白，即刻此次产品定位的转型，在用户下沉上取得的成功。<br>按照兴趣主题构建的阅读、社交平台，也构建起了即刻「鲜活」的产品气质。使其成为了内容分发、社交平台中一块仍然坚守审美与趣味的法外飞地。</p>
<h3 id="2-1-用户人群分析"><a href="#2-1-用户人群分析" class="headerlink" title="2.1 用户人群分析"></a>2.1 用户人群分析</h3><p>根据下图中千帆网站的统计，「即刻」的用户主要集中在24岁以下人群，并且女性用户稍多，可推测出大多数用户为在校学生。也是即刻打造出的活力社区的源泉。<br><img src="https://ws1.sinaimg.cn/large/006tNbRwly1fuuz9f5i7cj30t709aab8.jpg" alt="用户人群分析"></p>
<h3 id="2-2-户使用习惯"><a href="#2-2-户使用习惯" class="headerlink" title="2.2 户使用习惯"></a>2.2 户使用习惯</h3><p>同样来源于千帆网的用户使用时间段的统计，用户集中的使用时间段为夜晚，在18点以后产品的使用时长逐渐上升，可推测是用户在休息时对时间的休闲消费。<br>白天时间用户多处在上课或上班的过程中，可以看到11点到13点时间段中使用时长有小幅度提高，推测是用户在午休时间段进入产品进行消费。<br><img src="https://ws3.sinaimg.cn/large/006tNbRwly1fuuz9u5rwoj30r50a1jsz.jpg" alt="户使用时段"></p>
<h3 id="2-3-用户痛点及需求"><a href="#2-3-用户痛点及需求" class="headerlink" title="2.3 用户痛点及需求"></a>2.3 用户痛点及需求</h3><p>当前互联网产品的目的不再是为了解决用户的某一痛点，而变成了吸引、占据用户更多的时间和注意力。如今日头条、微信、微博、淘宝已经占据了大多数互联网用户的碎片时间，甚至分散用户工作、学习时的注意力。<br>用户面对海量的信息，被难以自拔的拉到娱乐、广告信息中，辗转于不同的软件平台。不仅增加了人们信息获取的焦虑，而且剥离了统一的阅读、交互体验。<br>因此我们可以总结，即刻目标解决用户的痛点为：</p>
<ol>
<li>过载的信息量；</li>
<li>信息中掺杂过多广告、不关心的娱乐信息；</li>
<li>获取信息的平台分散化。<br>近些年，RSS（Really Simple Syndication）阅读有抬头迹象，也侧面反映出人们不堪各个消息源的海量消息轰炸，广告、“人工智障”的个性化推送，用户转而选择更原始的方式，坚守在自己关注的少数信息源的一亩三分地。<br>而「即刻」用更优雅的方式解决了用户需求。为用户带来了：</li>
<li>优质、及时、高效、用户感兴趣的内容推送——主题订阅；</li>
<li>高质量的用户观点——评论、动态；</li>
<li>可以发表自己观点、可提供高曝光量的机会——主题广场。<h2 id="3-产品分析"><a href="#3-产品分析" class="headerlink" title="3. 产品分析"></a>3. 产品分析</h2>如下图，可以看到「即刻」的主要功能如下：<br><img src="https://ws3.sinaimg.cn/large/006tNbRwly1fuuzagdvdjj30sw0vqn5d.jpg" alt="即刻功能结构图"><br>以下对其核心功能进行详细分析。</li>
</ol>
<h3 id="3-1-关键页面分析"><a href="#3-1-关键页面分析" class="headerlink" title="3.1 关键页面分析"></a>3.1 关键页面分析</h3><h4 id="3-1-1-主题页"><a href="#3-1-1-主题页" class="headerlink" title="3.1.1 主题页"></a>3.1.1 主题页</h4><p>主题页可以通过消息页点击进入，也可以通过搜索、发现、推荐等入口进入。如下图，对主题的「介绍」、「用户」、「消息」几个维度进行了合理的展示。在第一条历史消息后还会有「相关主题」的推荐。并且通过「最近活跃」的入口，帮助用户查找主题中的活跃贡献者、最近新关注用户。<br><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuzbo3sl6j31kw0goql3.jpg" alt="主题页"><br>用户点开一个主题，可能是两种可能。</p>
<ol>
<li>未关注，来了解一下主题会推送什么消息；</li>
<li>已关注，针对单一主题进行针对性阅读。<br>对于第一类情景，即刻已经做的很好。但是对于第二类情况，并不智能。<h5 id="【改进建议】减小题头面积"><a href="#【改进建议】减小题头面积" class="headerlink" title="【改进建议】减小题头面积"></a>【改进建议】减小题头面积</h5>我们发现在点击进入的时候，主题图片、主题名、主题描述、关注情况、以及关注&通知开关，已经不再是已关注用户关心的点了。如果能在已关注用户点开通知的时候加入滑过题头的过渡动画，则会更优雅。如上图4所示。<h4 id="3-1-2-消息详情页"><a href="#3-1-2-消息详情页" class="headerlink" title="3.1.2 消息详情页"></a>3.1.2 消息详情页</h4>消息详情页则可以通过App内大部分页面跳转，主要分为文字、网页链接、视频不同类型。用户动态和主题消息基本一致，此处一起分析。<br><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuzdrvhg1j318k0k478n.jpg" alt="消息详情"></li>
</ol>
<h5 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h5><p>「即刻」从最早提供主题消息的评论，再逐渐开放评论中的图片评论，热评展示、查看评论中对话的功能，是我目前体验最好的评论设计。用户不仅可以评论，还可以评论转发，设置同步到自己的动态。<br>下图展示了从消息分层展示、展示前后对话的功能。让用户能快速理清某条评论中的上下文。</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNbRwly1fuuzd2l6poj318k0jw156.jpg" alt="评论"></p>
<p>另外，在其他平台评论区经常出现的掐架现象，即刻选择了十分巧妙的方法解决：当你评论「智障」、「傻逼」之类的攻击性词汇时，会被自动替换成「大笨蛋」；当你评论「尼玛逼」等各类“三字经”时，则会被替换成「喵喵喵」。<br>这不仅让评论中更加和谐，当用户看到这种卖萌的表达的时候，谁还吵的起来呢。这也为即刻构建高质量社区做出了贡献，也体现了其年轻、鲜活的特点。</p>
<h5 id="【改进建议】评论区滑动查看图片"><a href="#【改进建议】评论区滑动查看图片" class="headerlink" title="【改进建议】评论区滑动查看图片"></a>【改进建议】评论区滑动查看图片</h5><p>评论区中的图片评论非常吸引用户，但是阅读者只能一张张图片点击查看。如果能够不区分评论者，而<strong>滑动查看所有评论图片</strong>，并且可以通过图片定位回所在的评论。会减少用户查看查看趣味评论时的割裂感，极大增强这部分用户的粘性。</p>
<h5 id="图片及分享"><a href="#图片及分享" class="headerlink" title="图片及分享"></a>图片及分享</h5><p>分享功能中规中矩，国内的朋友圈、微信、QQ、微博等平台都支持。其中可以制作卡片，包含了消息信息，还包含了即刻的二维码推广。<br>也可以直接识别图片中的二维码，增强了使用的便利性。<br>即刻在开放了图片评论后，恰好赶上了当下流行的表情包文化。在评论区搞笑表情、动图随处可见。而即刻甚至可以将图片直接作为微信的表情发送给好友，不仅方便了用户，也使得即刻可以在顺着微信的关系网进行传播。<br><img src="https://ws3.sinaimg.cn/large/006tNbRwly1fuuzeiie2nj318g0jsamx.jpg" alt="分享"></p>
<h5 id="视频播放"><a href="#视频播放" class="headerlink" title="视频播放"></a>视频播放</h5><p>视频播放的页面中，通过横竖屏实现视频的旋转，对于部分视频则可实现全屏播放的效果。<br>视频播放时下滑，视频变为悬浮窗播放，方便用户边看视频边浏览其他信息。<br>而在视频播放页则实现了上下分屏的效果，边看视频，边浏览评论。<br><img src="https://ws1.sinaimg.cn/large/006tNbRwly1fuuzl68hkoj318k0jwthn.jpg" alt="视频"></p>
<h3 id="3-2-首页"><a href="#3-2-首页" class="headerlink" title="3.2 首页"></a>3.2 首页</h3><h4 id="3-2-1-关注页"><a href="#3-2-1-关注页" class="headerlink" title="3.2.1 关注页"></a>3.2.1 关注页</h4><p><img src="https://ws4.sinaimg.cn/large/006tNbRwly1fuuzf8c2mhj318k0jwgqy.jpg" alt="关注页"><br>当用户启动软件的时候，就会进入首页的关注页，在顶部有搜索框、「关注」、「推荐页」和「附近」几个模块。搜索框在发现页再做介绍，以下介绍其他三个模块。<br>关注页中的内容，是基于用户关注主题的信息推送，是用户<strong>主动关心</strong>的内容。按照时间线排列。<br>可以点击进入消息链接的网页、评论区、主题页。也可以点赞、收藏等操作。</p>
<h4 id="3-2-2-推荐页"><a href="#3-2-2-推荐页" class="headerlink" title="3.2.2 推荐页"></a>3.2.2 推荐页</h4><p><img src="https://ws4.sinaimg.cn/large/006tNbRwly1fuuzfftseyj318k0jwdqu.jpg" alt="推荐页"><br>对应「关注页」，是通过机器学习算法来推荐用户可能会感兴趣的消息内容。<br>用户可以选择屏蔽不感兴趣的推荐，即刻会通过分析用户标记的原因来提高推荐的精准度。以求更准确的推送给用户感兴趣的内容，这一点类似今日头条的推荐逻辑。<br>这是在用户订阅消息量不足，或者用户希望闲逛休闲的时候的一个很好的补充。</p>
<h5 id="【改进建议】推荐页内容类型休闲化"><a href="#【改进建议】推荐页内容类型休闲化" class="headerlink" title="【改进建议】推荐页内容类型休闲化"></a>【改进建议】推荐页内容类型休闲化</h5><p>在推荐页中，是用户在阅读自己关注主题消息后的一种补充行为。可能更希望看到的是娱乐化的内容，所以可以提高幽默图片视频等休闲类信息的比重。</p>
<h4 id="3-2-3-附近"><a href="#3-2-3-附近" class="headerlink" title="3.2.3 附近"></a>3.2.3 附近</h4><p><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuzg5gz1uj318k0jwn1d.jpg" alt="附近页"><br>附近则有天气提醒和附近即友发布的动态两部分。前者符合即刻一开始的定位。后者对于即刻刚开始的社交属性来说，发现身边趣事、以及同兴趣好友，也可以增强即友的身份认同感，有助于增强用户粘性。</p>
<h5 id="【改进建议】结合地理位置定制推荐内容"><a href="#【改进建议】结合地理位置定制推荐内容" class="headerlink" title="【改进建议】结合地理位置定制推荐内容"></a>【改进建议】结合地理位置定制推荐内容</h5><p>可以通过获取用户的地理位置的数据，为用户推送更个性化的推荐内容做服务。</p>
<h3 id="3-3-动态"><a href="#3-3-动态" class="headerlink" title="3.3 动态"></a>3.3 动态</h3><h4 id="3-3-1-动态页"><a href="#3-3-1-动态页" class="headerlink" title="3.3.1 动态页"></a>3.3.1 动态页</h4><p><img src="https://ws4.sinaimg.cn/large/006tNbRwly1fuuzgd3km5j318k0kg7em.jpg" alt="动态"><br>底部第二个入口便是「动态」页，将其和关注放在同等地位，也显示了即刻社区化的一个有力推动和决心。用户可以查看关注即友的动态，也提供添加好友、查看私信聊天、发布动态等入口。<br>当用户关注的即友不多，动态消息过少的时候，即刻也会推荐热门动态填充时间线。如上图所示。<br>从最初用户智能阅读关注已有的主题消息，到后来用户可以发表动态，到「主题广场」功能把用户动态和主题结合到一起，让用户可以在不同的主题广场中发布不同的内容，精确的参与到内容生产之中。类似于微博和豆瓣的动态一样，可以添加话题。</p>
<h5 id="【改进建议】去除「发布动态」框"><a href="#【改进建议】去除「发布动态」框" class="headerlink" title="【改进建议】去除「发布动态」框"></a>【改进建议】去除「发布动态」框</h5><p>在该页面中可以发现，底部「发布动态」的按钮并没有消失，那么顶部「发布动态」的输入栏则略显重复。不如将「动态」页下的底部按钮变成动态效果吸引用户注意力，以发布自己的动态，而不是在一个页面设计两个重复的按钮。</p>
<h4 id="3-3-2-发布新动态"><a href="#3-3-2-发布新动态" class="headerlink" title="3.3.2 发布新动态"></a>3.3.2 发布新动态</h4><p>「即刻」也把「发布新动态」的功能放到了底部Tab按钮的最中央，也是最希望用户点击的位置。用户可以发布文字、地理位置、相关主题、图片（最多3张）、相关链接、问题。其中相关主题，有官方推荐、也可以进行搜索选择。<br>这也看出了「即刻」的野心。用户生产的内容类型超过了微博，还包含了问题这种类似于知乎的形式。可以推测，「即刻」也是希望通过优质的用户，产生更优质的社区内容。</p>
<h5 id="【改进建议】智能推荐动态可能关联的主题"><a href="#【改进建议】智能推荐动态可能关联的主题" class="headerlink" title="【改进建议】智能推荐动态可能关联的主题"></a>【改进建议】智能推荐动态可能关联的主题</h5><p>在主题选择的过程中，展示的主题是始终不变的。可以增加「已关注主题」、「历史动态主题」等列表；也可以使「推荐」主题列表，能够结合用户编辑的文字、地理位置、是否发布图片、添加的网站链接等信息进<strong>针对性化推荐</strong>。<br>如何将发布的动态让更多人看到呢？如下图所示，有几个展示页面：「附近」、「主题广场」、粉丝的动态页、自己的动态记录。<br><img src="https://ws4.sinaimg.cn/large/006tNbRwly1fuuzh3xdegj30w20ecabd.jpg" alt="用户动态去向"><br>用户除了可以阅读订阅的主题内容，还可以将自己发布的动态关联到部分相关主题，像是给自己的动态添加了一个标签。其他用户可以在对应主题的「主题广场」中看到；优质的动态，也有机会被编辑精选到「主题精选」中，会被更多人看到。并且在「主题」页中的「最近活跃」展示，增强用户的荣誉感，参与感。<br>用户动态如果有位置信息，则可以展示在「首页」的「附近」中，提高了用户在即友中的曝光度。</p>
<h3 id="3-4-发现"><a href="#3-4-发现" class="headerlink" title="3.4 发现"></a>3.4 发现</h3><h4 id="3-4-1-发现页"><a href="#3-4-1-发现页" class="headerlink" title="3.4.1 发现页"></a>3.4.1 发现页</h4><p><img src="https://ws1.sinaimg.cn/large/006tNbRwly1fuuzhhhzq2j30m809wn4k.jpg" alt="发现页"><br>发现页主要有两个类型的内容：</p>
<ol>
<li>分类的专题推荐；</li>
<li>「游乐园」为代表的即刻推出的活动。<br>发现页主要针对两类用户：用户已经阅读完自己关注的消息，想要发掘更多主题；用户希望参加即刻推出的游戏活动。<h4 id="3-4-2-分类主题推荐"><a href="#3-4-2-分类主题推荐" class="headerlink" title="3.4.2 分类主题推荐"></a>3.4.2 分类主题推荐</h4>分类主题推荐也分了两种形式，第一种是Banner中的热门话题推荐，其中包含多个主题。第二种是常规的直接分类。<br>此处的主题推荐和首页中的「推荐」有所不同。前者是通过分类的方式向用户推荐，引向用户关注主题；而后者是通过具体的消息内容吸引用户，引向用户的阅读和关注主题。<h4 id="3-4-3-游乐园活动"><a href="#3-4-3-游乐园活动" class="headerlink" title="3.4.3 游乐园活动"></a>3.4.3 游乐园活动</h4>目前在线的活动有「假装情侣」180秒匿名聊天、「三人匿名群聊」等活动。通过趣味性连接即友，吸引用户互相聊天、互相关注。进而引导用户发布动态、阅读即友动态。也是丰富其社区化的一种方式。<br><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuzm2hiqpj312a0jwk9m.jpg" alt="游乐园"></li>
</ol>
<h4 id="3-4-4-搜索"><a href="#3-4-4-搜索" class="headerlink" title="3.4.4 搜索"></a>3.4.4 搜索</h4><p><img src="https://ws3.sinaimg.cn/large/006tNbRwly1fuuzhu9nf6j318s0js170.jpg" alt="搜索"><br>搜索状态栏也是遍布App的首页、发现页等页面，都是以搜索框的形式显示。在搜索框中灰字标示了热点搜索之一，而点击搜索框后展示了「热点」、「更多热门消息」、「搜索历史」几个模块。</p>
<ul>
<li>「搜索历史」支持清楚记录，记录总数与搜索文字长度有关，最多排满2行，再增加则清除过旧的历史记录。</li>
<li>「热点」中的热词可以直接点击搜索，进入搜索结果页。点击「更多热门消息」则进入图2中的热门消息推荐，内容于「推荐」页不同，不知是从什么维度进行的推荐。</li>
<li>如果未找到想要的内容，也有提示直接链接到反馈中心，进行反馈。</li>
<li>在搜索输入的过程当中，会实时动态显示当前输入文字的搜索结果。</li>
<li>搜索结果可以直接引导用户一步关注主题、阅读消息、查看用户。<h5 id="【改进建议1】"><a href="#【改进建议1】" class="headerlink" title="【改进建议1】"></a>【改进建议1】</h5>将「更多热门消息」链接到「首页」中的「推荐」页，减少页面复杂度。<h5 id="【改进建议2】调整Tab选项顺序"><a href="#【改进建议2】调整Tab选项顺序" class="headerlink" title="【改进建议2】调整Tab选项顺序"></a>【改进建议2】调整Tab选项顺序</h5>搜索结果是按照「专题精选」「主题」「用户」「消息」「动态」的方式排列的，与搜索框下的Tab选项「综合」「主题」「消息」「用户」的顺序出现了不一致。建议将Tab选项中「消息」和「用户」的顺序颠倒。<h3 id="3-5-收藏"><a href="#3-5-收藏" class="headerlink" title="3.5 收藏"></a>3.5 收藏</h3>用户阅读内容时，发现自己感兴趣的内容，但可能暂时不方便详细阅读，希望「收藏」之后再阅读。目前需要在关注页中的二级菜单或消息详情页中添加。而查看收藏则在「我的」页面中的「我的收藏」入口。<br><img src="https://ws1.sinaimg.cn/large/006tNbRwly1fuuzmaqg2aj318k0jwgor.jpg" alt="收藏"></li>
</ul>
<h5 id="【改进建议】提高收藏按钮级别"><a href="#【改进建议】提高收藏按钮级别" class="headerlink" title="【改进建议】提高收藏按钮级别"></a>【改进建议】提高收藏按钮级别</h5><p>目前添加收藏的两种方法都需要两步操作完成，并不利于用户在列表页中快速选择。<strong>建议将收藏按钮直接添加在「点赞」「评论」「分享到动态」按钮同级别的位置。</strong></p>
<h5 id="【改建建议】增加我的点赞记录的入口"><a href="#【改建建议】增加我的点赞记录的入口" class="headerlink" title="【改建建议】增加我的点赞记录的入口"></a>【改建建议】增加我的点赞记录的入口</h5><p>点赞是用户之间的互动过程。用户查看点赞记录也可以回顾跟其他即友的互动，方便用户关注更多即友。</p>
<h2 id="4-关键操作分析"><a href="#4-关键操作分析" class="headerlink" title="4. 关键操作分析"></a>4. 关键操作分析</h2><h3 id="4-1-自建主题"><a href="#4-1-自建主题" class="headerlink" title="4.1 自建主题"></a>4.1 自建主题</h3><p>「即刻」在2016年底的3.0版本更新中，就支持用户自建主题，提供给用户机器人爬虫，爬取微博、知乎、豆瓣、微信公众号、闲鱼等多个平台的内容，提供内容条件筛选工具，如公众号可以设置关键词筛选，闲鱼可以设置价格区间等。提交后，经过审核便可发布。用户也可以选择是否将该主题开放给其他人使用。</p>
<h5 id="【改进建议】"><a href="#【改进建议】" class="headerlink" title="【改进建议】"></a>【改进建议】</h5><ul>
<li>丰富机器人种类，抓取更多信息源的内容；</li>
<li>丰富机器人条件筛选工具，增加人工修改的入口；</li>
<li>查看其他用户的公开机器人设置使用；</li>
<li>增加机器人删除的功能。<h3 id="4-2-用户主动搜索内容"><a href="#4-2-用户主动搜索内容" class="headerlink" title="4.2 用户主动搜索内容"></a>4.2 用户主动搜索内容</h3><img src="https://ws1.sinaimg.cn/large/006tNbRwly1fuuzim6n94j31kw0pcmzz.jpg" alt="流程图1"><br>在用户使用的初期，可能并没有订阅很多主题，或者突然想关注某个主题，会通过搜索的形式，获取相关信息。如上图所示。</li>
</ul>
<h3 id="4-3-查看已关注的消息"><a href="#4-3-查看已关注的消息" class="headerlink" title="4.3 查看已关注的消息"></a>4.3 查看已关注的消息</h3><p>经过优质消息内容的消息体验，留存用户开始有了自己关注的感兴趣的主题。就可以专注于查看自己关注的主题消息以及关注的即友的动态消息了。其中<strong>保持用户粘性</strong>的也分为两个方面：聚合不同平台、主题明确的消息，以及高质量的用户动态。<br>其中即刻的特色主题消息，即其他平台鲜有的<strong>特色主题</strong>，包括了「今日微博在议论什么」、「即刻热门评论精选」、「王思聪又和人掐架了」、「豆瓣最新高口碑非院线电影推荐」等，针对性很强，很吸引眼球。<br><img src="https://ws2.sinaimg.cn/large/006tNbRwly1fuuzjawrv3j31kw0pcwjs.jpg" alt="即刻vsRSS"><br>可以与RSS阅读来做类比，主要包含几个操作：搜索网站RSS网址，添加订阅网站，阅读网站的每一条更新推送的标题、详情，标记已读、星标，稍后重新阅读。<br>RSS有几个不足：</p>
<ul>
<li>需要主动找自己感兴趣的网站，操作步骤繁琐，不易于发现新网站；</li>
<li>订阅是按照网站的所有信息为单位，而不能对其中具体内容进行定制；</li>
<li>不同网站可能会有重复信息，仍会重复推送。<br>这些都是即刻通过「主题」这个维度将信息拆解而能克服的问题。<h5 id="【改进建议】已读归档"><a href="#【改进建议】已读归档" class="headerlink" title="【改进建议】已读归档"></a>【改进建议】已读归档</h5>作为一个最基本的内容阅读工具，在使用期间即刻一直困扰我的一点是，我无法在我的关注时间流中明确知道我到底读了哪些消息，哪些没有读。读过最新的几条消息后，按照时间顺序的排列，已读的几条消息，就将更早的没有读的消息和刷新出的最新消息隔离开了。<br>希望能加入类似于轻芒阅读一样的功能：<strong>自动把屏幕浏览过的内容归档为已读，隐藏在「关注」的时间流里</strong>。这样「关注」消息中始终是我没有看过的消息。<br>而如果感觉有价值的内容，则可以通过收藏的方式添加收藏；如果想找已经归档的内容，也在「我的收藏」入口下方添加「已读消息」的入口。<h5 id="【改进建议】自定义主题推送时间及汇总提醒"><a href="#【改进建议】自定义主题推送时间及汇总提醒" class="headerlink" title="【改进建议】自定义主题推送时间及汇总提醒"></a>【改进建议】自定义主题推送时间及汇总提醒</h5>即刻中，用户可以根据自己的需要自定义每个主题是否接收系统通知提醒。如果开启的主题通知过多，则会每天收到海量的消息提醒。再一次增加了用户的烦恼。<br>所以建议加入主题的汇总提醒，用户可以<strong>定义时间段</strong>，即刻发送通知如「xxx主题有x条消息更新」的通知，不再是每条消息、而是<strong>按主题为单位通知</strong>。<h3 id="4-4-社区社交"><a href="#4-4-社区社交" class="headerlink" title="4.4 社区社交"></a>4.4 社区社交</h3>「即刻」在不断的版本迭代中，逐渐有了评论、用户动态、主题广场等功能，结合其一步步积累的优质用户，和优质的用户自产内容，使其带有了很强的社交属性。<br>而用户在进入App后，可以自由浏览App的功能。主要功能可以大致分为主题消息阅读、评论、评论阅读、广场活动、即友私聊等。<h2 id="5-发展展望"><a href="#5-发展展望" class="headerlink" title="5. 发展展望"></a>5. 发展展望</h2>即刻现在更是成加入了<strong>网页版</strong>，为它的功能提供了更大的可能性。我也推测和建议其可以进行的商业化尝试：</li>
</ul>
<ol>
<li>付费机器人订阅，更强的机器人功能，为用户提供更精确、高效的获取信息的方式。</li>
<li>付费订阅高质量主题。可以让专人编辑筛选主题内容，用户付费阅读。</li>
<li>精选优质的广告内容，以主题订阅的形式提供订阅；并且结合用户数据个性化推荐。使得用户不厌烦广告，还能有很高的转换率。</li>
<li>开发视频直播功能，更好的连接用户，为用户提供更多的交流方式。<h2 id="5-总结"><a href="#5-总结" class="headerlink" title="5. 总结"></a>5. 总结</h2>即刻的功能设计、交互体验，以及高质量的内容、社区，使得它能在今日头条、微博在各自领域上的垄断地位中寻得一片新天地。也紧紧拉拢了一批年轻用户，为今后的发展带来了无限的可能。营造出“年轻”“鲜活”的文化气质。</li>
</ol>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/07/05/更改主题为NexT/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="芝士混子">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Haclk's Top">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/07/05/更改主题为NexT/" itemprop="url">更改主题为NexT</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-07-05T13:40:50+08:00">
2018-07-05
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/写作谈/" itemprop="url" rel="index">
<span itemprop="name">写作谈</span>
</a>
</span>
</span>
<span id="/2018/07/05/更改主题为NexT/" class="leancloud_visitors" data-flag-title="更改主题为NexT">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">阅读次数:</span>
<span class="leancloud-visitors-count"></span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>根据主页进行配置即可，不再赘述。</p>
<p>在此基础上，添加了阅读数量统计的功能。</p>
<p>参考文章：</p>
<p><a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="noopener">NexT</a></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/06/02/在Hexo中设置RSS/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="芝士混子">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Haclk's Top">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/02/在Hexo中设置RSS/" itemprop="url">在Hexo中设置RSS</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-02T16:03:39+08:00">
2018-06-02
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/写作谈/" itemprop="url" rel="index">
<span itemprop="name">写作谈</span>
</a>
</span>
</span>
<span id="/2018/06/02/在Hexo中设置RSS/" class="leancloud_visitors" data-flag-title="在Hexo中设置RSS">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">阅读次数:</span>
<span class="leancloud-visitors-count"></span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>首选进入博客根目录，先安装这个包:</p>
<p><code>npm install hexo-generator-feed</code></p>
<p>然后在在根<code>_config.yml</code>文件中配置该插件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">feed:</span></span><br><span class="line"><span class="attr"> type:</span> <span class="string">atom</span></span><br><span class="line"><span class="attr"> path:</span> <span class="string">atom.xml</span></span><br><span class="line"><span class="attr"> limit:</span> <span class="number">20</span></span><br><span class="line"><span class="attr"> hub:</span></span><br><span class="line"><span class="attr"> content:</span></span><br><span class="line"><span class="attr"> content_limit:</span></span><br><span class="line"><span class="attr"> content_limit_delim:</span> <span class="string">' '</span></span><br></pre></td></tr></table></figure>
<p>参数的含义：</p>
<ul>
<li><code>type</code>: <code>RSS</code>的类型(<code>atom/rss2</code>)</li>
<li><code>path</code>: 文件路径,默认是<code>atom.xml/rss2.xml</code></li>
<li><code>limit</code>: 展示文章的数量,使用<strong>0</strong>或则<strong>false</strong>代表展示全部</li>
<li><code>hub</code>:</li>
<li><code>content</code>: 在<code>RSS</code>文件中是否包含内容 ,有3个值 <code>true/false</code>默认不填为<code>false</code></li>
<li><code>content_limit</code>: 指定内容的长度作为摘要,仅仅在上面<code>content</code>设置为<code>false</code>和<code>没有自定义的描述</code>出现</li>
<li><code>content_limit_delim</code>: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.</li>
</ul>
<p>参考文章：</p>
<p><a href="https://segmentfault.com/a/1190000012647294" target="_blank" rel="noopener">为hexo博客添加RSS订阅功能</a></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/06/02/文章图片管理/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="芝士混子">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Haclk's Top">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/02/文章图片管理/" itemprop="url">在hexo博客中添加分类categories和标签tags</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-02T12:26:50+08:00">
2018-06-02
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/写作谈/" itemprop="url" rel="index">
<span itemprop="name">写作谈</span>
</a>
</span>
</span>
<span id="/2018/06/02/文章图片管理/" class="leancloud_visitors" data-flag-title="在hexo博客中添加分类categories和标签tags">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">阅读次数:</span>
<span class="leancloud-visitors-count"></span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="如何传图片"><a href="#如何传图片" class="headerlink" title="如何传图片"></a>如何传图片</h2><p>因为是急于markdown的，所以对于图片可能就需要一些特殊处理。</p>
<h3 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h3><h4 id="绝对路径"><a href="#绝对路径" class="headerlink" title="绝对路径"></a>绝对路径</h4><p>当Hexo项目中只用到少量图片时，可以将图片统一放在<code>source/images</code>文件夹中，通过markdown语法访问它们。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">source/images/image.jpg</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>图片既可以在首页内容中访问到，也可以在文章正文中访问到。</p>
<h4 id="相对路径"><a href="#相对路径" class="headerlink" title="相对路径"></a>相对路径</h4><p>图片除了可以放在统一的<code>images</code>文件夹中，还可以放在<strong>文章自己的目录</strong>中。文章的目录可以通过配置<code>_config.yml</code>来生成。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">_config.yml</span><br><span class="line">post_asset_folder: true</span><br></pre></td></tr></table></figure>
<p>将<code>_config.yml</code>文件中的配置项<code>post_asset_folder</code>设为<code>true</code>后，执行命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new post_name</span><br></pre></td></tr></table></figure>
<p>在<code>source/_posts</code>中会生成文章<code>post_name.md</code>和同名文件夹<code>post_name</code>。将图片资源放在<code>post_name</code>中，文章就可以使用相对路径引用图片资源了。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">_posts/post_name/image.jpg</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>上述是markdown的引用方式，图片只能在文章中显示，但无法在首页中正常显示。</p>
<p>如果希望图片在文章和首页中同时显示，可以使用标签插件语法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">_posts/post_name/image.jpg</span><br><span class="line">{% asset_img image.jpg This is an image %}</span><br></pre></td></tr></table></figure>
<h3 id="图床应用"><a href="#图床应用" class="headerlink" title="图床应用"></a>图床应用</h3><p>当我们写作的时候，经常需要引用图片到文章里去，如果图片少的话我们可以直接把图片放入每篇文章的目录里面，然后发布到GitHub里去，但是这样会导致GitHub仓库变得越来越大，并且同步会非常慢。所以我们需要一个稳定强大长久的私人图床。一般小型网站的图床都不做考虑。</p>
<h4 id="新浪微博图床"><a href="#新浪微博图床" class="headerlink" title="新浪微博图床"></a>新浪微博图床</h4><p>微博图床的优点就是自动给你产生不同尺寸的图片，还贴心的给你Markdown的语法，但是一个问题可能出在新浪微博屏蔽这种外链了，长期会有一些隐患的。</p>
<h4 id="七牛云存储"><a href="#七牛云存储" class="headerlink" title="七牛云存储"></a>七牛云存储</h4><p>付费的存储空间里面七牛云存储稳定而且不错，免费认证的用户就有10GB存储空间，每月10G下载流量，足够博客用了。当你注册后建立一个新空间后，下载一个qrsync同步工具，可以很方便的把你本地的文件推送到七牛云存储空间里面，具体安装文档你可以看官方的说明文档，我这里贴出来这个工具的配置文档(conf.json)供你参考：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> "src":"your src dir",</span><br><span class="line"> "dest":"qiniu:access_key=123&secret_key=456&bucket=789",</span><br><span class="line"> "debug_level": 1</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>在这里把src替换成泥实际目录的绝对路径。dest里面替换access_key、secret_key及bucket。<br>这样每当你在src目录里添加图片后，执行如下命令即可把src目录的文件推送到bucket里面。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">qrsync conf.json</span><br></pre></td></tr></table></figure>
<p>需要注意的是src目录里面不需要建立子目录，因为这个同步工具会忽略子目录，直接把文件全部放到src根目录即可。<br>那怎么访问bucket里面的图片呢？每个存储空间都有一个域名，那任何一张图片访问的形式就是：<a href="https://link.zhihu.com/?target=http%3A//xn--7gq57dr3d05e78e4z5b/xxx.jpg" target="_blank" rel="noopener">http://七牛存储域名/xxx.jpg</a> 。那么所有图片都可以这么调用外链。考虑到存储空间有流量的限制，为了防止别人调用你的图片，你可以在存储空间管理里面设置白名单，把你的域名添加进去即可，这样只有你的域名可以访问这个图片等外链了。</p>
<h4 id="Onedrive存储"><a href="#Onedrive存储" class="headerlink" title="Onedrive存储"></a>Onedrive存储</h4><p>Onedrive学生账户有1TB免费容量，如果只是存储文字怕是一辈子也用不完，来点图片吧还是。</p>
<p>设置把本地这个图片文件夹同步到OneDrive。（也可以把所有的文件都放到OneDrive里面同步上去，多一个备份）</p>
<h4 id="我的选择"><a href="#我的选择" class="headerlink" title="我的选择"></a>我的选择</h4><p>目前我选择最省钱的解决方案，但是略微麻烦一点，就是需要在Onedrive</p>
<p>我目前选择的方案是用iPic软件上传，默认为微博图床，我猜够用的吧。可能后续会解锁高级用户，使用七牛之类的吧。</p>
<p>直接下载iPic，拖拽图片到里面，可以自动生成Markdown的形式，插入到文章里就好。</p>
<p><a href="https://yanyinhong.github.io/2017/05/02/How-to-insert-image-in-hexo-post/" target="_blank" rel="noopener">Hexo博客搭建之在文章中插入图片</a></p>