Gridea 主题常用代码片段

全站 Site

首页：themeConfig.domain 站点名：themeConfig.siteName 站点描述：themeConfig.siteDescription 全站文章数：site.posts.length 全站标签数：site.tags.length

共 <%= site.posts.length %> 篇日志

菜单

<% menus.forEach(function(menu) { %>
    <a href="<%= menu.link %>"><%= menu.name %></a>
<% }); %>

网页标题优化 siteTitle

<%- include('./includes/head', { siteTitle: themeConfig.siteName }) %>
<%- include('./includes/head', { siteTitle: `${post.title} | ${themeConfig.siteName}` }) %>
<%- include('./includes/head', { siteTitle: `${tag.name} | ${themeConfig.siteName}` }) %>
<%- include('./includes/head', { siteTitle: `文章归档 | ${themeConfig.siteName}` }) %>
<%- include('./includes/head', { siteTitle: `标签列表 | ${themeConfig.siteName}` }) %>

文章 Post

标题：post.title 链接：post.link

文章标题：

<a href="<%= post.link %>"><%= post.title %></a>

文章SEO

<meta name="description" content="<%- post.description %>" />
<meta name="keywords" content="<%- post.tags.map(tag => tag.name).join(',') %>" />

发布时间：post.dateFormat 显示相对时间：

<%= site.utils.moment(post.date).locale('zh-cn').fromNow() %>

标签名：post.tags 文章阅读时间：stats.text //3 min read 文章字数：stats.words //3000

显示全部标签名，多个用顿号分开：

<% post.tags.forEach(function(tag, index) { %>
    <a href="<%= tag.link %>">
        <%= tag.name %>
        <% if (index !== post.tags.length - 1) { %>
            、
        <% } %>
    </a>
<% }); %>

显示单个标签名：

<% if (post.tags[0]) { %>
    <a href="<%= post.tags[0].link %>"><%= post.tags[0].name %></a>
<% }; %>

封面图：post.feature

<% if (themeConfig.showFeatureImage && post.feature) { %>
    <img src="<%= post.feature %>">
<% } %>

文章摘要：post.abstract 显示文章  前的内容文章全文：post.content

<% if (post.abstract) { %>
    <%- post.abstract %>
    <a href="<%= post.link %>">阅读全文</a>
<% }else{ %>
    <%- post.content %>
    <a href="<%= post.link %>#comments">发表评论</a>
<% } %>

结合以上两者，如果有设置more标签，则显示部分和“阅读全文”链接，若无则全文显示并显示“发表评论”链接。

导航 Pagination

上下篇日志：

<% if (post.prevPost) { %>
    <a href="<%= post.prevPost.link %>"><%= post.prevPost.title %></a>
<% } %>
<% if (post.nextPost) { %>
    <a href="<%= post.nextPost.link %>"><%= post.nextPost.title %></a>
<% } %>

文章列表：

<% if (pagination.prev) { %>
    <a href="<%= pagination.prev %>">上一页</a>
<% } %>
<% if (pagination.next) { %>
    <a href="<%= pagination.next %>">下一页</a>
<% } %>

提速优化

添加 https://instant.page/ 代码：

<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

首页、日志页 <head></head> 内分别添加 prefetch 预加载：

index.ejs

<% if (pagination.prev) { %>
    <link rel="prefetch" href="<%= pagination.prev %>">
<% } %>
<% if (pagination.next) { %>
    <link rel="prefetch" href="<%= pagination.next %>">
<% } %>

post.ejs

<% if (post.prevPost) { %>
    <link rel="prefetch" href="<%= post.prevPost.link %>">
<% } %>
<% if (post.nextPost) { %>
    <link rel="prefetch" href="<%= post.nextPost.link %>">
<% } %>

实用 jQuery 代码

//新窗口打开外链
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var location_href = window.location.href.replace(parse_url,'$3');
$('.post-excerpt a:not(:has(img)),.post-content a:not(:has(img)),.author-name a').hover(function() {
    var this_href = $(this).attr('href');
    var replace_href = this_href.replace(parse_url,'$3');
    if ( this_href != replace_href && location_href != replace_href){$(this).attr('target','_blank');}
});