|
|
9 G2 k# D" D5 b, [: D' s" }" }% a6 p
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
7 t! c% F$ o6 G- y* s/ E! r
" x* I: I' H: q& z1 y1.下载主题文件
+ ]. a X: [7 {9 A& N7 U, i& G/ G/ ?) R& J! V
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。) d( P0 \* M( ?( L1 D7 e6 n
. s1 G; S m5 X, b0 l) _! M
2.创建 Typecho 主题目录2 |. A+ M9 J9 o/ L/ H% N* x9 g) u" |
) E& p: C# A1 Z& @4 L在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
: G& \! J1 R( u; N& a, N& l5 T# h1 N5 ~/ [8 i5 h
3.解压主题文件3 t4 [' }, Z, j8 u) p9 @
% S3 X! H8 A3 H2 G. [将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
3 t/ w( u4 s5 h h+ v3 O+ d$ K: D! l; c2 F4 F M
assets/8 U& g3 }6 n4 \. H4 |0 d" Q
dist// ]2 h/ j2 o7 B* V1 I9 B* [& a1 |
inc/% r( a/ W8 |0 f9 u2 S& p
node_modules/8 j& o/ x$ H+ g7 s; A; j! y2 ], u
partials/! v' T, [6 o+ @
templates/ [' v8 b3 e% j: G4 a2 u8 @
.babelrc
8 Q2 u6 R( p* F) q! L x6 r$ y3 r.eslintrc.js, r/ K0 K( [' D
gulpfile.js9 v$ ]( g9 W8 X, b! l! `6 \1 v
package.json
: m2 V* W7 @+ {) D+ C) z8 w+ k( k/ Fwebpack.config.js
0 H' C! t# i: S$ w: p3 a5 I1 d4.修改主题样式表文件! p4 i; W5 s" N4 ^$ v/ Q/ f- e9 j2 q
5 z( g& }7 X+ |5 _, p3 k) ~. t修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
7 r7 q8 E4 J( Z( H! `2 X( J, _2 M @
css. N& C& @* a& c o6 |7 ]" ~' S1 \4 ?
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
2 P$ _- h" {/ j9 d+ F- S2 K3 f# i修改为:$ g6 n! g. H% _+ a4 O
. S4 C' h8 g X+ dcss
' ^) I- v: ^1 c1 Y, [+ }background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
7 `" {/ Q, j( [ p6 k5.创建 Typecho 主题配置文件$ j0 A/ V. Y5 P/ \( ?, n$ X$ M. x
6 x, P* G+ J+ g- U* @" x" _# S
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
! u: n0 v8 U, @+ o. P
2 P, Z+ g' U. L+ ~3 H6 w( Sphp" B. n3 o1 M' x; Q$ z, K
<?php) o6 N' d7 u; @ ~/ L p& Q
return array(6 m' o0 Y, {3 u* \( o! o
'name' => 'Heropress Pro',
6 I4 }) p) K7 }( P, l9 A x 'description' => 'Typecho adaptation of Heropress Pro theme'," @" ~( w8 ]1 t" M7 ]8 X
'version' => '1.0',
2 E- D8 C; S7 {' R/ o 'author' =>'Your Name',
3 V: S2 W) E" e9 d$ o% i8 q. x);8 s) @ o! h, V! w
6.配置主题布局文件
* ^" z c, I) p0 v; U7 D( }# A' R9 Z2 `. h( P7 m
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:* Y7 j- t ]; |, g- j( J2 k
D5 C+ R: x l! {4 A7 P/ I
php
& I' b. X% @8 A9 s+ Z, K<?php while ($this->next()): ?>
8 C% B2 f* j3 c1 z<div class="post">
0 W+ c x1 |1 A( R" @ <h2 class="post-title">
/ |; U i2 N; V9 v6 o* d6 B <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
9 ?4 z' I- ?: W- w5 d8 L </h2>
) C0 b. L" n X6 m <div class="post-meta">
+ ]! S! c4 a! L- Z; k& _# F <span><?php $this->date('F j, Y'); ?></span>, Z: v, w8 e# b3 n k
<?php if($this->tags): ?>9 I0 u7 Q* m+ ?0 z) s2 R$ Y
<span class="post-tags">3 V$ \9 Y2 X' P. Q6 k
<?php $this->tags(', ', true, 'none'); ?>
9 z3 D+ a/ g( v# f5 x1 J6 [ </span>7 P3 a& i L5 I, I3 c
<?php endif; ?>
9 M0 f5 j- t1 }0 w6 i6 s </div>
5 G( `3 E, K; C4 Z8 Y1 n# a <div class="post-content"> d# M. D% A( Q1 V8 _" Z6 w7 X' P1 I
<?php $this->content('Read more »'); ?>" A( t4 M X0 b$ V' E6 k3 T; _$ s' b9 O
</div>
: Q. |8 z) _& a3 d' m</div>3 `) _7 w( @7 v( ]" w2 a
<?php endwhile; ?>+ r' L$ R5 ]0 |, F- I6 ~% D
7.调用 Typecho 函数, I8 a: Z8 C' x3 N
. X9 ^7 W3 A' ^# X# G& d在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:/ y0 W J% Z& J' S3 a" _
$ C* y7 C7 [% I. s! Z: P
用 the_title() 替换 get_the_title()。/ s3 r& Z, @2 s) M3 }+ Z
; o3 q! _# B# C) V5 \5 w+ B用 the_permalink() 替换 get_permalink()。
$ ]6 A; U+ b+ M, ?* z/ c/ C+ V" q# _
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。6 O4 `4 B7 U5 q/ C4 }1 B
1 B& e& p( O+ ~: g+ o用 $this->content('Read more »'); 替换 the_content('Read more »')。
& n0 k, B" m4 k R& e( C6 B( x& A( e. l Z( b
8.添加 Typecho 标记6 a0 P- P& _4 u' d1 Z5 A
' u8 M, P4 h7 }" m, ^0 C2 D6 _
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
3 ?0 D3 p o5 R9 j) I% @1 Q
" O# R, I4 S/ Y6 Fphp) H6 h' l, i. q3 j2 w* B' q
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
: N4 M! F+ U1 C5 m<?php $this->need('header.php'); ?>
( Z6 @& f, n! U8 z* g<div id="main" class="container">
* @ H% [& D! r; P5 c5 G$ S <div id="content" class="row">3 j( G- ~+ f0 l# p6 g
<?php while ($this->next()): ?>" h6 F* T3 E/ l; Z2 b
<div class="col-md-8 col-md-offset-2">
- C* {" m8 L' _: f( f/ }8 i <div class="post">
+ _# t* }$ M" p% u9 G, t( A% N <h2 class="post-title">: P: T2 D" z! q* _) S: Y1 ^
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>8 z/ V* _# e2 v% P& T2 Y
</h2>) X% y |4 R8 X! o# I: E
<div class="post-meta">& d- j; l5 p4 m, Y" P
<span><?php $this->date('F j, Y'); ?></span>
" W, k* \( F( Z6 {( M/ G <?php if($this->tags): ?>
, S4 i1 e. ^6 ~# A" m% ? <span class="post-tags">
% z4 w. N& ~6 B( @4 a# z <?php $this->tags(', ', true, 'none'); ?>
( i- V% ^9 e/ }/ @, G </span>* `# q$ g% C# I) J
<?php endif; ?>
+ U# @2 M) t5 M& K </div>& S4 ~& a3 M0 C( A, Q! f: M1 q/ ~
<div class="post-content">
: A6 H' q, J+ K2 a" A <?php $this->content('Read more »'); ?> w$ n0 _" Q3 N1 G
</div>7 {- S p4 V/ b7 d6 e& Y$ R! d: R
</div>
! s1 m2 T% _4 Q, p: ^ </div>
0 u: K- |& F7 Z' x& Y8 T <?php endwhile; ?>
" z8 h8 L& M8 q, A& c# O1 e2 h/ {4 } </div>
1 p% _5 F% z W; ^. q: m</div>
: f* u. o0 E7 V1 E ~' b5 ^9 U1 u( W<?php $this->need('footer.php'); ?>/ A+ p$ C) h% [) x% b2 p
9.调整其他可能需要的文件和代码 H0 U7 ^* R, x! Y: s j
4 j" T! ]6 Z( T) h) m" f
根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
6 a- V9 D% E( m; i+ T
- @! Z9 K2 s) h1 v& w* `html
8 @4 c" j& M2 D9 {' K: m<title><?php $this->archiveTitle(array(
: i5 g- q. a) z4 q, n) n4 U 'category' => _t('%s'),
! u* H- @6 w7 }: f( u, H 'search' => _t('Search "%s"'),
1 i5 {7 _) e' t 'tag' => _t('Tag "%s"')," w5 Z* ]7 S! J! b/ C) e$ H* H
'author' => _t('Author "%s"'),
6 s' b) l; Y- y% | 'date' => _t('Archive "%s"'),
/ T I* y% t- z& p2 [2 L( M+ ~/ I 'default' => ''
; A* F! ~! @; W0 D* ?" p ), '', ' - '); ?><?php $this->options->title(); ?>6 i" j& g; A3 a/ {0 \
</title>
: y# a0 Q* s* M10.使用主题" U6 `: G0 t# C ] E
5 P* k) c% |8 s7 y0 ]
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。. J6 I# S' L4 o9 H/ ]! A( k0 F
1 }3 h; j4 ^$ ^0 t4 T( y' I m
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。- W* z; n M& q, ?4 J: V
7 w0 @8 o' H" l7 x6 l
|
|