Hexo(sakura)设置文章置顶+私密文章

2023-10-09 23:50

本文主要是介绍Hexo(sakura)设置文章置顶+私密文章,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言

博客文章置顶是基于Next主题的优化:hexo博客优化之文章置顶+置顶标签

实践证明:直接按照轮子造车是开不了滴,
关键因素:在于sakura版本中,主题作者在themes\sakura\layout_partial\ archive.ejscategory-archive.ejs 中设置了:按照日期的排序法,不同主题的Hexo需要针对性设置哦!

二、文章置顶

  1. 卸载原有的主页加载插件

    npm uninstall hexo-generator-index --save
    
  2. 安装插件hexo-generator-index-pin-top

    npm install hexo-generator-index-pin-top --save
    
  3. 然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章:

    ---
    title: Hexo(sakura)设置文章置顶+置顶标签
    date: 2020-02-17 12:00:25
    categories: 技术
    top: true
    ---
    

    到目前为止,置顶功能按理说已经可以实现了;但是sakura主题有一点不同哦!

    关键因素:在于sakura版本中,主题作者在themes\sakura\layout_partial\ archive.ejscategory-archive.ejs 中设置了:按照日期的排序法,不同主题的Hexo需要针对性设置哦!

  4. sakura主题特有的设置themes\sakura\layout\_partial\下首页的显示:
    按date排序,这里需要单独修改archive.ejscategory-archive.ejs
    在这里插入图片描述

    4.14补充:
    Hexo(sakura)neat压缩导致首页归档页面分页处错位(完美解决)
    下面改不改pages=5没有任何影响,因为2就==2了,2>=2和 5>=2有什么区别呢。。。
    主题参考代码见:https://gitee.com/cungudafa/hexo-theme-sakuraplus


    3.5日补充:
    if (pagination == 2)部分是分页为2时才排序是不对的,
    应改为只要分页数大于1就分页if (pagination >= 2)

    不然文章写多了,超过三页会出现以下问题:
    在这里插入图片描述
    同理,在首页themes\sakura\layout\index.ejs也有一个Previous,把数值改大一点:(只是一个控制作用,不用改)
    在这里插入图片描述

    修改后完整archive.ejs

    <!-- 两篇文章以上 -->
    <% if (pagination >= 2){ %><!-- 置顶文章 --><% page.posts.each(function(post, index){ %><% if (post.top){ %><%- partial('_widget/index-items', {index: index, post: post}) %><% } %><% }) %><!-- 首页默认取最最新文章集 --><% page.posts.sort('date', theme.homePageSortType).limit(theme.homeArticleShown).each(function(post, index){ %><!-- 其余文章 --><% if (!post.top){ %><%- partial('_widget/index-items', {index: index, post: post}) %><% } %> <% }) %>
    <% } else { %><% page.posts.each(function(post, index){ %><%- partial('_widget/index-items', {index: index, post: post}) %><% }) %>
    <% } %>
    

    同理,修改后的category-archive.ejs

    ```
    <% if (pagination >= 2){ %><!-- 置顶文章 --><% page.posts.each(function(post, index){ %><% if (post.top){ %><%- partial('_widget/category-items', {index: index, post: post}) %><% } %><% }) %><!-- 首页默认取最最新文章集 --><% page.posts.sort('date', theme.homePageSortType).limit(theme.homeArticleShown).each(function(post, index){ %><!-- 其余文章 --><% if (!post.top){ %><%- partial('_widget/category-items', {index: index, post: post}) %><% } %> <% }) %>
    <% } else { %><% page.posts.each(function(post, index){ %><%- partial('_widget/category-items', {index: index, post: post}) %><% }) %>
    <% } %>
    ```
    

    现在,hexo clean && hexo g && hexo s可以查看到文章已经置顶了。
    为了置顶文章不那么突兀,现给置顶文章添加icon标识

  5. 首页添加置顶标签,位置:themes\sakura\layout\_widget\
    在这里插入图片描述
    index-items.ejscategory-items.ejs时间后添加

    <div class="p-time"><i class="iconfont icon-time"></i><%= date(post.date, 'YYYY-M-D') %>
    </div><div class="post-meta"><!--置顶 --><% if (post.top){ %><i class="fa fa-thumb-tack"></i><font color=ff9999>置顶</font><span class="post-meta-divider"> | </span><% } %>
    

    效果图:
    在这里插入图片描述
    文章内显示置顶:

    <% if (post.top){ %><i class="fa fa-thumb-tack"></i><font color=ff9999>置顶</font><% } %>
    

    效果:
    在这里插入图片描述

三、私密文章

  1. 安装插件

    npm install hexo-blog-encrypt --save
    
  2. 主配置文件MyWeb\_config.yml文末添加:

    # 文章加密
    encrypt:enable: truedefault_abstract: 这是一篇加密文章,内容可能是个人情感宣泄或者收费技术。如果你非常好奇,请与我联系。default_message: 输入密码,查看文章。
    

    启用博文加密。
    3-21修改: 去掉default_

    # 文章加密
    encrypt:enable: trueabstract: 这是一篇加密文章,内容可能是个人情感宣泄或者收费技术。如果你非常好奇,请与我联系。message: 输入密码,查看文章。
    
  3. 文章Front-matter中加上password: 123456即可:

    ---
    title: Hello World
    abbrlink: 3eeb
    password: 123456
    ---
    

    效果如下:
    在这里插入图片描述
    自定义提示语:

    ---
    title: Hello World
    abbrlink: 3eeb
    password: 123456
    abstract: 密码:123456
    message: 看不到吧,hhhh,不告诉你密码是123456
    ---
    

    其中:

    • password: 是该博客加密使用的密码
    • abstract: 是该博客的摘要,会显示在博客的列表页
    • message: 这个是博客查看时,密码输入框上面的描述性文字

    效果:(此页面是不支持复制功能的o!
    在这里插入图片描述
    如果你开启了 字数统计功能 的话,那么本文的统计也会失效。

  4. 加密文章,显示了评论,是不是很奇怪??
    需要额外隐藏浏览数、评论、作者信息等
    在这里插入图片描述
    在任何需要加密的地方加上一句:

    <% if (post.encrypt == true) { %>style="display:none" <% } %>
    

    例如:在这里插入图片描述
    在这里插入图片描述
    ps.需要时加上password,提示语message,abstract摘要,后两者不能设置为空哦。

这篇关于Hexo(sakura)设置文章置顶+私密文章的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176449

相关文章

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》:本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

如何关闭 Mac 触发角功能或设置修饰键? mac电脑防止误触设置技巧

《如何关闭Mac触发角功能或设置修饰键?mac电脑防止误触设置技巧》从Windows换到iOS大半年来,触发角是我觉得值得吹爆的MacBook效率神器,成为一大说服理由,下面我们就来看看mac电... MAC 的「触发角」功能虽然提高了效率,但过于灵敏也让不少用户感到头疼。特别是在关键时刻,一不小心就可能触

Nginx配置系统服务&设置环境变量方式

《Nginx配置系统服务&设置环境变量方式》本文介绍了如何将Nginx配置为系统服务并设置环境变量,以便更方便地对Nginx进行操作,通过配置系统服务,可以使用系统命令来启动、停止或重新加载Nginx... 目录1.Nginx操作问题2.配置系统服android务3.设置环境变量总结1.Nginx操作问题