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...
3 comments
Read More »

Hardware Password Manager

[Updates 2025-01-20] The original blog post assumes that all passwords are stored in one password manager, and the password manager either unlocks everything or nothing (e.g. Keepass). After discussing with friends, I realized that if I use something like pass , and I use a hardware GPG token, I can actually store and sync all encrypted passwords to all devices, because I will only decrypt the passwords on demand, and the computer will not see the GPG private key. The compromise is that the computer will see the list of all password entries (e.g. accounts), as well as a few other issues . I've been using Keepass for many years. I don't use online password services because I cannot fully trust them. Besides, I may not always have Internet connection, which is why I also don't use a self-hosted service. Everything has been working fine, until I turn my paranoid knob to the max. Here's the thought experiment . The Imaginary Scenario Let's say I have 100 PCs for differe...
Post a Comment
Read More »

ESP32S3: Flash Encryption and Secure Boot

Flash encryption and secure boot are useful security features for ESP32S3 chip. While not perfect, they definitely make it harder to extract the secrets in the chip. However, it is tricky to enable both features at the same time. The topic is actually discussed in the official documentation: ESP32S3 Security Features Security Features Enablement Workflows Especially, the second one mentioned it is recommended to enable flash encryption before secure boot. But I still find the documentation confusing. In the end I was able to successfully enable both, here's my findings. My Understanding After my adventure, here's what I think could have worked. WARNING, this is untested. Follow  Security Features Enablement Workflows : Burn all the keys, as long as their purpose eFuses and read/write protections Burn other security eFuses, but DO NOT burn ENABLE_SECURITY_DOWNLOAD in the middle, which is mentined at the end of the instruction for both flash encryption and secure boot. Burn...
Post a Comment
Read More »