picobook pico cms flatfile template
This commit is contained in:
chromers
commit
612d724664
20 changed files with 1032 additions and 0 deletions
44
README.md
Normal file
44
README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# PICOBOOK pico cms template
|
||||
|
||||
------------------------
|
||||
|
||||
Picobook is a template for PICO CMS , blazing fast, flat file CMS.
|
||||
|
||||
.png)
|
||||
|
||||
Test drive demo 🚀 : [https://axcora.my.id/piconic/demo/](https://axcora.my.id/pico/picobook/demo/)
|
||||
|
||||
Picobook Home 💻 : [https://axcora.my.id/piconic/](https://axcora.my.id/pico/picobook)
|
||||
|
||||
Video demo 📹 : [https://youtu.be/GPOQzSnGqXw](https://youtu.be/GPOQzSnGqXw)
|
||||
|
||||
|
||||
---------------------------------
|
||||
|
||||
.png)
|
||||
|
||||
Recipes :
|
||||
+ Pico CMS
|
||||
+ Bootstrap
|
||||
+ Axcora
|
||||
|
||||
|
||||
.png)
|
||||
|
||||
--------------------------------------
|
||||
|
||||
|
||||
Installation need to download and install
|
||||
+ [Pico cms](https://github.com/picocms/Pico)
|
||||
+ [Picobook template](https://github.com/mesinkasir/picobook)
|
||||
|
||||
Work :
|
||||
+ Download and extract pico cms on your cloud host
|
||||
+ Download and extract picoboook template on themes folder
|
||||
+ open config/config.yml change theme:default to theme:picobook
|
||||
+ change contact nav page : open content/_meta.md
|
||||
+ open content folder to see example article format
|
||||
|
||||
|
||||
Happy codding !!
|
||||
|
||||
1
content/.gitignore
vendored
Normal file
1
content/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
# This file is meant to be empty
|
||||
9
content/404.md
Normal file
9
content/404.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
Title: Error 404
|
||||
Robots: noindex,nofollow
|
||||
---
|
||||
|
||||
Error 404
|
||||
=========
|
||||
|
||||
Woops. Looks like this page doesn't exist.
|
||||
14
content/_meta.md
Normal file
14
content/_meta.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
Logo: %theme_url%/img/pico-white.svg
|
||||
Tagline: Picobook Making the web easy.
|
||||
Contact:
|
||||
- title: Youtube
|
||||
url: https://www.youtube.com/c/bakoelraksupermarketMesinKasir/videos
|
||||
icon: fab fa-youtube
|
||||
- title: Picobook Home
|
||||
url: https://axcora.my.id/pico/picobook/
|
||||
icon: fab fa-angular
|
||||
- title: Github Repo
|
||||
url: https://github.com/mesinkasir/picobook
|
||||
icon: fab fa-github
|
||||
---
|
||||
519
content/about.md
Normal file
519
content/about.md
Normal file
|
|
@ -0,0 +1,519 @@
|
|||
---
|
||||
Title: About
|
||||
Description: About Picobook pico flat file CMS template themes.
|
||||
Cover: https://axcora.my.id/data/uploads/pico/piconic/pico-cms-website-dev.jpg
|
||||
---
|
||||
|
||||
|
||||
|
||||
# About Picobook
|
||||
|
||||
|
||||
|
||||
Picobook is a template themes built with [pico cms](https://picocms.org), no need database installation for help you build website super fast.
|
||||
|
||||
|
||||
## Welcome to Pico
|
||||
|
||||
Congratulations, you have successfully installed [Pico][] %version%.
|
||||
%meta.description% <!-- replaced by the above Description header -->
|
||||
|
||||
## Creating Content
|
||||
|
||||
Pico is a flat file CMS. This means there is no administration backend or
|
||||
database to deal with. You simply create `.md` files in the `content` folder
|
||||
and those files become your pages. For example, this file is called `index.md`
|
||||
and is shown as the main landing page.
|
||||
|
||||
When you install Pico, it comes with some sample contents that will display
|
||||
until you add your own content. Simply add some `.md` files to your `content`
|
||||
folder in Pico's root directory. No configuration is required, Pico will
|
||||
automatically use the `content` folder as soon as you create your own
|
||||
`index.md`. Just check out [Pico's sample contents][SampleContents] for an
|
||||
example!
|
||||
|
||||
If you create a folder within the content directory (e.g. `content/sub`) and
|
||||
put an `index.md` inside it, you can access that folder at the URL
|
||||
`%base_url%?sub`. If you want another page within the sub folder, simply create
|
||||
a text file with the corresponding name and you will be able to access it
|
||||
(e.g. `content/sub/page.md` is accessible from the URL `%base_url%?sub/page`).
|
||||
Below we've shown some examples of locations and their corresponding URLs:
|
||||
|
||||
<table style="width: 100%; max-width: 40em;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50%;">Physical Location</th>
|
||||
<th style="width: 50%;">URL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>content/index.md</td>
|
||||
<td><a href="%base_url%">/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content/sub.md</td>
|
||||
<td><del>?sub</del> (not accessible, see below)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content/sub/index.md</td>
|
||||
<td><a href="%base_url%?sub">?sub</a> (same as above)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content/sub/page.md</td>
|
||||
<td><a href="%base_url%?sub/page">?sub/page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content/theme.md</td>
|
||||
<td><a href="%base_url%?theme">?theme</a> (hidden in menu)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content/a/very/long/url.md</td>
|
||||
<td>
|
||||
<a href="%base_url%?a/very/long/url">?a/very/long/url</a>
|
||||
(doesn't exist)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
If a file cannot be found, the file `content/404.md` will be shown. You can add
|
||||
`404.md` files to any directory. So, for example, if you wanted to use a special
|
||||
error page for your blog, you could simply create `content/blog/404.md`.
|
||||
|
||||
Pico strictly separates contents of your website (the Markdown files in your
|
||||
`content` directory) and how these contents should be displayed (the Twig
|
||||
templates in your `themes` directory). However, not every file in your `content`
|
||||
directory might actually be a distinct page. For example, some themes (including
|
||||
Pico's default theme) use some special "hidden" file to manage meta data (like
|
||||
`_meta.md` in Pico's sample contents). Some other themes use a `_footer.md` to
|
||||
represent the contents of the website's footer. The common point is the `_`: all
|
||||
files and directories prefixed by a `_` in your `content` directory are hidden.
|
||||
These pages can't be accessed from a web browser, Pico will show a 404 error
|
||||
page instead.
|
||||
|
||||
As a common practice, we recommend you to separate your contents and assets
|
||||
(like images, downloads, etc.). We even deny access to your `content` directory
|
||||
by default. If you want to use some assets (e.g. a image) in one of your content
|
||||
files, use Pico's `assets` folder. You can then access them in your Markdown
|
||||
using the <code>%assets_url%</code> placeholder, for example:
|
||||
<code>!\[Image Title\](%assets_url%/image.png)</code>
|
||||
|
||||
### Text File Markup
|
||||
|
||||
Text files are marked up using [Markdown][] and [Markdown Extra][MarkdownExtra].
|
||||
They can also contain regular HTML.
|
||||
|
||||
At the top of text files you can place a block comment and specify certain meta
|
||||
attributes of the page using [YAML][] (the "YAML header"). For example:
|
||||
|
||||
---
|
||||
Title: Welcome
|
||||
Description: This description will go in the meta description tag
|
||||
Author: Joe Bloggs
|
||||
Date: 2001-04-25
|
||||
Robots: noindex,nofollow
|
||||
Template: index
|
||||
---
|
||||
|
||||
These values will be contained in the `{{ meta }}` variable in themes (see
|
||||
below). Meta headers sometimes have a special meaning: For instance, Pico not
|
||||
only passes through the `Date` meta header, but rather evaluates it to really
|
||||
"understand" when this page was created. This comes into play when you want to
|
||||
sort your pages not just alphabetically, but by date. Another example is the
|
||||
`Template` meta header: It controls what Twig template Pico uses to display
|
||||
this page (e.g. if you add `Template: blog`, Pico uses `blog.twig`).
|
||||
|
||||
In an attempt to separate contents and styling, we recommend you to not use
|
||||
inline CSS in your Markdown files. You should rather add appropriate CSS
|
||||
classes to your theme. For example, you might want to add some CSS classes to
|
||||
your theme to rule how much of the available space a image should use (e.g.
|
||||
`img.small { width: 80%; }`). You can then use these CSS classes in your
|
||||
Markdown files, for example:
|
||||
<code>!\[Image Title\](%assets_url%/image.png) {.small}</code>
|
||||
|
||||
There are also certain variables that you can use in your text files:
|
||||
|
||||
* <code>%site_title%</code> - The title of your Pico site
|
||||
* <code>%base_url%</code> - The URL to your Pico site; internal links
|
||||
can be specified using <code>%base_url%?sub/page</code>
|
||||
* <code>%theme_url%</code> - The URL to the currently used theme
|
||||
* <code>%assets_url%</code> - The URL to Pico's `assets` directory
|
||||
* <code>%themes_url%</code> - The URL to Pico's `themes` directory;
|
||||
don't confuse this with <code>%theme_url%</code>
|
||||
* <code>%plugins_url%</code> - The URL to Pico's `plugins` directory
|
||||
* <code>%version%</code> - Pico's current version string (e.g. `2.0.0`)
|
||||
* <code>%meta.*%</code> - Access any meta variable of the current
|
||||
page, e.g. <code>%meta.author%</code> is replaced with `Joe Bloggs`
|
||||
* <code>%config.*%</code> - Access any scalar config variable,
|
||||
e.g. <code>%config.theme%</code> is replaced with `default`
|
||||
|
||||
### Blogging
|
||||
|
||||
Pico is not blogging software - but makes it very easy for you to use it as a
|
||||
blog. You can find many plugins out there implementing typical blogging
|
||||
features like authentication, tagging, pagination and social plugins. See the
|
||||
below Plugins section for details.
|
||||
|
||||
If you want to use Pico as a blogging software, you probably want to do
|
||||
something like the following:
|
||||
|
||||
1. Put all your blog articles in a separate `blog` folder in your `content`
|
||||
directory. All these articles should have a `Date` meta header.
|
||||
2. Create a `blog.md` or `blog/index.md` in your `content` directory. Add
|
||||
`Template: blog-index` to the YAML header of this page. It will later show a
|
||||
list of all your blog articles (see step 3).
|
||||
3. Create the new Twig template `blog-index.twig` (the file name must match the
|
||||
`Template` meta header from Step 2) in your theme directory. This template
|
||||
probably isn't very different from your default `index.twig` (i.e. copy
|
||||
`index.twig`), it will create a list of all your blog articles. Add the
|
||||
following Twig snippet to `blog-index.twig` near `{{ content }}`:
|
||||
```
|
||||
{% for page in pages("blog")|sort_by("time")|reverse if not page.hidden %}
|
||||
<div class="post">
|
||||
<h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
|
||||
<p class="date">{{ page.date_formatted }}</p>
|
||||
<p class="excerpt">{{ page.description }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
Pico is highly customizable in two different ways: On the one hand you can
|
||||
change Pico's appearance by using themes, on the other hand you can add new
|
||||
functionality by using plugins. Doing the former includes changing Pico's HTML,
|
||||
CSS and JavaScript, the latter mostly consists of PHP programming.
|
||||
|
||||
This is all Greek to you? Don't worry, you don't have to spend time on these
|
||||
techie talk - it's very easy to use one of the great themes or plugins others
|
||||
developed and released to the public. Please refer to the next sections for
|
||||
details.
|
||||
|
||||
### Themes
|
||||
|
||||
You can create themes for your Pico installation in the `themes` folder. Pico
|
||||
uses [Twig][] for template rendering. You can select your theme by setting the
|
||||
`theme` option in `config/config.yml` to the name of your theme folder.
|
||||
|
||||
[Pico's default theme][PicoTheme] isn't really intended to be used for a
|
||||
productive website, it's rather a starting point for creating your own theme.
|
||||
If the default theme isn't sufficient for you, and you don't want to create
|
||||
your own theme, you can use one of the great themes third-party developers and
|
||||
designers created in the past. As with plugins, you can find themes in
|
||||
[our Wiki][WikiThemes] and on [our website][OfficialThemes].
|
||||
|
||||
All themes must include an `index.twig` file to define the HTML structure of
|
||||
the theme, and a `pico-theme.yml` to set the necessary config parameters. Just
|
||||
refer to Pico's default theme as an example. You can use different templates
|
||||
for different content files by specifying the `Template` meta header. Simply
|
||||
add e.g. `Template: blog` to the YAML header of a content file and Pico will
|
||||
use the `blog.twig` template in your theme folder to display the page.
|
||||
|
||||
Below are the Twig variables that are available to use in themes. Please note
|
||||
that URLs (e.g. `{{ base_url }}`) never include a trailing slash.
|
||||
|
||||
* `{{ site_title }}` - Shortcut to the site title (see `config/config.yml`)
|
||||
* `{{ config }}` - Contains the values you set in `config/config.yml`
|
||||
(e.g. `{{ config.theme }}` becomes `default`)
|
||||
* `{{ base_url }}` - The URL to your Pico site; use Twig's `link` filter to
|
||||
specify internal links (e.g. `{{ "sub/page"|link }}`),
|
||||
this guarantees that your link works whether URL rewriting
|
||||
is enabled or not
|
||||
* `{{ theme_url }}` - The URL to the currently active theme
|
||||
* `{{ assets_url }}` - The URL to Pico's `assets` directory
|
||||
* `{{ themes_url }}` - The URL to Pico's `themes` directory; don't confuse this
|
||||
with `{{ theme_url }}`
|
||||
* `{{ plugins_url }}` - The URL to Pico's `plugins` directory
|
||||
* `{{ version }}` - Pico's current version string (e.g. `%version%`)
|
||||
* `{{ meta }}` - Contains the meta values of the current page
|
||||
* `{{ meta.title }}` - The `Title` YAML header
|
||||
* `{{ meta.description }}` - The `Description` YAML header
|
||||
* `{{ meta.author }}` - The `Author` YAML header
|
||||
* `{{ meta.date }}` - The `Date` YAML header
|
||||
* `{{ meta.date_formatted }}` - The formatted date of the page as specified
|
||||
by the `date_format` parameter in your
|
||||
`config/config.yml`
|
||||
* `{{ meta.time }}` - The [Unix timestamp][UnixTimestamp] derived from the
|
||||
`Date` YAML header
|
||||
* `{{ meta.robots }}` - The `Robots` YAML header
|
||||
* ...
|
||||
* `{{ content }}` - The content of the current page after it has been processed
|
||||
through Markdown
|
||||
* `{{ previous_page }}` - The data of the previous page, relative to
|
||||
`current_page`
|
||||
* `{{ current_page }}` - The data of the current page; refer to the "Pages"
|
||||
section below for details
|
||||
* `{{ next_page }}` - The data of the next page, relative to `current_page`
|
||||
|
||||
To call assets from your theme, use `{{ theme_url }}`. For instance, to include
|
||||
the CSS file `themes/my_theme/example.css`, add
|
||||
`<link rel="stylesheet" href="{{ theme_url }}/example.css" type="text/css" />`
|
||||
to your `index.twig`. This works for arbitrary files in your theme's folder,
|
||||
including images and JavaScript files.
|
||||
|
||||
Please note that Twig escapes HTML in all strings before outputting them. So
|
||||
for example, if you add `headline: My <strong>favorite</strong> color` to the
|
||||
YAML header of a page and output it using `{{ meta.headline }}`, you'll end up
|
||||
seeing `My <strong>favorite</strong> color` - yes, including the markup! To
|
||||
actually get it parsed, you must use `{{ meta.headline|raw }}` (resulting in
|
||||
the expected <code>My **favorite** color</code>). Notable exceptions to this
|
||||
are Pico's `content` variable (e.g. `{{ content }}`), Pico's `content` filter
|
||||
(e.g. `{{ "sub/page"|content }}`), and Pico's `markdown` filter, they all are
|
||||
marked as HTML safe.
|
||||
|
||||
#### Dealing with pages
|
||||
|
||||
There are several ways to access Pico's pages list. You can access the current
|
||||
page's data using the `current_page` variable, or use the `prev_page` and/or
|
||||
`next_page` variables to access the respective previous/next page in Pico's
|
||||
pages list. But more importantly there's the `pages()` function. No matter how
|
||||
you access a page, it will always consist of the following data:
|
||||
|
||||
* `{{ id }}` - The relative path to the content file (unique ID)
|
||||
* `{{ url }}` - The URL to the page
|
||||
* `{{ title }}` - The title of the page (`Title` YAML header)
|
||||
* `{{ description }}` - The description of the page (`Description` YAML header)
|
||||
* `{{ author }}` - The author of the page (`Author` YAML header)
|
||||
* `{{ date }}` - The date of the page (`Date` YAML header)
|
||||
* `{{ date_formatted }}` - The formatted date of the page as specified by the
|
||||
`date_format` parameter in your `config/config.yml`
|
||||
* `{{ time }}` - The [Unix timestamp][UnixTimestamp] derived from the page's
|
||||
date
|
||||
* `{{ raw_content }}` - The raw, not yet parsed contents of the page; use the
|
||||
filter to get the parsed contents of a page by passing
|
||||
its unique ID (e.g. `{{ "sub/page"|content }}`)
|
||||
* `{{ meta }}` - The meta values of the page (see global `{{ meta }}` above)
|
||||
* `{{ prev_page }}` - The data of the respective previous page
|
||||
* `{{ next_page }}` - The data of the respective next page
|
||||
* `{{ tree_node }}` - The page's node in Pico's page tree; check out Pico's
|
||||
[page tree documentation][FeaturesPageTree] for details
|
||||
|
||||
Pico's `pages()` function is the best way to access all of your site's pages.
|
||||
It uses Pico's page tree to easily traverse a subset of Pico's pages list. It
|
||||
allows you to filter pages and to build recursive menus (like dropdowns). By
|
||||
default, `pages()` returns a list of all main pages (e.g. `content/page.md` and
|
||||
`content/sub/index.md`, but not `content/sub/page.md` or `content/index.md`).
|
||||
If you want to return all pages below a specific folder (e.g. `content/blog/`),
|
||||
pass the folder name as first parameter to the function (e.g. `pages("blog")`).
|
||||
Naturally you can also pass variables to the function. For example, to return a
|
||||
list of all child pages of the current page, use `pages(current_page.id)`.
|
||||
Check out the following code snippet:
|
||||
|
||||
<section class="articles">
|
||||
{% for page in pages(current_page.id) if not page.hidden %}
|
||||
<article>
|
||||
<h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
|
||||
{{ page.id|content }}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
The `pages()` function is very powerful and also allows you to return not just
|
||||
a page's child pages by passing the `depth` and `depthOffset` params. For
|
||||
example, if you pass `pages(depthOffset=-1)`, the list will also include Pico's
|
||||
main index page (i.e. `content/index.md`). This one is commonly used to create
|
||||
a theme's main navigation. If you want to learn more, head over to Pico's
|
||||
complete [`pages()` function documentation][FeaturesPagesFunction].
|
||||
|
||||
If you want to access the data of a particular page, use Pico's `pages`
|
||||
variable. Just take `content/_meta.md` in Pico's sample contents for an
|
||||
example: `content/_meta.md` contains some meta data you might want to use in
|
||||
your theme. If you want to output the page's `tagline` meta value, use
|
||||
`{{ pages["_meta"].meta.logo }}`. Don't ever try to use Pico's `pages` variable
|
||||
as an replacement for Pico's `pages()` function. Its usage looks very similar,
|
||||
it will kinda work and you might even see it being used in old themes, but be
|
||||
warned: It slows down Pico. Always use Pico's `pages()` function when iterating
|
||||
Pico's page list (e.g. `{% for page in pages() %}…{% endfor %}`).
|
||||
|
||||
#### Twig filters and functions
|
||||
|
||||
Additional to [Twig][]'s extensive list of filters, functions and tags, Pico
|
||||
also provides some useful additional filters and functions to make theming
|
||||
even easier.
|
||||
|
||||
* Pass the unique ID of a page to the `link` filter to return the page's URL
|
||||
(e.g. `{{ "sub/page"|link }}` gets `%base_url%?sub/page`).
|
||||
* You can replace URL placeholders (like <code>%base_url%</code>) in
|
||||
arbitrary strings using the `url` filter. This is helpful together with meta
|
||||
variables, e.g. if you add <code>image: %assets_url%/stock.jpg</code>
|
||||
to the YAML header of a page, `{{ meta.image|url }}` will return
|
||||
`%assets_url%/stock.jpg`.
|
||||
* To get the parsed contents of a page, pass its unique ID to the `content`
|
||||
filter (e.g. `{{ "sub/page"|content }}`).
|
||||
* You can parse any Markdown string using the `markdown` filter. For example,
|
||||
you might use Markdown in the `description` meta variable and later parse it
|
||||
in your theme using `{{ meta.description|markdown }}`. You can also pass meta
|
||||
data as parameter to replace <code>%meta.*%</code> placeholders
|
||||
(e.g. `{{ "Written by *%meta.author%*"|markdown(meta) }}` yields "Written by
|
||||
*John Doe*"). However, please note that all contents will be wrapped inside
|
||||
HTML paragraph elements (i.e. `<p>…</p>`). If you want to parse just a single
|
||||
line of Markdown markup, pass the `singleLine` param to the `markdown` filter
|
||||
(e.g. `{{ "This really is a *single* line"|markdown(singleLine=true) }}`).
|
||||
* Arrays can be sorted by one of its keys using the `sort_by` filter
|
||||
(e.g. `{% for page in pages|sort_by([ 'meta', 'nav' ]) %}...{% endfor %}`
|
||||
iterates through all pages, ordered by the `nav` meta header; please note the
|
||||
`[ 'meta', 'nav' ]` part of the example, it instructs Pico to sort by
|
||||
`page.meta.nav`). Items which couldn't be sorted are moved to the bottom of
|
||||
the array; you can specify `bottom` (move items to bottom; default), `top`
|
||||
(move items to top), `keep` (keep original order) or `remove` (remove items)
|
||||
as second parameter to change this behavior.
|
||||
* You can return all values of a given array key using the `map` filter
|
||||
(e.g. `{{ pages|map("title") }}` returns all page titles).
|
||||
* Use the `url_param` and `form_param` Twig functions to access HTTP GET (i.e.
|
||||
a URL's query string like `?some-variable=my-value`) and HTTP POST (i.e. data
|
||||
of a submitted form) parameters. This allows you to implement things like
|
||||
pagination, tags and categories, dynamic pages, and even more - with pure
|
||||
Twig! Simply head over to our [introductory page for accessing HTTP
|
||||
parameters][FeaturesHttpParams] for details.
|
||||
|
||||
### Plugins
|
||||
|
||||
#### Plugins for users
|
||||
|
||||
Officially tested plugins can be found at http://picocms.org/plugins/, but
|
||||
there are many awesome third-party plugins out there! A good start point for
|
||||
discovery is [our Wiki][WikiPlugins].
|
||||
|
||||
Pico makes it very easy for you to add new features to your website using
|
||||
plugins. Just like Pico, you can install plugins either using [Composer][]
|
||||
(e.g. `composer require phrozenbyte/pico-file-prefixes`), or manually by
|
||||
uploading the plugin's file (just for small plugins consisting of a single file,
|
||||
e.g. `PicoFilePrefixes.php`) or directory (e.g. `PicoFilePrefixes`) to your
|
||||
`plugins` directory. We always recommend you to use Composer whenever possible,
|
||||
because it makes updating both Pico and your plugins way easier. Anyway,
|
||||
depending on the plugin you want to install, you may have to go through some
|
||||
more steps (e.g. specifying config variables) to make the plugin work. Thus you
|
||||
should always check out the plugin's docs or `README.md` file to learn the
|
||||
necessary steps.
|
||||
|
||||
Plugins which were written to work with Pico 1.0 and later can be enabled and
|
||||
disabled through your `config/config.yml`. If you want to e.g. disable the
|
||||
`PicoDeprecated` plugin, add the following line to your `config/config.yml`:
|
||||
`PicoDeprecated.enabled: false`. To force the plugin to be enabled, replace
|
||||
`false` by `true`.
|
||||
|
||||
#### Plugins for developers
|
||||
|
||||
You're a plugin developer? We love you guys! You can find tons of information
|
||||
about how to develop plugins at http://picocms.org/development/. If you've
|
||||
developed a plugin before and want to upgrade it to Pico 2.0, refer to the
|
||||
[upgrade section of the docs][PluginUpgrade].
|
||||
|
||||
## Config
|
||||
|
||||
Configuring Pico really is stupidly simple: Just create a `config/config.yml`
|
||||
to override the default Pico settings (and add your own custom settings). Take
|
||||
a look at the `config/config.yml.template` for a brief overview of the
|
||||
available settings and their defaults. To override a setting, simply copy the
|
||||
line from `config/config.yml.template` to `config/config.yml` and set your
|
||||
custom value.
|
||||
|
||||
But we didn't stop there. Rather than having just a single config file, you can
|
||||
use a arbitrary number of config files. Simply create a `.yml` file in Pico's
|
||||
`config` dir and you're good to go. This allows you to add some structure to
|
||||
your config, like a separate config file for your theme (`config/my_theme.yml`).
|
||||
|
||||
Please note that Pico loads config files in a special way you should be aware
|
||||
of. First of all it loads the main config file `config/config.yml`, and then
|
||||
any other `*.yml` file in Pico's `config` dir in alphabetical order. The file
|
||||
order is crucial: Config values which have been set already, cannot be
|
||||
overwritten by a succeeding file. For example, if you set `site_title: Pico` in
|
||||
`config/a.yml` and `site_title: My awesome site!` in `config/b.yml`, your site
|
||||
title will be "Pico".
|
||||
|
||||
Since YAML files are plain text files, users might read your Pico config by
|
||||
navigating to `%base_url%/config/config.yml`. This is no problem in the first
|
||||
place, but might get a problem if you use plugins that require you to store
|
||||
security-relevant data in the config (like credentials). Thus you should
|
||||
*always* make sure to configure your webserver to deny access to Pico's
|
||||
`config` dir. Just refer to the "URL Rewriting" section below. By following the
|
||||
instructions, you will not just enable URL rewriting, but also deny access to
|
||||
Pico's `config` dir.
|
||||
|
||||
### URL Rewriting
|
||||
|
||||
Pico's default URLs (e.g. %base_url%/?sub/page) already are very user-friendly.
|
||||
Additionally, Pico offers you a URL rewrite feature to make URLs even more
|
||||
user-friendly (e.g. %base_url%/sub/page). Below you'll find some basic info
|
||||
about how to configure your webserver proberly to enable URL rewriting.
|
||||
|
||||
#### Apache
|
||||
|
||||
If you're using the Apache web server, URL rewriting probably already is
|
||||
enabled - try it yourself, click on the [second URL](%base_url%/sub/page). If
|
||||
URL rewriting doesn't work (you're getting `404 Not Found` error messages from
|
||||
Apache), please make sure to enable the [`mod_rewrite` module][ModRewrite] and
|
||||
to enable `.htaccess` overrides. You might have to set the
|
||||
[`AllowOverride` directive][AllowOverride] to `AllowOverride All` in your
|
||||
virtual host config file or global `httpd.conf`/`apache.conf`. Assuming
|
||||
rewritten URLs work, but Pico still shows no rewritten URLs, force URL
|
||||
rewriting by setting `rewrite_url: true` in your `config/config.yml`. If you
|
||||
rather get a `500 Internal Server Error` no matter what you do, try removing
|
||||
the `Options` directive from Pico's `.htaccess` file (it's the last line).
|
||||
|
||||
#### Nginx
|
||||
|
||||
If you're using Nginx, you can use the following config to enable URL rewriting
|
||||
(lines `5` to `8`) and denying access to Pico's internal files (lines `1` to
|
||||
`3`). You'll need to adjust the path (`/pico` on lines `1`, `2`, `5` and `7`)
|
||||
to match your installation directory. Additionally, you'll need to enable URL
|
||||
rewriting by setting `rewrite_url: true` in your `config/config.yml`. The Nginx
|
||||
config should provide the *bare minimum* you need for Pico. Nginx is a very
|
||||
extensive subject. If you have any trouble, please read through our
|
||||
[Nginx config docs][NginxConfig].
|
||||
|
||||
```
|
||||
location ~ ^/pico/((config|content|vendor|composer\.(json|lock|phar))(/|$)|(.+/)?\.(?!well-known(/|$))) {
|
||||
try_files /pico/index.php$is_args$args =404;
|
||||
}
|
||||
|
||||
location /pico/ {
|
||||
index index.php;
|
||||
try_files $uri $uri/ /pico/index.php$is_args$args;
|
||||
}
|
||||
```
|
||||
|
||||
#### Lighttpd
|
||||
|
||||
Pico runs smoothly on Lighttpd. You can use the following config to enable URL
|
||||
rewriting (lines `6` to `9`) and denying access to Pico's internal files (lines
|
||||
`1` to `4`). Make sure to adjust the path (`/pico` on lines `2`, `3` and `7`)
|
||||
to match your installation directory, and let Pico know about available URL
|
||||
rewriting by setting `rewrite_url: true` in your `config/config.yml`. The
|
||||
config below should provide the *bare minimum* you need for Pico.
|
||||
|
||||
```
|
||||
url.rewrite-once = (
|
||||
"^/pico/(config|content|vendor|composer\.(json|lock|phar))(/|$)" => "/pico/index.php",
|
||||
"^/pico/(.+/)?\.(?!well-known(/|$))" => "/pico/index.php"
|
||||
)
|
||||
|
||||
url.rewrite-if-not-file = (
|
||||
"^/pico(/|$)" => "/pico/index.php"
|
||||
)
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
For more help have a look at the Pico documentation at http://picocms.org/docs.
|
||||
|
||||
[Pico]: http://picocms.org/
|
||||
[PicoTheme]: https://github.com/picocms/pico-theme
|
||||
[SampleContents]: https://github.com/picocms/Pico/tree/master/content-sample
|
||||
[Markdown]: http://daringfireball.net/projects/markdown/syntax
|
||||
[MarkdownExtra]: https://michelf.ca/projects/php-markdown/extra/
|
||||
[YAML]: https://en.wikipedia.org/wiki/YAML
|
||||
[Twig]: http://twig.sensiolabs.org/documentation
|
||||
[UnixTimestamp]: https://en.wikipedia.org/wiki/Unix_timestamp
|
||||
[Composer]: https://getcomposer.org/
|
||||
[FeaturesHttpParams]: http://picocms.org/in-depth/features/http-params/
|
||||
[FeaturesPageTree]: http://picocms.org/in-depth/features/page-tree/
|
||||
[FeaturesPagesFunction]: http://picocms.org/in-depth/features/pages-function/
|
||||
[WikiThemes]: https://github.com/picocms/Pico/wiki/Pico-Themes
|
||||
[WikiPlugins]: https://github.com/picocms/Pico/wiki/Pico-Plugins
|
||||
[OfficialThemes]: http://picocms.org/themes/
|
||||
[PluginUpgrade]: http://picocms.org/development/#upgrade
|
||||
[ModRewrite]: https://httpd.apache.org/docs/current/mod/mod_rewrite.html
|
||||
[AllowOverride]: https://httpd.apache.org/docs/current/mod/core.html#allowoverride
|
||||
[NginxConfig]: http://picocms.org/in-depth/nginx/
|
||||
52
content/doc.md
Normal file
52
content/doc.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
Title: Doc
|
||||
Description: Documentation Picobook is a template for PICO CMS , blazing fast, flat file CMS.
|
||||
|
||||
Cover: https://axcora.my.id/pena/img/pembuatan%20website%20murah%20terbaik%20terbaru.jpg
|
||||
|
||||
---
|
||||
|
||||
|
||||
Picobook is a work and run using pico cms, so make sure for first you have download pico cms, after download pico cms you can download picobook themes template, and you must need to have domain + cloud shared hosting website you can order domain and hosting first for install picobook and pico cms. then download source code file.
|
||||
|
||||
|
||||
|
||||
+ [download pico cms](https://picocms.org/download/)
|
||||
+ [download picobook](https://github.com/mesinkasir/picobook)
|
||||
|
||||
|
||||
Now you can login on hosting panel with your account, and upload pico cms on your project, then you can open themes folder and upload picobook source code in here.
|
||||
|
||||
|
||||
|
||||
For first we need to change default template , so you can open on config file, and create new file name it with config.yml file, open config.yml file now you can theme: default to theme: picobook and save it.
|
||||
|
||||
|
||||
Congratulations now you have successfully install picobook on your website project.
|
||||
|
||||
|
||||
What next ??
|
||||
|
||||
|
||||
1. Article Content
|
||||
|
||||
- For create and update or delete article you need to open content folder, for create new you can create new folder and name it with your link url article page with md files, for example about.md
|
||||
- Write article and update or edit with markdown , for edit and update article you can edit your page.md then edit with your needed, for delete just delete file.
|
||||
- Learn simple markdown : if you need to learn markdown [visit here →](https://axcora.my.id/piconic/panduan)
|
||||
|
||||
|
||||
|
||||
|
||||
2. Hide article form navbar
|
||||
|
||||
- For hidden page from navbar , you need to insert `Hiden: true` on your meta post article page.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. Change Contact Link
|
||||
- If you need to change contact on navbar , you can open content folder and change _meta.md files, now you can search contact: and change title,url , and fontawesome icon then save it for update contact information.
|
||||
|
||||
|
||||
If you need another template built with pico cms so you can download in here, [download pico template →](https://axcora.my.id/pico/picobook/demo/theme)
|
||||
26
content/index.md
Normal file
26
content/index.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
Title: Home
|
||||
Description: Picobook is a template for PICO CMS , blazing fast, flat file CMS.
|
||||
Cover: https://axcora.my.id/data/uploads/pico/piconic/pico-cms.jpg
|
||||
---
|
||||
|
||||
Picobook is a template themes for pico cms, clean design and fast , you can download it and use this template themes for free.
|
||||
just download and upload on your cloud shared host , Download this template now
|
||||
|
||||
[Download Now →](https://github.com/mesinkasir/picobook)
|
||||
|
||||
or you can clone from github repo with run `git clone https://github.com/mesinkasir/picobook.git`
|
||||
|
||||
|
||||
Read Documentation here [Picobook Documentation →](https://axcora.my.id/pico/picobook/demo/doc)
|
||||
|
||||
|
||||
Buy me a coffee ☕️ ❤️ ✌🏻
|
||||
|
||||
|
||||
with moneygram or western union
|
||||
|
||||
+ BANK CENTRAL ASIA
|
||||
+ ACCOUNT NO : 0181884109
|
||||
+ ACCOUNT NAME : SUCI CHANIFAH
|
||||
+ IBAN/SWIFT CODE : CENAIDJA
|
||||
173
content/style.md
Normal file
173
content/style.md
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
---
|
||||
title: Style
|
||||
Description: Pico is a stupidly simple, blazing fast, flat file CMS.
|
||||
Cover: https://picocms.org/themes/images/fullsize/axcorapico.png
|
||||
|
||||
---
|
||||
|
||||
Theme Styling Test
|
||||
==================
|
||||
|
||||
This is `theme.md` in Pico's content directory. This page doesn't show up in the website's menu due to `hidden: true` in the page's YAML header. The purpose of this page is to aid theme development - below you'll find basically every format that is possible with Markdown. If you develop a theme, you should make sure that all examples below show decent.
|
||||
|
||||
Text
|
||||
----
|
||||
|
||||
**Lorem ipsum dolor sit amet,** consectetur adipisici elit, *sed eiusmod tempor* incidunt ut labore et dolore magna aliqua.[^1] ~~Ut enim ad minim veniam,~~ quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.[^2] [Quis aute iure reprehenderit][Link] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. `Excepteur` sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
[](%base_url% "Pico Logo") {.image .small .float-right}
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
|
||||
Headings
|
||||
--------
|
||||
|
||||
# h1
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
## h2
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
### h3
|
||||
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
|
||||
#### h4
|
||||
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
|
||||
##### h5
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
|
||||
|
||||
###### h6
|
||||
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
|
||||
Horizontal line
|
||||
---------------
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
---
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
List
|
||||
----
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
* Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
2. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
3. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
* Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
- Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
1. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
|
||||
2. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
1. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
||||
2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
3. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
||||
|
||||
Definition list
|
||||
---------------
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
Duis autem
|
||||
: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
|
||||
Lorem ipsum dolor sit amet
|
||||
: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
Ut wisi enim ad minim veniam
|
||||
: Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
|
||||
Blockquote
|
||||
----------
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
|
||||
> molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
|
||||
> eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
|
||||
> zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
|
||||
> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
|
||||
> tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
>
|
||||
> > Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
> > lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
|
||||
> > dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
> > dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
|
||||
> > dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
|
||||
> > feugait nulla facilisi.
|
||||
>
|
||||
> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
|
||||
> doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||
> laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
|
||||
> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
|
||||
> ea commodo consequat.
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
|
||||
|
||||
Code block
|
||||
----------
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>This is a title</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello world!</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
Table
|
||||
-----
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
Lorem ipsum | Duis autem vel eum | Ut wisi enim ad minim veniam
|
||||
----------- | ------------------ | ----------------------------
|
||||
**Duis autem vel eum iriure dolor** in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | *Lorem ipsum dolor sit amet,* consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ~~Ut wisi enim ad minim veniam,~~ quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
[Duis autem vel eum iriure dolor][Link] in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | `Nam liber tempor` cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. | | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
|
||||
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
|
||||
Forms
|
||||
-----
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
*[Lorem ipsum]: Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
|
||||
|
||||
[Link]: %base_url% "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat."
|
||||
|
||||
[^1]: Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
[^2]: Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
10
content/theme.md
Normal file
10
content/theme.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
Title: Theme
|
||||
Description: Picobook is a template for PICO CMS , blazing fast, flat file CMS.
|
||||
Cover: https://axcora.my.id/data/uploads/pico/piconic/piconic-source-code-for-built-website-mobilweb-and-android-mobile-application-3.jpg
|
||||
---
|
||||
|
||||
Another template using pico cms free download.
|
||||
+ Piconic : is a modern mobile website build with pico cms and ionic mobile framework, [test demo and download →](https://axcora.my.id/piconic/demo)
|
||||
+ AxcoraPico : Clean design all about pico build with pico cms and pico css , [test demo and download →](https://axcora.my.id/pico/demo)
|
||||
+ Pena : A blogger template with SEO , [test demo and download →](https://axcora.my.id/pena/)
|
||||
44
picobook/README.md
Normal file
44
picobook/README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# PICOBOOK pico cms template
|
||||
|
||||
------------------------
|
||||
|
||||
Picobook is a template for PICO CMS , blazing fast, flat file CMS.
|
||||
|
||||
.png)
|
||||
|
||||
Test drive demo 🚀 : [https://axcora.my.id/piconic/demo/](https://axcora.my.id/pico/picobook/demo/)
|
||||
|
||||
Picobook Home 💻 : [https://axcora.my.id/piconic/](https://axcora.my.id/pico/picobook)
|
||||
|
||||
Video demo 📹 : [https://youtu.be/GPOQzSnGqXw](https://youtu.be/GPOQzSnGqXw)
|
||||
|
||||
|
||||
---------------------------------
|
||||
|
||||
.png)
|
||||
|
||||
Recipes :
|
||||
+ Pico CMS
|
||||
+ Bootstrap
|
||||
+ Axcora
|
||||
|
||||
|
||||
.png)
|
||||
|
||||
--------------------------------------
|
||||
|
||||
|
||||
Installation need to download and install
|
||||
+ [Pico cms](https://github.com/picocms/Pico)
|
||||
+ [Picobook template](https://github.com/mesinkasir/picobook)
|
||||
|
||||
Work :
|
||||
+ Download and extract pico cms on your cloud host
|
||||
+ Download and extract picoboook template on themes folder
|
||||
+ open config/config.yml change theme:default to theme:picobook
|
||||
+ change contact nav page : open content/_meta.md
|
||||
+ open content folder to see example article format
|
||||
|
||||
|
||||
Happy codding !!
|
||||
|
||||
12
picobook/article.twig
Normal file
12
picobook/article.twig
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<div class="col-md-11 col-9 p-1">
|
||||
<div class="p-0">
|
||||
<div class="card">
|
||||
<img src="{{ meta.cover }}" class="card-img-top" alt="{{ meta.title }}">
|
||||
<div class="card-body">
|
||||
<h3>{{ meta.title }}</h3>
|
||||
<h5>{{ meta.description }}</h5>
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
38
picobook/composer.json
Normal file
38
picobook/composer.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "picocms/pico-theme",
|
||||
"type": "pico-theme",
|
||||
"description": "This is Pico's official default theme. Pico is a stupidly simple, blazing fast, flat file CMS.",
|
||||
"keywords": [ "pico", "picocms", "picocms-theme", "pico-theme", "default-theme" ],
|
||||
"homepage": "http://picocms.org/",
|
||||
"license": "MIT",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Daniel Rudolf",
|
||||
"email": "picocms.org@daniel-rudolf.de",
|
||||
"role": "Lead Developer"
|
||||
},
|
||||
{
|
||||
"name": "The Pico Community",
|
||||
"homepage": "http://picocms.org/"
|
||||
},
|
||||
{
|
||||
"name": "Contributors",
|
||||
"homepage": "https://github.com/picocms/pico-theme/graphs/contributors"
|
||||
}
|
||||
],
|
||||
"support": {
|
||||
"docs": "http://picocms.org/themes/default/",
|
||||
"issues": "https://github.com/picocms/pico-theme/issues",
|
||||
"source": "https://github.com/picocms/pico-theme"
|
||||
},
|
||||
"require": {
|
||||
"picocms/pico": "self.version"
|
||||
},
|
||||
"extra": {
|
||||
"installer-name": "default",
|
||||
"branch-alias": {
|
||||
"dev-master": "2.1.x-dev",
|
||||
"dev-pico-3.0": "3.0.x-dev"
|
||||
}
|
||||
}
|
||||
}
|
||||
11
picobook/css/style.css
Normal file
11
picobook/css/style.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500&display=swap');
|
||||
html,body {
|
||||
font-family: 'Hind Siliguri', sans-serif;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
1
picobook/footer.twig
Normal file
1
picobook/footer.twig
Normal file
|
|
@ -0,0 +1 @@
|
|||
</div><div class="col-12 text-center"><p><a href="{{ site.url }}">{{ site_title }}</a> build with <a href="https://picocms.org">Pico</a> made with 💘 by <a href="https://axcora.my.id/pico/">axcora</a>.</p></div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body></html>
|
||||
24
picobook/header.twig
Normal file
24
picobook/header.twig
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
|
||||
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
|
||||
{% if meta.description %}
|
||||
<meta name="description" content="{{ meta.description|striptags }}" />
|
||||
{% endif %}
|
||||
{% if meta.robots %}
|
||||
<meta name="robots" content="{{ meta.robots }}" />
|
||||
{% endif %}
|
||||
|
||||
{% if current_page %}
|
||||
<link rel="canonical" href="{{ current_page.url }}" />
|
||||
{% endif %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link href="{{ theme_url }}/css/style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
1
picobook/img/pico-white.svg
Normal file
1
picobook/img/pico-white.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#ffffff" transform="translate(-138.85 -140.95)"/></svg>
|
||||
|
After Width: | Height: | Size: 353 B |
1
picobook/img/pico.svg
Normal file
1
picobook/img/pico.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#2eae9b" transform="translate(-138.85 -140.95)"/></svg>
|
||||
|
After Width: | Height: | Size: 353 B |
4
picobook/index.twig
Normal file
4
picobook/index.twig
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{{ include( 'header.twig' ) }}
|
||||
{{ include( 'nav.twig' ) }}
|
||||
{{ include( 'article.twig' ) }}
|
||||
{{ include( 'footer.twig' ) }}
|
||||
32
picobook/nav.twig
Normal file
32
picobook/nav.twig
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<div class="d-flex flex-column flex-shrink-0 col-md-1 col-2 p-3 fixed-top" id="myTab" role="tablist">
|
||||
|
||||
|
||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center border">
|
||||
<li class="p-1 border-bottom bg-dark">
|
||||
{% if pages["_meta"].meta.logo %}
|
||||
<a class="text-light text-center p-1 rounded" href="{{ "index"|link }}">
|
||||
<img src="{{ pages["_meta"].meta.logo|url }}" width="45" alt="{{ site_title }}" />
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
|
||||
<li class="bg-white">
|
||||
<a href="{{ page.url }}" class="nav-link py-3 border-bottom text-dark" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<i class="fa-solid fa-book fa-2x"></i><br/><small><small>{{ page.title }}</small></small>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="bg-dark">
|
||||
<a href="#" class="align-items-center justify-content-center p-3 link-dark btn btn-dark col-12 text-white " id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa-solid fa-headset fa-2x"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
|
||||
{% for contact in pages["_meta"].meta.contact %}
|
||||
<li><a class="dropdown-item" href="{{ contact.url }}"><i class="{{ contact.icon }} text-dark"></i> {{ contact.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-md-1 col-3"></div>
|
||||
16
picobook/pico-theme.yml
Normal file
16
picobook/pico-theme.yml
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
api_version: 3 # Use Pico's latest API version for themes
|
||||
|
||||
meta: # Register meta headers used by this theme
|
||||
Logo: logo # The URL to your website's logo (value is passed to Pico's "url" Twig filter)
|
||||
Tagline: tagline # Your website's tag line, shown right below your site title (supports Markdown)
|
||||
Contact: contact # Your website's tag line, shown right below your site title (supports Markdown)
|
||||
Icon: icon # Your website's tag line, shown right below your site title (supports Markdown)
|
||||
Cover: cover # A list of social icons that will be shown in your website's footer;
|
||||
# You must specify a "title", "url" and "icon" per entry
|
||||
|
||||
twig_config: # Twig template engine config
|
||||
autoescape: html # Let Twig escape variables by default
|
||||
strict_variables: false # If set to true, Twig will bail out when unset variables are being used
|
||||
charset: utf-8 # The charset used by Twig templates
|
||||
|
||||
widescreen: false # Use more horicontal space (i.e. make the site container wider)
|
||||
Loading…
Reference in a new issue