Hexo のランドスケープをカスタマイズして独自のテーマを作成する方法を教えます_html/css_WEB-ITnose

あなたは自分のブログを持ちたいだけでなく、自分のテーマも持ちたいと思っていると思います。現在、Hexo のテーマのほとんどは公式のテーマランドスケープから変更されていますが、他の人がそれを変更できる場合は、プログラミングや Web フロントエンドの知識がなくても、自分でテーマを作成することができます。私をフォローして、独自のテーマを作成してください。 ps: 私も少しずつ調べて、多くのチュートリアルを参照しました。

私のブログアドレス (http://www.codertian/com) まずはここにブログを投稿しますので、サポートしてください。質問がある場合は、一緒に議論してください

ブログを作成する

Hexo のインストール方法とブログの作成方法については、私のブログの別の記事を参照してください (http://www.codertian.com/2015/11/) 26/github-hexo-blog/ )

次に、全員がブログをインストールしたと仮定します。Hexo のデフォルトのテーマは風景なので、他のテーマを変更する必要はありません

設定しましょう。最初に hexo をクリーンにしてください。そして公開します

ランドスケープ設定ファイル

# Headermenu:  Home: /  Archives: /archivesrss: /atom.xml# Contentexcerpt_link: Read Morefancybox: true# Sidebarsidebar: right //插件可以放左边或右边widgets:- category- tag- tagcloud- archive- recent_posts

• 左上のメニューを変更するには、ヘッダー領域を変更し、フォーマットをコピーして自分で変更してください
• さらに分割線の表示プロンプトを変更したい場合は、続きを読むを変更できます
• 削除プラグインはウィジェットに含めることができます。追加について話しましょう

バナー画像を変更します

画像の場所は、landscape/source/css/images ディレクトリの下です。ご希望の画像に差し替えることができます。バナー バーのサイズを変更するには、landscape/source/css/_variables.styl に移動し、次の段落を見つけて変更します

// Headerlogo-size = 40pxsubtitle-size = 16pxbanner-height = 200px //可以更改为自己喜欢的banner高度banner-url = "images/banner.jpg" //图片名称也可以修改

サイドバーの接続の色を変更します

または、パス landscape/source/css/ を見つけます_variables.styl

// Colorscolor-default = #555 color-grey = #ec4c02color-border = #ddd //更改边框的颜色color-link = #0072a3 //更改连接的颜色color-background = #eee //页面的背景颜色 color-sidebar-text = #777 //貌似当时修改的这个吧color-widget-background = #ddd //边栏插件的背景颜色color-widget-border = #ccc //边栏插件的边框颜色color-footer-background = #262a30 //页面底部的背景颜色color-mobile-nav-background = #191919color-twitter = #00acedcolor-facebook = #3b5998color-pinterest = #cb2027color-google = #dd4b39

これらの色はすべて CSS の色です。この時点で、友人の中には「自分が欲しい色をどうやって知ることができるの?」という疑問を持つ人もいるかもしれません。Mac では、AppStore にアクセスして、Sip という無料の色選択ソフトウェアをダウンロードできます。それはMacに付属しています。 Windows には FastStone Capture というさらに優れたソフトウェアがあり、すべての機能を自分でダウンロードできます。

表示フォントを変更します

同じファイルです、フォントを見つけます

// Fontsfont-sans = "Helvetica Neue", Helvetica, Arial, sans-seriffont-serif = Georgia, "Times New Roman", seriffont-mono = Menlo, "Source Code Pro", Consolas, Monaco, Consolas, monospace

ページレイアウトを変更します

同じファイルです、レイアウトを見つけます、ページ全体のレイアウトを変更したり、幅や間隔を変更したりできます、などのページでは、ランダムに変更しないことをお勧めします。変更すると、コンピュータでは見栄えがよくても、携帯電話では動作しない可能性があります。

// Layoutblock-margin = 20px //更改模块之间的间距article-padding = 20pxmobile-nav-width = 280pxmain-column = 11 //更改文章的宽度sidebar-column = 3

記事の背景を変更する

landscape/source/css/_extend.stylを見つける

$block  background: #fbfbfb //文章的背景颜色  /*box-shadow: 1px 2px 3px #ddd*/  border: 1px solid color-border //文章的边框  border-radius: 10px //设置文章页面圆角

コードスタイルを変更する

landscape/source/css/_partial/highlight.stylを見つける

$code-block  background: highlight-background  border-radius: 5px // 更改为圆角$line-numbers  color: #666  font-size: 0.85em // 更改行号大小

小さなコードブロックの変更

.article-entry  pre, code    font-family: font-mono  code    background: #e3e3e3 设置背景颜色    color: #666    border-radius: 3px // 圆角设置    padding: 0.1em 0.3em // 控制大小

Smallコードブロックの色を変更します

landscape/source/css/_partial/article.styl ファイルを見つけます

.article-entry  @extend $base-style  clearfix()  color: color-default  padding: 0 article-padding  p, table    line-height: line-height    margin: line-height 0  h1, h2, h3, h4, h5, h6    font-weight: bold  h1, h2, h3, h4, h5, h6    line-height: line-height-title    margin: line-height-title 0  code    color: color-grey //设定文章小代码块字体颜色

Duoshuo を追加します

まず Duosuo 公式 Web サイトにアクセスし、アカウントを登録し、「インストールしたい」をクリックして Web サイトを設定します次に、landscape/layout/_partial/article.ejs を見つけて次のコードを追加します

コードは URL (http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9) を取得します

<% if (!index && post.comments){ %><section id="comments">      <!-- 多说评论框 start -->    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>    <!-- 多说评论框 end -->    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->    <script type="text/javascript">    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};      (function() {        var ds = document.createElement('script');        ds.type = 'text/javascript';ds.async = true;        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';        ds.charset = 'UTF-8';        (document.getElementsByTagName('head')[0]          || document.getElementsByTagName('body')[0]).appendChild(ds);      })();      </script>    <!-- 多说公共JS代码 end --></section>

次に Hexo 設定でファイル _config.yml で、Hexo の追加

duoshuo_shortname: tiantengfei

について注意してください。この duoshuo_shortname は、Web サイトを設定するときに短いドメイン名 tiantengfei.duoshuo.com の前にあるものです

Baidu 共有を追加します

同様に、Baidu に移動して Baidu を検索します。前のステップと同じ方法でコードを設定します。同じファイルを見つけて以下の文の下に貼り付けます。自分でコードを取得して、好みのスタイルを設定することをお勧めします。

      <footer class="article-footer">      <!--百度分享-->      <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div><script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>    </footer>

元の共有とタグを削除したようです。そうしないと機能しません。素敵なスタイルです。

記事ディレクトリを追加します

layout/_partial/article.ejs ファイルを見つけて追加します

<% if (theme.excerpt_link){ %>      <p class="article-more-link">        <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>      </p>    <% } %>  <% } else { %>    <!-- 文章目录 -->    <% if (!index && post.toc){ %>    <div id="toc" class="toc-article">        <strong class="toc-title">文章目录</strong>        <%- toc(post.content, {list_number: false}) %>    </div>    <% } %>

list_number:false はシリアル番号を表示しないことを意味します。開きたい場合は、true に設定できます

サイドバープラグインへの外部リンク

まず、/layout/_widget/ ディレクトリに新しいファイルを作成し、現在のディレクトリの archive.ejs コンテンツをコピーして、links.ejs

<div class="widget-wrap">    <h3 class="widget-title"><%= __('链接') %></h3>    <div class="widget">      <li><a href="https://github.com/CoderTian" title="Zippera's Blog">我的github</a></li>    </div>  </div>

という名前を付けます。次に、テーマの _config を変更します。 .yml ファイル

# Sidebarsidebar: rightwidgets:- category- tag- tagcloud- archive- recent_posts- links //新添加的那个外链

アーカイブの表示を変更する 記事数

ランドスケープをインストールすると、アーカイブページに表示される記事が非常に少なくなり、新しいページが表示される場合があります。風景テーマは Hexo のデフォルトテーマであるため、Hexo との連携が最も高くなります。Hexo の設定ファイルで確認できます

# Pagination## Set per_page to 0 to disable paginationper_page: 8pagination_dir: page

これは、ホームページ、アーカイブ、カテゴリ、タグに表示される記事の数を制御します。番号はすべてにとって重要です すべて有効になりますが、Hexo はこれらを個別に制御するプラグインを提供します

アーカイブ ページの数を設定します

$ npm install hexo-generator-archive --save

_config.yml 次の設定を追加します

archive_generator:  per_page: 20  //为0时表示不分页全展示  yearly: true  //按年生成归档  monthly: true //按月生成归档

タグ ページを設定します

npm install hexo-generator-tag --save

_config.yml 以下の設定を追加します

tag_generator:  per_page: 10

カテゴリページを設定します

npm install hexo-generator-category --save

category_generator:  per_page: 10

今回のチュートリアルは以上です 概要が遅すぎて時間間隔が長すぎるため、内容に漏れがあるかもしれません。この記事は、インターネット上の他の人の記事も多数参照し、概要をまとめています。私のブログ投稿をサポートしていただければ幸いです、皆さんに感謝します。

私のブログアドレス (http://www.codertian.com)