第二には、スクラッチ静的のブログから自分を構築する - テーマの記事を

その他 2019-11-27 18:04:10 訪問数: null

ディレクトリ

我々は成功し、それは使用して、ローカルのブログサイトを構築しているpelicanデフォルトのnotmyideaテーマを、

あなたは覚えていない場合は、この記事を見ることができます：まず、スクラッチ静的のブログから自分を構築-基本。

実際には、pelican多くのオープンソースのライブラリをテーマにした、我々はできるpelicanテーマ倉庫は、プロジェクトに自分の好きなテーマのいずれかを選択します。

http://pelicanthemes.com/サイトがテーマのオンラインプレビューされています。

私が選んだのペリカン-錬金術のテーマを、同社のオンラインDemoです。https://nairobilug.github.io/pelican-alchemy/。

今、私たちのプロジェクトに適用するステップでのステップをしましょう。

1.ダウンロードテーマ

私は少しを通じてかすめるたpelican-alchemy文書とのissue私が最初にそれを決めたので、フォローアップは、いくつかの変更を行うことが可能性が高い考慮して、リストfork自身の倉庫に。

その後、私はプロジェクトのルートディレクトリ内のディレクトリを作成しthemes/、すべてダウンロードしたテーマを保存するために、その後forkの後pelican-alchemyなど、別のサブクローン化された倉庫のカタログに：

λ mkdir themes
λ git submodule add [email protected]:luizyao/pelican-alchemy.git themes/pelican-alchemy

注意：

git submodule add <url> <path>コマンドは、別々のサブ倉庫として指定されたディレクトリに倉庫を追加することです。

よく見ると、あなたは私たちのルートに複数のファイルを検索します：.gitmodulesそれは情報サブ倉庫を記録します。

例えば：私たちのプログラムでは、この文書の内容は以下のとおりです。

[submodule "themes/pelican-alchemy"]
    path = themes/pelican-alchemy
    url = [email protected]:luizyao/pelican-alchemy.git

共通に関連した操作といくつかのサブ倉庫は以下があります。

  • 一緒にサブクローン化倉庫とともに、親倉庫をクローニングする場合：

    git clone --recurse-submodules <URL> <directory>

  • すべてのサブ親倉庫倉庫の状況を表示します。

    λ git submodule status
3381c5031bf30d3b1212619b662898f178d695f1 themes/pelican-alchemy (v2.1-43-g3381c50)

    3381c5031bf30d3b1212619b662898f178d695f1これは、現在で暗号化された文字列。Commit IdSHA-1

  • 削除サブ倉庫：

    git rm <submodule path> && git commit

    そして、手動で削除する.git/modules/<name>/ディレクトリを

あなたが詳細を知りたい場合はgit submodule、コンテンツを、次のことができgit submodule --help、その公式ドキュメントを読んで。

2.使用するテーマ

2.1。基本構成

# pelicanconf.py

# 主题所在的相对目录
THEME = 'themes/pelican-alchemy/alchemy'

# 副标题
SITESUBTITLE = '戒骄戒躁 砥砺前行'

# 头像
SITEIMAGE = '/images/profile.png width=200 height=200'

# 友链
LINKS = (
    ('pytest-chinese-doc', 'https://luizyao.github.io/pytest-chinese-doc/'),
)

# 代码高亮的样式
PYGMENTS_STYLE = 'friendly'

# 使用 Bootswatch 样式：https://bootswatch.com/
BOOTSTRAP_CSS = 'https://cdn.bootcss.com/bootswatch/4.3.1/lux/bootstrap.min.css'

# 生成 sitemap.xml 文件，它是一个对爬虫友好的文件，方便搜索引擎抓取网站页面
DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives', 'sitemap']
SITEMAP_SAVE_AS = 'sitemap.xml'

# 构建后的 html 文件路径和 URL 标识
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{slug}.html'
ARTICLE_SAVE_AS = ARTICLE_URL
DRAFTS_URL = 'drafts/{date:%Y}/{date:%m}/{slug}.html'
DRAFTS_SAVE_AS = ARTICLE_URL
PAGE_URL = 'pages/{slug}.html'
PAGE_SAVE_AS = PAGE_URL

# RSS 订阅
FEED_ALL_RSS = 'feeds/all.rss.xml'

：詳細については、を参照することができますhttps://github.com/nairobilug/pelican-alchemy/wiki/Settings

2.2。高度な設定

2.2.1。設定のサイトアイコン

オンラインツールを通じてhttps://realfavicongenerator.net/はプラットフォームやブラウザの様々な生成するように適合することができますfaviconファイルを：

上に生成されたダウンロードfaviconプロジェクトへのパックとアンパックcontent/extrasディレクトリ：

λ ls content/extras/
android-chrome-192x192.png  favicon.ico         safari-pinned-tab.svg
android-chrome-384x384.png  favicon-16x16.png   site.webmanifest
apple-touch-icon.png        favicon-32x32.png
browserconfig.xml           mstile-150x150.png

テンプレートの修正base.htmlファイルを：

<!-- themes/pelican-alchemy/alchemy/templates/base.html --> 

{% if RFG_FAVICONS %}
  <link rel="apple-touch-icon" href="{{ SITEURL }}/apple-touch-icon.png" sizes="180x180">
  <link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="{{ SITEURL }}/manifest.json">
  <meta name="theme-color" content="#333333">
{% endif %}

<!-- 改成 --> 

{% if RFG_FAVICONS %}
  <link rel="apple-touch-icon" href="{{ SITEURL }}/apple-touch-icon.png" sizes="180x180">
  <link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="{{ SITEURL }}/site.webmanifest">
  <link rel="mask-icon" href="{{ SITEURL }}/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
{% endif %}

変更するpelicanconf.py設定ファイルを：

# pelicanconf.py

# 在构建中，它们会无损的拷贝到 output 的同名目录下
STATIC_PATHS = ['extras', 'images', 'css']

# 构建时，extras/android-chrome-192x192.png文件，拷贝到output/android-chrome-192x192.png，不再是output/extras/android-chrome-192x192.png
EXTRA_PATH_METADATA = {
    'extras/android-chrome-192x192.png': {'path': 'android-chrome-192x192.png'},
    'extras/android-chrome-512x512.png': {'path': 'android-chrome-512x512.png'},
    'extras/apple-touch-icon.png': {'path': 'apple-touch-icon.png'},
    'extras/browserconfig.xml': {'path': 'browserconfig.xml'},
    'extras/favicon-16x16.png': {'path': 'favicon-16x16.png'},
    'extras/favicon-32x32.png': {'path': 'favicon-32x32.png'},
    'extras/favicon.ico': {'path': 'favicon.ico'},
    'extras/manifest.json': {'path': 'manifest.json'},
    'extras/mstile-150x150.png': {'path': 'mstile-150x150.png'},
    'extras/safari-pinned-tab.svg': {'path': 'safari-pinned-tab.svg'},
    # 自定义样式
    'css/custom.css': {'path': 'theme/css/custom.css'},
}

# 自定义样式的URL目录
THEME_CSS_OVERRIDES = ('theme/css/custom.css',)

RFG_FAVICONS = True

2.2.2のアップデートFont Awesomeバージョン

pelican-alchemy使用Font Awesome 4.7.0バージョン、あなたは相対参照静的リソースを使用しています。

我々は、最新にそれを修正する5.11.2のバージョンCDN、導入のテーマテンプレート変更base.html文書を：

<!-- themes/pelican-alchemy/alchemy/templates/base.html --> 

<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.min.css">

<!-- 改成 --> 

<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/solid.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/brands.css" rel="stylesheet">

上記のステップに加えて、我々は行うには、追加の仕事を持っていない：ので、5.xバージョンは、もはや使うfa接頭辞をし、それを置き換えるfas（Solidスタイル）とfab（Brandsスタイル）;

だから、中に同じような主題のそれらのためにclass="fa fa-github"それが改正されなければならないスタイルclass="fab fa-github"を中心に関連し、article.html、index.htmlおよびheader.htmlこれらの文書。

最後に、修正pelicanconf.pyの上に文書をICONS設定するフォーマットは、追加のスタイルのカテゴリを指定する必要があります。

# pelicanconf.py

# 社交属性，请到<https://fontawesome.com/icons>网站确定图标样式的类别
ICONS = [
    ('fab', 'github', 'https://github.com/luizyao'),
    ('fas', 'blog', 'https://www.cnblogs.com/luizyao/'),
    ('fas', 'rss', 'feeds/all.rss.xml')
]

pelican-alchemyあるopenのはissue：https://github.com/nairobilug/pelican-alchemy/issues/69についてFont Awesomeバージョン、フォローアップはに更新されることがあり5.x、現在、バージョンissueのフィードバックを受けた状態で、

使用しない理由についてはCDN、偉大な外観と、ファイアウォール、それに関連しています。。。

私はあなたが中国のグレートファイアウォールを聞いたと確信しています。インド、ロシアでは、一部のアフリカ諸国も同様のことをやっています。URLまたはIPがアクセスできなくなる可能性がありますあなたが知っていることはありません

2.2.3の使用Bootstrapスタイル

私たちは、特定のタイプに要素を追加することができますBootstrap公式のスタイル;例えば：各imgの追加要素class = "img-fluid"のスタイル。

まず、依存関係をインストールします。

# beautifulsoup4为插件所依赖的第三方包
λ pipenv install beautifulsoup4

次に、ダウンロードしBootstrapifyのプラグインを：

λ mkdir plugins
λ git submodule add [email protected]:ingwinlu/pelican-bootstrapify.git plugins/pelican-bootstrapify

最後に、変更pelicanconf.py設定ファイルを：

# 到哪里寻找插件
PLUGIN_PATHS = ['plugins']

# 想要使用的插件名
PLUGINS = ['pelican-bootstrapify']

# 想要添加的 Bootstrap 样式
BOOTSTRAPIFY = {
    'table': ['table', 'table-striped', 'table-hover'],
    'img': ['img-fluid'],
}

2.3カスタムテーマ

ここでは、pelican-alchemyいくつかの新機能を追加し、操作のいくつかのカスタマイズを行います。

2.3.1。トップへのリンクバックを追加します

変更されたbase.htmlファイルには、<head>次のコンポーネントを追加します。

<!-- themes/pelican-alchemy/alchemy/templates/base.html --> 

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>

<script>
  $(function () {
    $.scrollUp({
      scrollText: '<i class="fas fa-2x fa-chevron-circle-up"></i>'
    });
  });
</script>

2.3.2。サポートディレクトリ

私は置き換えプラグイン書いたpelicanデフォルトをMarkdownReader、それは次の機能があります。

  • 強化使ってmarkdown解析を

  • これは、記事のディレクトリを生成するために、次の方法をサポートしています。

    1. ではmarkdown、テキスト[TOC]マークの作成ディレクトリ。

    2. メタデータを介しtocカスタムディレクトリスタイル;例えば：

      {% if article.toc %}
  <aside class="col-md-4">
    <div class="widget widget-content">
      <h3 class="widget-title">文章目录</h3>
      <div class="toc">
        <ul>
          {{ article.toc | safe }}
        </ul>
      </div>
    </div>
  </aside>
{% endif %}

  • あなたが合わない場合summaryやsummary空の場合、それは要約として、文字の始まりの自動傍受をサポートしています。

どのように使用するには：

  1. サブ倉庫のダウンロードなど

    # 项目根目录创建目录
λ mkdir plugins
# 下载
λ git submodule add [email protected]:luizyao/pelican-md-reader.git plugins/pelican-md-reader

  2. 変更するpelicanconf.py設定ファイルを

    # pelicanconf.py

# 到哪里寻找插件
PLUGIN_PATHS = ['plugins']

# 想要使用的插件名
PLUGINS = ['pelican-md-reader']

：詳細についてを参照してくださいペリカン-MD-リーダー

2.3.3。そういえば

主なキーワードは終了します。

3.コンプリートpelicanconf.pyファイル

#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from __future__ import unicode_literals

AUTHOR = 'luizyao'
SITENAME = "luizyao's blog"
SITEURL = ''

PATH = 'content'

DEFAULT_LANG = 'en'

# Feed generation is usually not desired when developing
FEED_ALL_ATOM = None
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None

DEFAULT_PAGINATION = 10

# Uncomment following line if you want document-relative URLs when developing
# RELATIVE_URLS = True

# 修改时区
TIMEZONE = 'Asia/Shanghai'

# 修改默认的时间格式（'%a %d %B %Y'）
DEFAULT_DATE_FORMAT = "%Y-%m-%d %H:%M"

# 为元数据定义默认值
DEFAULT_METADATA = {
    # 默认发布的文章都是草稿，除非在文章元数据中明确指定：Status: published
    'status': 'draft',
}

# pelican-alchemy 原有的配置

# 主题所在的相对目录
THEME = 'themes/pelican-alchemy/alchemy'

# 副标题
SITESUBTITLE = '戒骄戒躁 砥砺前行'

# 头像
SITEIMAGE = '/images/profile.png width=200 height=200'

# 友链
LINKS = (
    ('pytest-chinese-doc', 'https://luizyao.github.io/pytest-chinese-doc/'),
)

# 代码高亮的样式
PYGMENTS_STYLE = 'friendly'

# 使用 Bootswatch 样式：https://bootswatch.com/
BOOTSTRAP_CSS = 'https://cdn.bootcss.com/bootswatch/4.3.1/lux/bootstrap.min.css'

# 生成 sitemap.xml 文件
DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives', 'sitemap']
SITEMAP_SAVE_AS = 'sitemap.xml'

# 构建后的 html 文件路径和 URL 标识
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{slug}.html'
ARTICLE_SAVE_AS = ARTICLE_URL
DRAFTS_URL = 'drafts/{date:%Y}/{date:%m}/{slug}.html'
DRAFTS_SAVE_AS = ARTICLE_URL
PAGE_URL = 'pages/{slug}.html'
PAGE_SAVE_AS = PAGE_URL

# RSS 订阅
FEED_ALL_RSS = 'feeds/all.rss.xml'

# 在构建中，它们会无损的拷贝到 output 的同名目录下
STATIC_PATHS = ['extras', 'images', 'css']

# 构建时，extras/android-chrome-192x192.png文件，拷贝到output/android-chrome-192x192.png，不再是output/extras/android-chrome-192x192.png
EXTRA_PATH_METADATA = {
    'extras/android-chrome-192x192.png': {'path': 'android-chrome-192x192.png'},
    'extras/android-chrome-512x512.png': {'path': 'android-chrome-512x512.png'},
    'extras/apple-touch-icon.png': {'path': 'apple-touch-icon.png'},
    'extras/browserconfig.xml': {'path': 'browserconfig.xml'},
    'extras/favicon-16x16.png': {'path': 'favicon-16x16.png'},
    'extras/favicon-32x32.png': {'path': 'favicon-32x32.png'},
    'extras/favicon.ico': {'path': 'favicon.ico'},
    'extras/manifest.json': {'path': 'manifest.json'},
    'extras/mstile-150x150.png': {'path': 'mstile-150x150.png'},
    'extras/safari-pinned-tab.svg': {'path': 'safari-pinned-tab.svg'},
    # 自定义样式
    'css/custom.css': {'path': 'theme/css/custom.css'},
}

# 自定义样式的URL目录
THEME_CSS_OVERRIDES = ('theme/css/custom.css',)

RFG_FAVICONS = True

# 到哪里寻找插件
PLUGIN_PATHS = ['plugins']

# 想要使用的插件名
PLUGINS = ['pelican-bootstrapify', 'pelican-md-reader']

# 想要添加的 Bootstrap 样式
BOOTSTRAPIFY = {
    'table': ['table', 'table-striped', 'table-hover'],
    'img': ['img-fluid'],
}

# 社交属性，请到<https://fontawesome.com/icons>网站确定图标样式的类别
ICONS = [
    ('fab', 'github', 'https://github.com/luizyao'),
    ('fas', 'blog', 'https://www.cnblogs.com/luizyao/'),
    ('fas', 'rss', 'feeds/all.rss.xml')
]

4.プレビュー

https://blog.luizyao.com

Githubの：https://github.com/luizyao/pelican-blog

おすすめ

転載: www.cnblogs.com/luizyao/p/11944143.html
おすすめ
ランキング
Viewサーバは、最大のIPアドレスをアクセスします
Java実装LeetCode 91復号方法
计算机基础知识23
RegExp オブジェクト
comando conda
Python プログラミングの入門から実践まで --抜粋--
【Python クローラー】Selenium の一般的な要素の配置方法と操作の紹介
アルゴリズムの問題戦闘戦略SORTGAME
shell中取字符串子串的几种方式
してみてください/を除くと主張の違いは何ですか？
アーカイブ
もっと
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)

コードワールド

© 2018 codetd.com