|
|
( t- B$ e. r, m8 v
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:" b( ` \* f$ j/ b5 z, _
5 M1 u& p- c8 Y* F+ L$ T1.下载主题文件4 C9 T" L& i& g
; k' k1 V- a0 ~# L* M; ^! _& A
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
, O( s% E. [% z
$ _0 H2 e8 H: r% s! Q2.创建 Typecho 主题目录% w* J7 `8 [# ^4 e- X( g
4 K: C3 l' J# t2 C9 u0 n7 P在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
' b# V1 O1 o/ O& O# `$ `# G: \2 _3 F, i5 ?, p3 G9 v
3.解压主题文件
! J" ]6 H$ U+ G: `/ N) A. K0 l' `2 m. Q& b) ~) x% U
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:1 ]9 T/ d- U V. c
3 g# p2 v0 e/ J1 G" Sassets/
) Y3 f) f& N( E- t$ jdist/
9 U8 U2 Q- {" ~4 L, {0 P0 J- o+ T( Sinc/
. W1 h; \6 e" }5 O, ]; {node_modules/
% O0 t9 M2 D. { upartials/' S0 h. T) p; e9 M$ K$ k, P! c
templates/
+ c3 o8 d; z" n) A8 O9 q) J6 R.babelrc
! |: i6 w, P5 W3 \% H$ a5 t* l0 s* {.eslintrc.js
1 D- p- v/ m$ Y+ y0 M, T9 \4 dgulpfile.js7 Q1 p. |; N$ y E$ Z. R1 p
package.json
+ }& g7 b3 D! c$ O1 [6 H8 U0 P' dwebpack.config.js5 F% ?; l7 e/ l2 k1 A7 O
4.修改主题样式表文件
( R7 \9 O/ ]2 |. h
$ V! p( Y1 x) {8 n: q9 p修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
1 R& t0 ?6 E5 t( R5 { d7 E/ }, J% u* |- h m
css
, K* p( {/ v4 U$ ^background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
5 A# g& T# H3 {! ~* J修改为:. y3 r; `2 `. c5 \, J
& s% ~ S/ E$ E! V% Q5 O7 j
css* M2 [4 z0 P% H. h2 a* Y7 n
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
* h9 g/ b) g1 s2 V I# t: C* j" k5 t5.创建 Typecho 主题配置文件
: l1 d) n4 N C) v
" p# |, b W& h% e在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
! b4 b" @! J* I& {+ Q/ B& W
. l( T& M5 T' ophp' m `, i! H6 ]& G! Z4 y
<?php
0 r( f: C- }6 ~return array(0 E0 m9 s* ^ ^; J6 G8 {
'name' => 'Heropress Pro',
! g# T/ m2 R; k+ L$ O0 q' Z7 w6 M 'description' => 'Typecho adaptation of Heropress Pro theme',
% b& i' R: |, O. J* x! B 'version' => '1.0',0 j. n/ F, ]: P; f" o- A1 F* b
'author' =>'Your Name',
+ q% U4 I' M' f, r$ d% e) n);$ N( S8 m+ V. \/ d, o
6.配置主题布局文件
2 Z/ Y& W9 _1 L f$ _
4 F0 ~/ y/ e9 ]2 z: `3 M在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
* q1 [9 |( q( g# Z
0 O) h5 t$ m7 d: ]! B. x- qphp! x. ?/ c' F& r7 p' h! z
<?php while ($this->next()): ?> ?0 P6 ]" k3 M6 n% Q1 j3 g2 E
<div class="post">$ ]. C6 u7 c0 G! C) c
<h2 class="post-title">8 Z5 p( K! ]5 g8 P) ?9 f
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
0 G9 m. z- a8 z+ w9 ` </h2>
( g2 \4 W; m' T, F& [) Z, z <div class="post-meta">% e) I% U( u+ @
<span><?php $this->date('F j, Y'); ?></span>6 x/ `' R) V6 s$ U9 O% {- I3 M
<?php if($this->tags): ?>
( a/ A+ {" T: u$ Z2 ? <span class="post-tags">
5 q. O' F3 E9 W6 d N <?php $this->tags(', ', true, 'none'); ?>' {/ h# y6 _2 D# t: R
</span># ^. w P. Q' J# e6 M
<?php endif; ?>/ ^1 C- w8 I1 ?6 p x8 T
</div>
+ v) b) T, m' r* ]3 }9 { <div class="post-content">
' P v5 q, G* j4 l; Q+ X <?php $this->content('Read more »'); ?> z7 V6 ?6 q* i+ l" O# }& ?: ?
</div>
; E3 d& h' O( X/ o" f</div>
- Y& a& R+ P5 e+ d1 G$ M+ P( o<?php endwhile; ?>
y6 D! \ A* j7.调用 Typecho 函数
$ _4 a9 v6 _' ^7 S
) g& m$ ]+ M, X! ~+ e# N在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:3 R$ U7 r+ C+ X$ n
% R) u4 B, P8 M1 F* Y+ s0 g8 Y
用 the_title() 替换 get_the_title()。
1 s6 H9 B0 w& g8 Y/ u. z7 Y$ [% I( t i
用 the_permalink() 替换 get_permalink()。/ |, L( S0 H# t
. ]4 i5 B) H" w( q用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
~5 F' V: o1 S3 j' }# @' P( j8 N
用 $this->content('Read more »'); 替换 the_content('Read more »')。
9 S6 F/ K3 |2 c q2 x6 y( m3 t& o( F0 p
8.添加 Typecho 标记$ g) u( f( z7 E4 j6 I! I
4 u% m7 _- T7 L$ V+ A& s在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
: o& ]& E4 t6 ]8 T
7 J) E6 J" Y% e# U8 e7 s, Qphp: k) r: P- h- p3 w* J
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
2 A- `8 Z# ^; D$ Z+ o<?php $this->need('header.php'); ?>
1 L% p% A- b: K" h9 p1 T" E7 @/ I: d<div id="main" class="container">2 [" Y& T' G! B
<div id="content" class="row">
7 L4 U1 [0 O9 u9 P0 U" N6 A <?php while ($this->next()): ?>
S+ E6 l* s4 y9 q0 |1 [ <div class="col-md-8 col-md-offset-2">
, M% m; R2 s8 Z1 _( R <div class="post"> v$ F. Y5 i: U) {6 H/ |/ e
<h2 class="post-title">
. k/ K2 S6 M0 a; F7 I" d8 \ <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>3 ]7 T$ n6 ]9 ~ R& Q7 m
</h2>4 U! j/ b1 |2 q- W5 S4 B3 R; Q& M0 E
<div class="post-meta">6 }; Y1 ~5 N) J
<span><?php $this->date('F j, Y'); ?></span>% r2 ^2 T+ M) y& j% N0 g- k8 i
<?php if($this->tags): ?>2 @2 ~& p5 X4 L( A' T% U
<span class="post-tags">
8 [) u- O6 D% L1 p <?php $this->tags(', ', true, 'none'); ?>
2 k4 L6 ?* k3 ?3 A4 d; {( ^! a </span>. s% q0 M/ i* E& ]! W& y
<?php endif; ?>
# O2 {2 |* V1 X" ^2 i/ X </div>! d1 R( c- @6 \: U
<div class="post-content">, i+ a1 i5 D7 a7 S/ c
<?php $this->content('Read more »'); ?>$ p" C8 A. b" h, ?0 Y0 h$ v5 M
</div>
/ }) g: V. M; Q% l0 U! H7 G- Q </div>4 H$ V8 p( w0 Q! I. W5 M2 o/ J
</div>+ v1 F9 [, [. U7 m( j, B' L
<?php endwhile; ?>% Q- \& r/ ` k2 L6 |, y( t7 r9 |
</div>; ]$ f1 a( n1 i# g* D, O# r
</div>
- B7 u P. g! r: U7 l9 `( \' O9 ~<?php $this->need('footer.php'); ?>) m& p: t. T2 _2 o. X4 n$ J9 h
9.调整其他可能需要的文件和代码8 }) n) Q. J8 F, I9 K
1 i$ v7 A2 t: n4 s; s9 f
根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
% p0 _* h" u! g$ H" r0 @: S6 G2 h3 q4 X
html
: c7 M" y5 P9 S/ _# \5 j<title><?php $this->archiveTitle(array(
, N- j' R$ ^* W0 n& ^3 X 'category' => _t('%s'),/ q ^( D9 E- {; a& X& e
'search' => _t('Search "%s"'),5 J( i8 m3 l3 B$ W& c$ g. r! ^
'tag' => _t('Tag "%s"'),
; I$ J( X. |/ w$ E7 P$ f" ]% {, ^ 'author' => _t('Author "%s"'),
6 r x. E! q' l 'date' => _t('Archive "%s"'),3 M$ t4 |" o1 t
'default' => ''
- H2 Y, u3 f" Z" f, c7 G. r ), '', ' - '); ?><?php $this->options->title(); ?>
* M! C( j" `+ t ^</title>
9 {& W: H0 `# R) x( k3 M10.使用主题1 ? ^9 `/ v7 m
0 P) a% d$ b6 C' O4 d. _0 h登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
) z. i' M8 x/ {) X0 z f& I# F8 ~( |! W( e' L- _" b9 U
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
0 ^9 }- Q5 ]+ d. D/ d
* ]1 _ n0 J4 A" P( ^0 X |
|