Skip to main content

在Blogger首页显示文章摘要二解

在首页显示摘要是个不错的主意,可惜Blogger默认不支持.
网上倒是有一些解决方案,不过我都不大喜欢,因为需要修改文章模板,每次创建文章时还要指定哪里是摘要,哪里是全文,不爽.

我希望摘要的生成是自动的,可且应当便于修改. 网上好像有个这样的脚本,不过我网络不好,下不来...

经过两天的研究,我完成了两种方案.

方案一,根据行数定摘要.

修改模板, 加入CSS
/* added by WangLu
for summary display */
div.wl_summary{
height: 10em;
max-height: 10em;
overflow-y: hidden;
}

另外在post-body的定义中,把<p><data:post.body/></p>
改为
<!-- added by WangLu -->
<!-- display summary on the main page -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<p>
<div class='wl_summary'>
<data:post.body/>
</div>
</p>
...
<br/>
<br/>
<a expr:href='data:post.url'>Read more...</a>
</b:if>

就行了.

此法优点是改动少,速度快,代码简单,且发文时无需添加额外信息
不过需要说明几点:
1. 在Firefox里指定height或max-height都可以达到效果,但是IE不支持max-height
2. 关于height的值可能需要根据实际字体进行修改, 设置不当容易出现半个字的情况.
3. 即使文章很短,也会出现'...'和Read more字样,逻辑上有点小问题.
4. 未显示的部分实际也已下载(查看源代码就能看到),因此不会减少数据下载量


方案二:根据字数定摘要.(我现在采用的方案)

仍需要修改模板,在post-body的定义中,把<p><data:post.body/></p>
改为
<!-- added by WangLu -->
<!-- display summary on the main page -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<WL_SUMMARY />
<div class='wl_body'>
<p>
<data:post.body/>
</p>
</div>
<div class='wl_read_more'>
...<br/>
<br/>
<a expr:href='data:post.url'>Read more...</a>
</div>
</b:if>


然后添加javascriot页面元素(我这里直接往模板里写总出错)
<!-- added by WangLu for displaying summary in the main page -->
<script type="text/javascript">
var all_summaries = document.getElementsByTagName("WL_SUMMARY");
var num_of_char = 250;

for (var i=0; i < all_summaries.length ; ++i)
{
var summary = all_summaries.item(i);

var b = summary.nextSibling; //body
while( (!b) || (b.className!="wl_body")) b = b.nextSibling;
if(!b) continue; //error!

var r = b.nextSibling; //readmore
while( (!r) || (r.className!="wl_read_more")) r = r.nextSibling;
if(!r) continue; //error!

if (b.innerHTML.length < num_of_char)
r.style.display="none"; //don't show 'read more' for short articles
else
b.innerHTML = b.innerHTML.substring(0,num_of_char); //truncate
}
</script>

就好了.

此法优点是逻辑正确,能自动判断是否需要显示摘要,而且发文时无需添加额外信息.
不过需要说明几点:
1. 代码中寻找wl_body和wl_read_more时出于效率考虑,直接顺序查找,故不可交换二者顺序.
2. 不要在别处使用WL_SUMMARY或wl_body,wl_read_more
3. 显示摘要是直接砍innerHTML,对复杂的HTML代码可能会出问题
4. 这种方法实际也是下载后在删去,因此不会减少下载量.而且如果你的机器较慢,可能会看到文字先出现后消失. 不过这样最后确实可以节省一点内存
5. 按照我使用的模板的写法,这段脚本应该会在posts之后调用,对别的模板不予保证.(另一种想法是把脚本写成函数,然后放到文章所在<div>的onload去,不过这时函数应该提前声明,不知是否可行,我没有尝试)
6. 由于网络的原因,我这里修改页面元素的速度尚可,但是改模板就慢的不行了.我想出了一种简单地在这两种摘要模式中切换的方法:
保留第一种的CSS,但不要添加class='wl_summary'.
上一步并不影响第二种方法,因此照上述文字做即可.
如果想用第一种方法,只需把脚本中b.innerHTML=...一行改为b.className="wl_summary".
用这种方法实现的第一种方法可以兼顾二者的优点，卡行比较优美，且可以自动判断是否显示Read more，不错。

Labels:

Comments

Post a Comment

Popular posts from this blog

Determine Perspective Lines With Off-page Vanishing Point

In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction. For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point. But sometimes the vanishing point is too far away, such that it is outside the paper/canvas. In this example, we have a point P and two perspective lines L1 and L2. The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper. I am aware of a few traditional solutions: 1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP. 2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back. 3. Draw a perspective grid using the Brewer Method. #1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/p...
2 comments
Read More »

Chasing an IO Phantom

My home server has been weird since months ago, it just becomes unresponsive occassionally. It is annoying but it happens only rarely, so normally I'd just wait or reboot it. But weeks ago I decided to get to the bottom of it. What's Wrong My system set up is: Root: SSD, LUKS + LVM + Ext4 Data: HDD, LUKS + ZFS 16GB RAM + 1GB swap Rootless dockerd The system may become unresponsive, when the IO on HDD  is persistantly high for a while. Also: Often kswapd0 has high CPU High IO on root fs (SSD) From dockerd and some containers RAM usage is high, swap usage is low It is very strange that IO on HDD can affect SSD. Note that when this happens, even stopping the IO on HDD does not always help. Usually restarting dockerd does not help, but rebooting helps. Investigation: Swap An obvious potential root cause is the swap. High CPU on kswapd0 usually means the free memory is low and the kernel is busy exchanging data between disk and swap. However, I tried the following steps, none of the...
Post a Comment
Read More »

Moving Items Along Bezier Curves with CSS Animation (Part 2: Time Warp)

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : \[B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1.\] In the 2D case, \(B(t)\) has two coordinates, \(x(t)\) and \(y(t)\). Define \(x_i\) to the be x coordinate of \(P_i\), then we have: \[x(t) = (1-t)^3x_0+3(1-t)^2tx_1+3(1-t)t^2x_2+t^3x_3,\ 0 \le t \le 1.\] So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(...
3 comments
Read More »