zoukankan      html  css  js  c++  java
  • Typecho-Theme-Aria后台设置

    站点头像

    填入一个图片(推荐正方形)地址,需要带上 http(s)://

    留空会根据博主邮箱调用Gravatar头像。

    显示位置

    1. 导航栏站点名称旁
    2. 竖直导航栏顶部

    默认文章缩略图

    这个缩略图对文章和页面都有效
    按行填入图片的地址,并带上http(s)://前缀,图片会随机显示。

    调用顺序的优先级:文章/页面缩略图Url字段 > 后台设置->默认文章缩略图url > assets/img/thumbnail.jpg

    显示位置

    1. 首页文章卡片内
    2. 文章页面顶部(头部图片)
    3. 文章底部的上一篇/下一篇内

    首页背景图片

    按行填入图片的地址,并带上http(s)://前缀,图片会随机显示。

    这里的图片会显示在首页搜索结果页面分类等页面


    OwO

    填入OwO.json的文件地址,带上http(s)://前缀


    评论框placeholder

    显示在评论框内


    统计代码

    填入服务商内获取的统计代码

    需要注意的是,如果你开启了pjax,那么最好使用Google或百度的分析统计代码。
    因为pjax会导致统计代码统计不准确,需要对统计代码进行重载,而目前我也只内置了这两个统计的重载代码。


    顶部自定义内容

    这里可以填需要额外链接的csshtml之类的内容,会插入到</head>标签之前。


    底部自定义内容

    可以填写html的内容,例如服务器提供商、CDN提供商等。
    会插入到底部版权的上面。


    自定义JS

    插入到main.min.js文件之后,可以加入你自己的JS代码,例如重载代码等等。

    只填写代码,不需要<script></script>标签


    底部链接组件

    配置方式是通过json格式的字符串,可以留空

    参数 内容 是否必需 类型
    text 链接的文字 string
    href 链接地址 string
    target 参考html语法 string

    注意所有string类型的参数必须要用英文引号包裹

    单个

    {"text":"Siphils","href":"https: //eriri.ink","target":"_blank"}
    

    多个

    {"text":"Siphils","href":"https: //eriri.ink","target":"_blank"},
    {"text":"Siphils","href":"https: //eriri.ink","target":"_blank"}
    

    注意末尾的逗号,最后一项不需要逗号。


    Copyright年份

    比如2017-2018,2018
    会显示在网站底部版权处。


    Gravatar头像源

    填入gravatar镜像地址,填写类似格式为

    http(s)://domain/avatar/
    

    留空默认为

    https://cn.gravatar.com/avatar/`
    

    导航栏配置

    各项参数如下表

    参数 内容 是否必需 类型
    text 链接的文字 string
    slug 页面缩略名 string
    href 链接地址 string
    target 参考html语法 string
    icon 图标 string
    sub 子菜单 array

    子菜单内各项配置与上面参数相同(除sub外)

    配置举例

    {
        "text": "首页",
        "href": "https://eriri.ink",
        "icon": "iconfont icon-aria-home"
    },
    {
        "text": "归档",
        "href": "https://eriri.ink/archives.html",
        "icon": "iconfont icon-aria-archives",
        "sub" : [
            {
                "text":"日常",
                "href":"https://eriri.ink/category/daily/",
                "icon": "iconfont icon-aria-book"
            },
            {
                "text":"代码",
                "href":"https://eriri.ink/category/zturn/",
                "icon": "iconfont icon-aria-code"
            }
        ]
    }
    

    子菜单的项目也是可以设置target属性的
    并且每个父级菜单都可以设置子菜单,目前仅支持最多二级菜单

    slug参数

    这个参数比较特殊,仅支持在typecho后台创建的页面并设置了slug的页面。

    页面的slug就是在创建页面时,填写页面链接的那串字符。

    填入slug后,texthref参数不会被解析,而是会根据slug查询数据库后输出对应的页面的链接和标题。

    输出的顺序会按照配置信息的填写顺序

    例如:

    {
      "slug":"archives",
      "icon":"iconfont icon-aria-archives"
    }
    

    这时就会查找对应的slug并输出对应的页面名称和链接,此时texthref参数无效,其他参数仍有效。


    打赏功能配置

    每行按照键值对的方式填写即可,例如:

    "Alipay":"https://cdn.siphils.com/reward/alipay.jpg",
    "Wechat":"https://cdn.siphils.com/reward/wechat.jpg"
    

    配置好后会在文章/页面末尾显示打赏按钮,若留空则按钮不输出


    自定义「一言」接口地址

    句子会显示在页面底部

    填入接口地址,**注意接口需要是只返回一条句子的,比如我使用的默认的hitokoto.cn的接口:

    https://v1.hitokoto.cn/?c=a&encode=text
    

    开关设置-一言内可以选择开启或关闭显示,留空使用默认接口地址。
    如果不知道什么意思留空即可。


    MathJax配置信息

    在此输入MathJax配置信息,不需要script标签,只输入JS代码。
    例如:

    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
    })
    

    此项设置在开关设置启用MathJax项目启用后才会显示


    开关设置

    PJAX

    什么是PJAX?
    PJAX重载接口见Aria.reloadAction()

    启用后会强制关闭评论反垃圾保护


    AJAX评论

    什么是AJAX?

    此功能目前尚不太完善


    Fancybox

    什么是fancybox?
    开启图片灯箱效果,会自动解析文章/页面/评论区内的图片。并且一篇文章或页面内的图片会自动解析为一个相册集。

    如果文章/页面内某张图片不想要解析为灯箱,则可以如此书写:

    !!!
    <img src="/path/to/img" no-fancybox>
    !!!
    

    Lazyload

    什么是lazyload?
    图片懒加载功能开启后,所有的图片会自动解析为懒加载。

    如果某张图片不想要解析为懒加载,则可以如此书写:

    <img src="/path/to/img" no-lazyload>
    

    评论邮件回复提醒按钮

    开启后会在评论框右下角增加一个不接收回复邮件通知的按钮

    若想此按钮有效,你必须安装CommentToMail插件 (文章中最后一个插件)


    MathJax

    什么是MathJax?
    v1.9.0以上版本已经内置了MathJax

    此开关启用后,需要在MathJax配置信息设置内填入配置信息


    文章链接二维码

    文章/页面末会输出一个本文链接的二维码


    评论UserAgent

    显示评论者的操作系统和浏览器信息


    一言

    显示在网站底部

    归档页面

    一个以时间轴的方式显示所有文章并且显示分类和标签的页面模板。

    1. 新建一个页面
    2. 在右侧自定义模板选择归档页面 时间轴

    不需要填写页面内容,写了也不会输出

    图标

    图标用来干什么呢?

    1. 导航栏前边的小图标
    2. 主题默认的一些对应的图标
    3. 个人喜好定制
    4. ...

    导航栏使用图标

    你可以自己引入额外的图标,比如FontAwesome或者Iconfont,然后可以在配置项的icon参数里填入对应的值。

    icon参数需要填写完整的类名,例如iconfont icon-aria-home或者fa fa-wikipedia-w
    主题内置图标前缀为iconfont

    所有图标

    下面为最新版本所有内置图标以及其class

    | ------------- | ------------- | ------------- |
    | icon-aria-close | icon-aria-archlinux | icon-aria-search|
    | icon-aria-mac | icon-aria-os | icon-aria-friends|
    | icon-aria-twitter | icon-aria-windows | icon-aria-success|
    | icon-aria-fedora | icon-aria-archives | icon-aria-book|
    | icon-aria-menu | icon-aria-ipad | icon-aria-iphone|
    | icon-aria-write | icon-aria-link | icon-aria-qq|
    | icon-aria-like | icon-aria-failure | icon-aria-reply|
    | icon-aria-comment | icon-aria-more | icon-aria-freebsd|
    | icon-aria-paperboat | icon-aria-music | icon-aria-date|
    | icon-aria-category | icon-aria-warning | icon-aria-github|
    | icon-aria-linux | icon-aria-about | icon-aria-emotion|
    | icon-aria-telegram | icon-aria-windows10 | icon-aria-cancel|
    | icon-aria-picture | icon-aria-chrome | icon-aria-email|
    | icon-aria-guestbook | icon-aria-centos | icon-aria-debian|
    | icon-aria-reward | icon-aria-gentoo | icon-aria-ubuntu|
    | icon-aria-weibo | icon-aria-wechat | icon-aria-browser|
    | icon-aria-qrcode | icon-aria-android | icon-aria-submit|
    | icon-aria-home | icon-aria-tag | icon-aria-code|
    | icon-aria-username | icon-aria-edge | icon-aria-firefox|
    | icon-aria-mail | icon-aria-opera | icon-aria-safari|
    | icon-aria-bilibili | icon-aria-markdown | icon-aria-view|
    | icon-aria-copy | icon-aria-360 | icon-aria-ie|
    | icon-aria-checked | icon-aria-maxthon | icon-aria-sogou|
    | icon-aria-rss | icon-aria-uc | icon-aria-qqbrowser|


    原wiki地址:Typecho-Theme-Aria

  • 相关阅读:
    从今天开始,记录学习的点滴。
    git命令整理
    vue ie报错:[Vue warn]: Error in v-on handler: "ReferenceError: “Promise”未定义"
    HTML5知识整理
    解决You are using the runtime-only build of Vue where the template compiler is not available. Either pre
    HTML5本地存储
    网站建设流程图说明
    vue支持的修饰符(常用整理)
    vue绑定内联样式
    vue绑定class的几种方式
  • 原文地址:https://www.cnblogs.com/misfit/p/12289753.html
Copyright © 2011-2022 走看看