Grav玩法-安装配置

January 19, 2018

安装

手动配置管理员账号密码:

touch user/accounts/admin.yaml

password: 'password'
email: 'youremail@mail.com'
fullname: 'Johnny Appleseed'
title: 'Site Administrator'
access:
  admin:
    login: true
    super: true

安装插件

代码高亮插件,安装后可以从admin后台配置代码风格、是否显示行号等:

bin/gpm install highlight

其他插件:

bin/gpm install pagination
bin/gpm install archives
bin/gpm install toc
bin/gpm install tntsearch

从antimatter/template/partials/sidebar.html.twig侧边栏模板也可以看到该主题有哪些插件可以配合使用。

修改css

根据文档说明，可以在主题目录下css/custom.css文件(没有就新建一个)里写入自己的css。

例如:

pre {
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

blog文章的头图

blog页面会自动取路径下第一张图片,此外header部分也可以指定图片。

header_image: true #表示启用头图
#指定该目录下的一张图片        
header_image_file: aaa.png

blog文章的头图使用外链

发现.twig文件中使用page.media方法不能引入外链。

{{ page.media['http://aaa.com/bbb.jpg'].html('My title', 'Some ALT text', 'myclass') }}

直接修改img标签。

  {% set header_image_url  = page.header.header_image_url %}
  ...
  {% if header_image %}
      {% if header_image_url %}

          <img style="object-fit: cover" width="100%" height="300" src={{header_image_url}} >

      {% elseif header_image_file %}
  ...

这样可以在header中通过header_image_url变量来控制了.

控制blog文章的头图在文章详情不显示

修该: item.html.twig:

#item.html.twig
...
{% set is_blogPage =  true %}
...

再修改blog.item.twig,这样就可以在header中通过header_image_show_onDetailPage变量来控制了(默认不显示)

{% if is_blogPage and header_image_show_onDetailPage==false %}
  {#不显示头图#}
{% else %}
  {% if header_image %}
      {% if header_image_file %}
          {% set header_image_media = page.media.images[header_image_file] %}
      {% else %}
          {% set header_image_media = page.media.images|first %}
      {% endif %}
      {{ header_image_media.cropZoom(header_image_width, header_image_height).html }}
  {% endif %}
{% endif %}

写一个豆瓣读书插件

bin/gpm install devtools